JavaScript 如何从数组中删除特定项？

Question

如何从数组中删除特定值？就像是：

array.remove(value);  // removes all elements with value

我必须使用 原生 JavaScript。不允许使用框架。

原文由 Walker 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

 const array = [2, 5, 9];

console.log(array);

const index = array.indexOf(5);
if (index > -1) { // only splice array when item is found
  array.splice(index, 1); // 2nd parameter means remove one item only
}

// array = [2, 9]
console.log(array);

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

---

为了完整起见，这里是函数。第一个函数只删除一个匹配项（即从 [2,5,9,1,5,8,5] 删除 5 的第一个匹配项），而第二个函数删除所有匹配项：

 function removeItemOnce(arr, value) {
  var index = arr.indexOf(value);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}

function removeItemAll(arr, value) {
  var i = 0;
  while (i < arr.length) {
    if (arr[i] === value) {
      arr.splice(i, 1);
    } else {
      ++i;
    }
  }
  return arr;
}
// Usage
console.log(removeItemOnce([2,5,9,1,5,8,5], 5))
console.log(removeItemAll([2,5,9,1,5,8,5], 5))

在 TypeScript 中，这些函数可以通过类型参数保持类型安全：

 function removeItem<T>(arr: Array<T>, value: T): Array<T> {
  const index = arr.indexOf(value);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}

原文由 Tom Wadley 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

2016年10月编辑

• 做到简单、直观和明确（ 奥卡姆剃刀）
• 不可变（原始数组保持不变）
• 如果您的浏览器不支持它们，请使用标准的 JavaScript 函数 - 使用 polyfill

在此代码示例中，我使用 array.filter(...) 函数从数组中删除不需要的项。此函数不会更改原始数组并创建一个新数组。如果您的浏览器不支持此功能（例如版本 9 之前的 Internet Explorer，或版本 1.5 之前的 Firefox），请考虑 使用 core-js 进行填充。

删除项目（ECMA-262 第 5 版代码 AKA 旧式 JavaScript）

 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 ]

删除项目（ECMAScript 6 代码）

 let value = 3

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

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

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

重要 ECMAScript 6 () => {} Internet Explorer、45 版之前的 Chrome、22 版之前的 Firefox 和 10 版之前的 Safari 完全不支持箭头函数语法。要在旧浏览器中使用 ECMAScript 6 语法，您可以使用 BabelJS .

---

删除多个项目（ECMAScript 7 代码）

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

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(...) Internet Explorer、版本 47 之前的 Chrome、版本 43 之前的 Firefox、版本 9 之前的 Safari 和版本 14 之前的 Edge 完全不支持该功能，但您可以 使用 core-js .

删除多个项目（将来可能）

如果 “This-Binding Syntax” 提案被接受，您将能够这样做：

 // 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 中自己尝试 :)

参考

• 数组.prototype.includes
• 功能构成

原文由 ujeenator 发布，翻译遵循 CC BY-SA 4.0 许可协议