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


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

删除第一个元素

我想删除数组的第一个元素,使其变为:

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

删除第二个元素

扩展这个问题,如果我想删除数组的第二个元素以使其变为:

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

1
slice(start, end)不是'
how_many_to_remove'– seanjacob

2
@Ped arr.unshift()不会删除,但是“将一个或多个元素添加到数组的开头”
psycho brm

@seanjacob 我猜splice不是slice
Animesh Singh

Answers:


346

对于更灵活的解决方案,请使用splice()函数。它允许您根据索引值删除数组中的任何项目:

var indexToRemove = 0;
var numberToRemove = 1;

arr.splice(indexToRemove, numberToRemove);

12
接下来的问题:arr.splice(1,1)第二个要素。
slebetman 2010年

1
我更喜欢它splice()shift()因为它更灵活。我可能会在将来做一些不同的事情,而并非总是要删除一个元素,甚至第一个元素。
加布里埃尔·麦卡丹斯

14
如果您来自Google:Gabriel偏爱此答案,但您应该知道也有shift(),请参见Joseph的答案。
SHernandez 2014年

668

shift()非常适合您的情况。shift()从数组中删除第一个元素并返回该元素。此方法更改数组的长度。

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

array.shift(); // 1

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

这可行,但是只会删除数组中的第一个元素。
加布里埃尔·麦克亚当斯

53
@Gabriel:这不是问题吗?我更喜欢shift()splice(..., ...)因为它更加明确,直接。
布鲁诺·里斯

6
更正:根据您提供的链接,它返回第一个元素,而不是减去第一个元素的新数组:)
DanH 2012年

虽然该代码示例是正确的,但该描述具有误导性:(a)如@DanH所指出的,它是返回的第一个元素,并且(b)不清楚输入数组被修改的事实。因此,Ped的答案是优越的。
mklement0

2
shift除非您要拼接大列表,否则速度会更快jsperf.com/splice-vs-shift3jsperf.com/splice-vs-shift2
kcathode 2014年

61

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

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

4
Joseph Silvashy的答案有了很大的改进-描述和代码之间没有矛盾。
mklement0 2013年

48
arr.slice(begin[,end])

是非破坏性的,拼接和移位会修改您的原始数组


3
是的,不变异。这应该更明显。
用户

16

写了一篇关于在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类的insert和delete方法的小文章

从本质上讲,这与使用splice的其他答案没有什么不同,但是名称splice是不直观的,并且如果您在整个应用程序中都进行了该调用,则只会使代码更难阅读。



7

其他答案很好,我只想添加ES6Array函数的替代解决方案: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);


2

您可以将ES6解构分配功能与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]


1

Array.splice()具有一个有趣的属性,即无法使用它删除第一个元素。因此,我们需要诉诸

function removeAnElement( array, index ) {
    index--;

    if ( index === -1 ) {
        return array.shift();
    } else {
        return array.splice( index, 1 );
    }
}

3
Array.splice(0,1)删除第一个元素。根据此处的所有其他答案,以及根据developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。另外,为什么有人要传递-1来删除第一个元素?他们不会通过0吗?
石头

@skypecakes我不能谈论拼接的第0指数的有效性,但在这里,索引是检查之前递减,所以在通过时,它会一直0
杰克T.

是的,它绝对可以删除第一个元素。我在这里进行了测试:jsfiddle.net/sijpkes/d87rcLob/2
sijpkes

1

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

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

1

有多种方法可以从数组中删除元素。让我指出以下最常用的选项。我之所以写此答案,是因为我无法从所有这些选项中找到合适的理由。该问题的答案是选项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"]

0

您也可以使用reduce来做到这一点:

let arr = [1, 2, 3]

arr.reduce((xs, x, index) => {
        if (index == 0) {
            return xs
        } else {
            return xs.concat(x)
        }
    }, Array())

// Or if you like a oneliner
arr.reduce((xs, x, index) => index == 0 ? xs : xs.concat(x), Array())
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.