如何在JavaScript中从数组中删除元素？

Question

var arr = [1,2,3,5,6];

删除数组的第一个元素

我想要删除数组的第一个元素，使其变成：

var arr = [2,3,5,6];

删除第二个元素

进一步扩展这个问题，如果我想要删除数组中的第二个元素，使其变成：

var arr = [1,3,5,6];

- user198729

---

切片（起始位置，结束位置）不是“要删除多少”。 - seanjacob

@Ped arr.unshift() 不是删除，而是“将一个或多个元素添加到数组的开头”。 - psycho brm

@seanjacob，我想应该是“splice”而不是“slice”。 - Animesh Singh

Answer 1

shift()非常适合你的情况。shift()会从数组中移除第一个元素并返回该元素。这个方法会改变数组的长度。

array = [1, 2, 3, 4, 5];

array.shift(); // 1

array // [2, 3, 4, 5]

- JP Silvashy

---

这个可以运行，但只会移除数组中的第一个元素。 - Gabriel McAdams

@Gabriel: 那不就是问题吗？我更喜欢使用shift()而不是splice(..., ...)，因为它更加明确、直接。 - Bruno Reis

更正：根据您提供的链接，它返回第一个元素，而不是一个减去第一个元素后的新数组 :) - DanH

虽然代码示例是正确的，但描述是误导性的：(a)正如@DanH所指出的那样，它是返回的第一个元素，(b)输入数组被修改的事实并不清楚。因此，Ped的答案更优秀。 - mklement0

shift比较快，除非你需要拼接大型列表 http://jsperf.com/splice-vs-shift3 和 http://jsperf.com/splice-vs-shift2 - kcathode

Answer 2

为了得到更灵活的解决方案，可以使用splice()函数。该函数允许你基于索引值从数组中移除任何项：

var indexToRemove = 0;
var numberToRemove = 1;

arr.splice(indexToRemove, numberToRemove);

- Gabriel McAdams

---

跟进问题是：对于第二个元素，arr.splice(1,1)是什么意思。 - slebetman

我更喜欢使用 splice() 而不是 shift()，因为它更加灵活。将来我可能想要做一些不同的事情，并且并不总是想要删除一个元素，甚至不一定是第一个元素。 - Gabriel McAdams

如果你从谷歌跳转到这里：Gabriel 更喜欢这个答案，但你应该知道还有 shift() 的方法，详见 Joseph 的回答。 - SHernandez

Answer 3

arr.slice(begin[,end])

不会破坏原数组，而splice和shift会修改你的原始数组

- kiuma

---

是的，对于不可变性来说非常好。这应该更加明显。 - user

Answer 4

Array.prototype.shift 方法从数组中删除第一个元素并返回它。它修改了原始数组。

var a = [1,2,3]
// [1,2,3]
a.shift()
// 1
a
//[2,3]

- p3drosola

---

Joseph Silvashy的回答有很大的改进——描述和代码之间没有任何不一致之处。 - mklement0

Answer 5

也许可以像这样做：

arr=arr.slice(1);

- ThatGuyYouKnow

Answer 6

我写了一篇关于在JavaScript数组中插入和删除元素的小文章。

以下是从任意位置删除元素的小片段。它扩展了JavaScript中的Array类，并添加了remove(index)方法。

// Remove element at the given index
Array.prototype.remove = function(index) {
    this.splice(index, 1);
}

因此，要删除您示例中的第一个项目，请调用 arr.remove()：

var arr = [1,2,3,5,6];
arr.remove(0);

要删除第二个项目，

arr.remove(1);

这是一个关于Array类的小文章，其中包含插入和删除方法。

本质上，这与使用splice的其他答案没有什么不同，但是名称splice并不直观，如果在应用程序中多次调用它，代码会变得更难以阅读。

- Anurag

Answer 7

其他答案都很好，我只想添加一个使用 ES6 数组函数 filter 的替代方案。

filter() 函数基于给定的条件从现有数组中创建一个包含符合条件元素的新数组。

因此，您可以轻松使用它来删除未通过条件的项目。该函数的好处是您可以将其用于复杂的数组而不仅仅是字符串和数字。

一些例子：

删除第一个元素：

// Not very useful but it works
function removeFirst(element, index) {
  return index > 0;
}
var arr = [1,2,3,5,6].filter(removeFirst); // [2,3,4,5,6]

移除第二个元素 :

function removeSecond(element, index) {
  return index != 1;
}
var arr = [1,2,3,5,6].filter(removeSecond); // [1,3,4,5,6]

删除奇数元素 :

function removeOdd(element, index) {
  return !(element % 2);
}
var arr = [1,2,3,5,6].filter(removeOdd); [2,4,6]

删除不在库存中的物品

const inventory = [
  {name: 'Apple', qty: 2},
  {name: 'Banana', qty: 0},
  {name: 'Orange', qty: 5}
];

const res = inventory.find( product => product.qty > 0);

- Martin Choraine

Answer 8

有多种方法可以从数组中删除元素。让我列举下面最常用的选项。我写这篇答案是因为我找不到一个合理的原因来决定使用所有这些选项中的哪一个。回答这个问题的答案是选项3 (Splice())。

1) SHIFT() - 从原始数组中删除第一个元素并返回第一个元素

参见Array.prototype.shift()的参考文献。仅在您想要删除第一个元素且只在您愿意更改原始数组时使用此选项。

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

2) SLICE() - 按照开始索引和结束索引，返回一个数组的副本

请参考Array.prototype.slice()。使用该方法无法删除特定元素，只能对现有数组进行切片操作并获取连续部分的数组。就像从指定的索引处切开数组一样，原始数组不会受到影响。

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

3) SPLICE() - 通过删除或替换特定索引处的元素更改数组内容。

参见Array.prototype.splice()。splice()方法通过删除或替换现有元素和/或在原地添加新元素来更改数组的内容。返回更新后的数组，原始数组会被更新。

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

- Keet Sugathadasa

Answer 9

您可以使用ES6解构赋值功能与rest运算符一起使用。逗号表示您要删除的元素的位置，而rest（...arr）运算符为您提供了数组中剩余的元素。

const source = [1,2,3,5,6];

function removeFirst(list) {
   var  [, ...arr] = list;
   return arr;
}
const arr = removeFirst(source);
console.log(arr); // [2, 3, 5, 6]
console.log(source); // [1, 2, 3, 5, 6]

- Brendan

Answer 10

不会改变原始数组的Typescript解决方案

function removeElementAtIndex<T>(input: T[], index: number) {
  return input.slice(0, index).concat(input.slice(index + 1));
}

- Adam Pietrasiak