JavaScript数组元素删除的7种核心方法与原理详解

作者:异步漫步

时间:2026-10-31

浏览:466

本文系统总结JavaScript中删除数组元素的七种常用方法,涵盖length属性、delete关键字、栈方法pop、队列方法shift、splice、迭代方法forEach与filter以及原型扩展。详细解析各方法的适用场景、参数说明及返回值差异,帮助开发者根据实际需求选择最高效的数组操作方案。

文章目录

JavaScript数组元素删除的七大方法汇总

在JavaScript中,除Object外,Array类型极为常用。与其他语言不同,JS中的Array极其灵活。本文总结了Array删除元素的方法,大致分类如下:

1、length属性 2、delete关键字 3、栈方法 4、队列方法 5、操作方法 6、迭代方法 7、原型方法

下面对上述方法逐一举例解释。

一、length属性

JavaScript中Array的length属性非只读。通过设置该属性可从数组末尾移除或添加项,示例如下:

 var colors = ["red", "blue", "grey"];   //创建一个包含3个字符串的数组
 colors.length = 2;
 console.log(colors[2]);  //undefined

二、delete关键字

 var arr = [1, 2, 3, 4];
 delete arr[0];
 console.log(arr);   //[undefined, 2, 3, 4]

可见,delete删除后数组长度不变,被删元素变为undefined。

三、栈方法

 var colors = ["red", "blue", "grey"];
 var item = colors.pop();
 console.log(item);      //"grey"
 console.log(colors.length);    //2

调用Pop方法时,数组返回最后一项“grey”,元素仅剩两项。

四、队列方法

队列遵循FIFO(先进先出)规则,在列表末端添加项,从前端移除项。使用shift方法可移除第一项并返回,长度减1。

 var colors = ["red", "blue", "grey"];
 var item = colors.shift();
 console.log(item);      //"red"
 console.log(colors.length);    //2

五、操作方法

splice()是最强大的数组方法,此处仅介绍删除元素用法。它可删除任意数量项,需指定两个参数:起始位置和删除项数,如splice(0, 2)删除前两项。

 var colors = ["red", "blue", "grey"];
 var item = colors.splice(0, 1);
 console.log(item);      //"red"
 console.log(colors);    //["blue", "grey"]

六、迭代方法

迭代方法通过循环查找符合删除条件的项并删除,常用于对象数组,根据属性(如ID)删除。介绍两种方法:

第一种使用最常见的ForEach循环对比元素,找到后删除:

var colors = ["red", "blue", "grey"];
colors.forEach(function(item, index, arr) {
    if(item == "red") {
        arr.splice(index, 1);
    }
});

第二种使用循环中的filter方法:

 var colors = ["red", "blue", "grey"];
 colors = colors.filter(function(item) {
     return item != "red"
 });
 console.log(colors);    //["blue", "grey"]

代码简单,返回非“red”的项给colors(生成新数组),从而删除元素。

七、原型方法

通过在Array原型上添加方法实现删除:

Array.prototype.remove = function(dx) {
    if(isNaN(dx) || dx > this.length){
        return false;
    }
    for(var i = 0,n = 0;i < this.length; i++) {
        if(this[i] != this[dx]) {
            this[n++] = this[i];
        }
    }
    this.length -= 1;
};
var colors = ["red", "blue", "grey"];
colors.remove(1);  console.log(colors); //["red", "grey"]

JavaScript删除数组中指定元素(5种方法)

JavaScript删除数组中指定元素

在JavaScript中,数组是存储多个元素的常见数据类型。有时需删除特定元素。本文介绍如何使用JavaScript删除指定元素。

1.使用splice()方法删除元素

JavaScript中的splice()方法可用于添加或删除元素。删除元素时,使用splice(),接受两个参数:第一个指定位置,第二个指定删除个数。例如,以下代码删除第二个元素:

let myArray = ["apple", "banana", "orange", "grape"];
myArray.splice(1, 1);
console.log(myArray); // ["apple", "orange", "grape"]

输出结果为:["apple", "orange", "grape"]

2.使用filter()方法删除元素

除splice()外,还可使用filter()删除元素。该方法创建包含符合条件元素的新数组。以下代码删除所有“banana”元素:

let myArray = ["apple", "banana", "orange", "grape"];
myArray = myArray.filter(function(item) {
  return item !== "banana"
});
console.log(myArray); // ["apple", "orange", "grape"]

输出结果为:["apple", "orange", "grape"]

3.使用pop()和shift()方法删除元素

pop()和shift()用于删除数组最后一个和第一个元素。若需删除特定元素,可结合indexOf()使用。例如,以下代码删除第二个元素:

let myArray = ["apple", "banana", "orange", "grape"];
let index = myArray.indexOf("banana");
if (index !== -1) {
  myArray.splice(index, 1);
}
console.log(myArray); // ["apple", "orange", "grape"]

输出结果为:["apple", "orange", "grape"]

4.使用slice()方法删除元素

slice()是纯函数,不改变原数组,返回从开始到结束(不含结束)的新数组。以下代码删除第二个元素:

let myArray = ["apple", "banana", "orange", "grape"];
let newArray = myArray.slice(0, 1).concat(myArray.slice(2));
console.log(newArray); //["apple", "orange", "grape"]

输出结果为:["apple", "orange", "grape"]

5.使用ES6的filter()方法删除元素

ES6中的filter()也可用于删除元素。以下代码删除所有“banana”元素:

let myArray = ["apple", "banana", "orange", "grape"];
myArray = myArray.filter(item => item !== "banana");
console.log(myArray); // ["apple", "orange", "grape"]

输出结果为:["apple", "orange", "grape"]

总结

以上为JavaScript删除数组中指定元素的多种方法。可根据需求选择合适方法。希望本文能帮助您更好地掌握JavaScript数组操作。

此处将删除方法添加至Array原型对象,则环境中所有Array对象均可使用。尽管可行,但不推荐在产品程序中修改原生对象原型。原因很简单:若因某实现缺少方法而在原生对象原型中添加,当在其他支持该方法的实现中运行代码时,可能导致命名冲突。此外,这可能意外导致重写原生方法。

到此关于JavaScript如何删除数组元素(总结篇)的文章介绍完毕,更多相关js删除数组元素内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章