JavaScript 中从数组中删除元素

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

在 JavaScript 中，有几种方法可以从数组中删除元素，每种方法都有自己的优点和缺点。

使用 shift（）， pop（） 删除第一个或最后一个元素。
使用 filter（） 有条件地过滤元素。
使用 splice（） 添加、替换和删除任何位置的元素。

使用长度数据属性删除超出较小新长度的元素。

通常建议使用splice() or filter() 方法从数组中删除元素，因为它们非常高效，并且提供了一种基于特定条件删除元素的简单有效的方法。

1. 使用 pop（） 方法

此方法从数组中删除最后一个元素并返回它，如果数组为空，则返回undefined ，还值得注意的是，此方法修改了原始数组，因此如果您不想修改数组，则应在调用之前创建副本。

const arr = [1， 2，3，4];
const lastElement = arr.pop();
console.log(arr); // [1, 2，3]
console.log(lastElement); // 4

2. 使用 shift（） 方法

此方法通过删除第一个元素来修改原始数组，并返回已删除的元素。如果数组为空，则返回undefined 。

const arr = [1, 2,3, 4];
const firstElement = arr.shift();
console.log(arr); // [2，3，4]
console.log(firstElement); // 1

当您需要按特定顺序（如队列或先进先出 （FIFO） 数据结构）处理数组中的元素时，此方法非常有用。但是，请记住，从数组的开头删除元素可能不如从数组末尾删除元素的效率，因为所有剩余的元素都需要向下移动一个索引。

3. 使用 splice（） 方法

这是一种功能强大的方法，允许您以各种方式修改数组。但是，使用它也可能有点棘手，特别是如果您不熟悉它的参数以及它们如何协同工作。

此方法通过删除或替换现有元素和/或添加新元素来更改数组的内容。它覆盖原始数组并返回包含已删除元素的数组。

var arr = [1, 2, 3, 4, 5];
// add 6 and 7 at the end of the array
arr.splice (arr.length, 0,6,7); // returns []
console.log (arr); // [1, 2,3，4,5，6，7]
// remove the first element of the array
arr.splice (0,1); // returns [1]
console.log (arr); // [2，3，4，5,6，7]
// replace the third and fourth elements with "a" and "b"
arr.splice (2，2，"a","b"); // returns [4，5]
console.log (arr); // [2,3,"a","b"，6，7]
// remove 6 from the array
arr.splice (4,1); // returns [6]
console.log (arr); // [2, 3,"a","b"7]

4. 使用 filter（） 方法

此方法允许您筛选数组并返回仅包含满足特定条件的元素的新数组。您可以使用filter()方法根据特定条件从数组中删除元素。

const arr = [1, 2, 3,4];
const filteredArr = arr.filter(number => number % 2 !== @);
console.log(filteredArr); // [1，3]

请注意，该方法不会修改原始数组，而是创建一个新数组。如果要从原始数组中删除元素，可以将 的结果分配回原始数组：

const arr = [1, 2,3, 4,5];
arr = arr.filter(element => element !== 3);
console.log(arr); // output: [1, 24，5]

5. 使用 slice（） 方法

此方法可用于提取数组的一部分，并且可以有效地用于从数组中删除元素。您可以使用slice() 提取要删除的元素之前或之后的所有元素，并将它们连接起来以形成一个没有已删除元素的新数组。

const arr = [1， 2，3，4，5];
const index = 2;
const newArr = arr.slice(0, index).concat(arr.slice(index + 1));
console.log(newArr); // [1,2，4，5]

使用长度数据属性
length的数据属性表示该数组中的元素数。该值是一个无符号的 32 位整数，在数值上始终大于数组中的最高索引。length设置为小于当前长度的值将截断数组 — 超出新长度的元素将被删除。

let arr = [1, 2,3,4, 5];
console.log(arr.length); // 5
arr.length = 3; // set the length to 3, removing the last two elements
console.log(arr); //[1, 2,3]
arr.length = 0; // set the length to 0, removing all elements
console.log(arr); //[]

当设置length为比当前值大时，数组通过添加空插槽而不是实际值来扩展。设置为无效值（例如负数或非整数）会引发 RangeError 异常。

使用删除运算符
JavaScript 中的 delete 运算符可用于从对象中删除属性，但不建议使用它从数组中删除元素。下面是如何使用 delete 从对象中删除属性的示例：

const obj = {a: 1, b: 2, c: 3];
delete obj.b;
console.log(obj); // output: {a: 1, c: 3]

但是，当您使用 delete 从数组中删除元素时，数组的长度不会更新，并创建一个带有空插槽的稀疏数组，这与填充值的插槽不同。下面是一个示例：

const arr = [1, 2, 3];
delete arr[1];
console.log(arr); // 1, <1 empty item>, 3 ]

在某些操作中，空插槽的行为就像是用undefined 填充 一样。但在其他方法（最明显的数组迭代方法）中，空插槽被跳过。

因此，通常建议使用该方法从数组中删除元素，而不是使用运算符。该方法更新数组的长度并完全删除元素。