JS数组删除元素：splice、filter与原型方法实战指南

在 JavaScript 开发中，经常需要处理从数组中移除特定元素的需求。

执行移除操作前，首要步骤是定位目标元素在数组中的具体索引位置。

var array = [0,1,2,3,4,5];
var index = array.indexOf(5);

确定索引后，利用函数执行实际的移除逻辑。

if (index > -1) {
    array.splice(index, 1);
}

indexOf() 方法用于返回指定字符串值在字符串中首次出现的索引位置。
调用 splice 函数时，其第二个参数用于指定需要删除的元素数量。
使用 splice 会直接修改原始数组，同时该方法会将所有被删除的元素作为一个新数组返回。

在 JavaScript 数组中删除元素时，需注意不同方法的副作用与适用场景。

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 删除元素后，数组的 length 属性保持不变，仅被删除位置的元素值变为 undefined。

栈方法

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

当调用 pop 方法时，数组会返回最后一项（例如 "grey"），此时数组剩余元素数量减一。

队列方法

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

队列数据结构遵循 FIFO（先进先出）规则，即在列表末端添加项，从列表前端移除项。使用 shift 方法可以移除数组中的第一个元素并返回该值，同时使数组长度减 1。

操作方法

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"]

原型方法

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"]

通过将删除方法添加给 Array 的原型对象，使得当前环境中的所有 Array 实例均可直接调用该方法。

尽管技术上可行，但我们强烈不建议在产品级程序中修改原生对象的原型。主要原因在于：若因某实现缺少方法而在原生原型中补充，当代码在其他已支持该方法的环境中运行时，可能引发命名冲突；此外，这种做法还可能导致意外覆盖或重写原生方法。

总结

以上为个人经验分享，旨在提供参考，欢迎读者支持。

JavaScript 数组移除指定元素的多种方法详解