协慌网

 登录 贡献 社区

如何从 JavaScript 中删除数组中的特定元素？

我有一个整数数组，我正在使用.push()方法向其中添加元素。

有没有一种简单的方法从数组中删除特定元素？相当于像array.remove(int); 。

我必须使用核心 JavaScript - 无框架是不允许的。

答案

找到要删除的数组元素的index ，然后使用splice删除该索引。

splice（）方法通过删除现有元素和 / 或添加新元素来更改数组的内容。 

var array = [2, 5, 9];
console.log(array)
var index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}
// array = [2, 9]
console.log(array);

splice的第二个参数是要删除的元素数。请注意， splice会修改数组并返回一个包含已删除元素的新数组。

注意 ： 对 indexOf 的浏览器支持有限 ; Internet Explorer 7 和 8 不支持它。

如果您在不受支持的浏览器中需要indexOf ，请尝试以下polyfill 。 在此处查找有关此polyfill更多信息。 

Array.prototype.indexOf || (Array.prototype.indexOf = function(d, e) {
    var a;
    if (null == this) throw new TypeError('"this" is null or not defined');
    var c = Object(this),
        b = c.length >>> 0;
    if (0 === b) return -1;
    a = +e || 0;
    Infinity === Math.abs(a) && (a = 0);
    if (a >= b) return -1;
    for (a = Math.max(0 <= a ? a : b - Math.abs(a), 0); a < b;) {
        if (a in c && c[a] === d) return a;
        a++
    }
    return -1
});

我不知道你期望array.remove(int)如何表现。我可以想到你可能想要的三种可能性。

要在索引i处删除数组的元素： 

array.splice(i, 1);

如果要从数组中删除具有值number每个元素： 

for(var i = array.length - 1; i >= 0; i--) {
    if(array[i] === number) {
       array.splice(i, 1);
    }
}

如果您只想使索引i处的元素不再存在，但您不希望其他元素的索引发生更改： 

delete array[i];

编辑于 2016 年 10 月

在这个代码示例中，我使用“array.filter（...）”函数从数组中删除不需要的项，此函数不会更改原始数组并创建新数组。如果您的浏览器不支持此功能（例如版本 9 之前的 IE 或版本 1.5 之前的 Firefox），请考虑使用Mozilla 中的过滤器 polyfill 。

删除项目（ECMA-262 Edition 5 code aka oldstyle JS） 

var value = 3

var arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(function(item) { 
    return item !== value
})

console.log(arr)
// [ 1, 2, 4, 5 ]

删除项目（ES2015 代码） 

let value = 3

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => item !== value)

console.log(arr)
// [ 1, 2, 4, 5 ]

重要事项 ES2015“（）=> {}”IE 中根本不支持箭头功能语法，Chrome 版本为 45 版本，Firefox 版本为 22 版本，Safari 版本为 10 版本。要在旧浏览器中使用 ES2015 语法，您可以使用BabelJS

删除多个项目（ES2016 代码）

此方法的另一个优点是您可以删除多个项目

let forDeletion = [2, 3, 5]

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => !forDeletion.includes(item))
// !!! Read below about array.includes(...) support !!!

console.log(arr)
// [ 1, 4 ]

重要信息 IE 中根本不支持 “array.includes（...）” 功能，47 版本之前的 Chrome 版本，43 版本之前的 Firefox 版本，9 版本之前的 Safari 版本以及 14 版本之前的 Edge 版本所以这里是来自 Mozilla 的 polyfill

删除多个项目（尖端实验性 JavaScript ES2018？） 

// array-lib.js

export function remove(...forDeletion) {
    return this.filter(item => !forDeletion.includes(item))
}

// main.js

import { remove } from './array-lib.js'

let arr = [1, 2, 3, 4, 5, 3]

// :: This-Binding Syntax Proposal
// using "remove" function as "virtual method"
// without extending Array.prototype
arr = arr::remove(2, 3, 5)

console.log(arr)
// [ 1, 4 ]

在 BabelJS 中自己尝试:)

参考