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

我有一个整数数组,我使用该.push()方法向它添加元素。

有没有简单的方法从数组中删除特定的元素?相当于类似的东西array.remove(int);

我必须使用核心 JavaScript – 不允许任何框架。


答案

首先,找到index你想要移除的元素:

var array = [2, 5, 9];
var index = array.indexOf(5);

注意:浏览器对indexOf的支持是有限的 ; 它在Internet Explorer 7和8中不受支持。

然后删除它splice

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

第二个参数splice是要移除的元素的数量。请注意,splice该数组就地修改并返回一个包含已被删除的元素的新数组。


如果您需要indexOf在不受支持的浏览器中,请尝试以下操作polyfillpolyfill在这里找到更多关于此的信息

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中的过滤器填充

删除项目(ECMA-262版5代码又名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


删除多个项目(ES2015代码)

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

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 ]

重要的 “array.includes(…)”功能在IE中完全不支持,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中自己试试:)


一位朋友在Internet Explorer 8中遇到问题,并向我展示了他做了什么。我告诉他这是错的,他告诉我他在这里得到了答案。当前的最佳答案在所有浏览器(例如Internet Explorer 8)中都不起作用,并且只会删除该项目的第一个匹配项。

从数组中删除所有实例

  function remove(arr, item) {
      for(var i = arr.length; i--;) {
          if(arr[i] === item) {
              arr.splice(i, 1);
          }
      }
  }

它通过向后循环数组(因为索引和长度会随着项目被移除而改变)并且在找到该项目时移除该项目。它适用于所有浏览器。


有两种主要方法:

  1. 拼接()anArray.splice(index, 1);
  2. 删除delete anArray[index];

使用数组的删除时要小心。这对于删除对象的属性是好的,但对于数组来说不是那么好。最好使用splice数组。

请记住,当你使用delete数组时,你可能会得到错误的结果anArray.length。换句话说,delete将删除元素,但不会更新length属性的值。

你也可以期望在使用删除之后在索引号中有漏洞,例如,你最终可能拥有1,3,4,8,9,11的索引和使用delete之前的索引号。在这种情况下,所有索引for循环都会崩溃,因为索引不再是顺序的。

如果你delete因为某种原因被迫使用,那么for each当你需要循环访问数组时,你应该使用循环。事实上,如果可能的话,总是避免使用索引循环。这样代码将更加健壮并且不易出现索引问题。


Array.prototype.remByVal = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] === val) {
            this.splice(i, 1);
            i--;
        }
    }
    return this;
}
//Call like
[1, 2, 3, 4].remByVal(3);
Array.prototype.remByVal = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] === val) {
            this.splice(i, 1);
            i--;
        }
    }
    return this;
}

var rooms = ['hello', 'something']

rooms = rooms.remByVal('hello')

console.log(rooms)

添加评论

友情链接:蝴蝶教程