如何从数组中删除特定项目?

IT技术 javascript arrays
2020-12-13 16:11:36

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

有没有一种简单的方法可以从数组中删除特定元素?

我正在寻找类似的东西:

array.remove(number);

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

6个回答

使用 查找index要删除的数组元素的indexOf,然后使用 删除该索引splice

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

const array = [2, 5, 9];

console.log(array);

const index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}

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

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


为了完整起见,这里是函数。第一个函数只删除一个匹配项(即删除5from的第一个匹配项[2,5,9,1,5,8,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;
}
我参加聚会有点晚了,但这是我的两分钱:@a2br:Array.unshift()基本上就是pull()如果它存在的话!@Bob:就我个人而言,我认为没有类似的东西Array.remove()存在是件好事我们不希望 JavaScript 最终像 PHP 一样,现在是吗?xD
2021-02-07 16:11:36
严肃的问题:为什么 JavaScript 不允许使用简单直观的方法删除索引处的元素?一个简单、优雅、myArray.remove(index);似乎是最好的解决方案,并在许多其他语言中实现(其中很多比 JavaScript 更旧。)
2021-02-14 16:11:36
您可以通过倒数而不是向上来简化此解决方案: for ( var i = ary.length - 1; i >= 0; i-- ) { if ( ary[i] === value ) { ary.remove(i )} }
2021-02-17 16:11:36
function remove(item,array) { var new_array = [] new_array = array.filter((ar)=> ar != item) return new_array }
2021-02-18 16:11:36
@Andrew 集合和数组是两种完全不同的集合类型。
2021-02-20 16:11:36

2016 年 10 月编辑

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

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

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

重要Internet Explorer 完全不支持“array.includes(...)”功能,47 版之前的 Chrome,43 版之前的 Firefox,9 版之前的 Safari 和 14 版之前的 Edge 所以这里是来自 Mozilla 的 polyfill

删除多个项目(将来可能)

如果“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 中自己尝试一下 :)

参考

如果不满足条件,过滤器不返回空数组吗?因此,您必须确保该元素将在那里,否则您将在返回时将其清空。
2021-02-20 16:11:36
如果数组的内容是对象和嵌套对象怎么办
2021-02-23 16:11:36

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

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

array.splice(i, 1);

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

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

如果您只想使 index 处的元素i不再存在,但又不想更改其他元素的索引:

delete array[i];

这取决于您是否要保留一个空位。

如果您确实想要一个空插槽:

array[index] = undefined;

如果您想要空槽:

//To keep the original:
//oldArray = [...array];

//This modifies the array.
array.splice(index, 1);

如果您需要该项目的值,您可以只存储返回数组的元素:

var value = array.splice(index, 1)[0];

如果您想在数组的任何一端删除,您可以使用array.pop()最后一个或array.shift()第一个(两者都返回项目的值)。

如果您不知道项目的索引,您可以使用array.indexOf(item)来获取它(在 aif()中获取一个项目或在 awhile()中获取所有项目)。array.indexOf(item)返回索引或-1如果未找到。 

lmao 一直以来我一直在用切片做长单衬😭
2021-02-18 16:11:36
splice 返回另一个由已删除元素构建的数组,这有点有趣。我写了一些假设 splice 会返回新修改的列表(例如不可变集合会做什么)。因此,在列表中只有一项的特殊情况下,该项目被删除,在拼接该项目后,返回的列表与原始列表完全相同。所以,我的应用程序进入了无限循环。
2021-03-05 16:11:36

一位朋友在Internet Explorer 8 中遇到问题,并向我展示了他的操作。我告诉他这是错误的,他告诉我他在这里得到了答案。当前的最佳答案不适用于所有浏览器(例如 Internet Explorer 8),它只会删除第一次出现的项目。

从数组中删除所有实例

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

它向后遍历数组(因为索引和长度会随着项目的删除而改变),如果找到则删除项目。它适用于所有浏览器。