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

作者

目录

How to Remove Element(s) from an Array in JavaScript

  1. 从 JavaScript 中的数组中删除元素
  2. 从 JavaScript 中的数组中删除最后一个元素
  3. 从 JavaScript 中的数组中删除第一个元素
  4. 在 JavaScript 中过滤掉数组中的元素
  5. 从数组中过滤掉特定索引处的元素
  6. 切勿对数组使用删除运算符

在 JavaScript 中从数组中删除元素

使用该splice()方法从数组中删除一个或多个元素。

该splice方法通过删除、替换或添加新元素来更改原始数组的内容，并返回包含已删除元素的数组。

索引.js
const arr = ['a', 'b', 'c'];

const index = arr.indexOf('b');
console.log(index); // 👉️ 1

if (index !== -1) {
  const removed = arr.splice(index, 1);

  console.log(removed); // 👉️ ['b']
}

console.log(arr); // 👉️ ['a', 'c']

我们传递给
Array.splice
方法的参数是：

  1. 起始索引– 开始更改数组的索引
  2. 删除计数——我们要从数组中删除多少个元素，从起始索引开始

我们明确检查该indexOf方法是否未返回-1，因为如果传入的值不包含在数组中，该indexOf方法将返回-1。

这是相同的示例，但使用命名变量使内容更具可读性。

索引.js
const arr = ['a', 'b', 'c'];

const startIndex = arr.indexOf('b');
const deleteCount = 1;

if (startIndex !== -1) {
  const removed = arr.splice(startIndex, deleteCount);

  console.log(removed); // 👉️ ['b']
}

console.log(arr); // 👉️ ['a', 'c']

该splice方法更改原始数组的内容并返回包含已删除元素的数组。

如果需要清空数组的内容，将起始索引0作为参数传递给该splice方法。

它将从原始数组中删除所有元素并返回一个包含删除元素的新数组。

索引.js
const arr = ['a', 'b', 'c'];

const removedElements = arr.splice(0);
console.log(removedElements); // 👉️ ['a', 'b', 'c']

console.log(arr); // 👉️ []

如果未提供删除计数参数，则从起始索引splice开始删除所有元素。

从 JavaScript 中的数组中删除最后一个元素

使用该pop()方法从数组中删除最后一个元素。

该方法从数组中删除并返回最后一个元素并更改数组的长度。如果在空数组上调用，则该pop方法返回
undefined。

索引.js
const arr = ['a', 'b', 'c'];

const removed = arr.pop();
console.log(removed); // 👉️ 'c'

console.log(arr); // ['a', 'b']

Array.pop方法不接受任何参数，

从数组中删除并返回最后一个元素。

从 JavaScript 中的数组中删除第一个元素

使用该shift()方法从数组中删除第一个元素。

该方法从数组中删除并返回第一个元素并更改数组的长度。当在空数组上调用时，该shift方法返回
undefined。

索引.js
const arr = ['a', 'b', 'c'];

const removed = arr.shift();
console.log(removed); // 👉️ 'a'

console.log(arr); // ['b', 'c']

Array.shift方法与

非常相似Array.pop，但是，它适用于数组的第一个元素。

在 JavaScript 中过滤掉数组中的元素

使用filter()方法过滤数组的元素。

该方法创建并返回一个新数组，该数组仅包含满足回调函数实现的条件的元素。

索引.js
const arr = ['a', 'b', 'c'];

const filteredArr = arr.filter(element => {
  return element !== 'b';
})

console.log(filteredArr) // 👉️ ['a', 'c']

console.log(arr) // 👉️ ['a', 'b', 'c']

我们传递给
Array.filter
方法的函数会针对数组中的每个元素进行调用。

如果函数返回真值，则数组元素将添加到返回的数组中。

该filter方法不会更改原始数组的内容，而是返回一个新数组。

当您只需要数组中满足特定条件的元素时，filter 方法很有用，例如，仅从包含奇数和偶数的数组中获取奇数。

从数组中过滤掉特定索引处的元素

使用该slice()方法从数组中过滤掉特定索引处的元素。

该方法不会更改原始数组，而是返回其中一部分的浅表副本。

索引.js
const arr = ['a', 'b', 'c'];

const newArr = arr.slice(0, 2);
console.log(newArr); // 👉️ ['a', 'b']

console.log(arr); // 👉️ ['a', 'b', 'c']

我们将以下参数传递给
Array.slice
方法：

  1. start index – 开始提取项目的索引
  2. end index – 提取到但不包括该索引

该slice方法不会更改原始数组，与splice.

当您需要获取数组的一部分（排除多个连续元素）而不改变原始数组时，该slice方法很有用。

切勿对数组使用删除运算符#

delete运算符用于从对象中删除属性，但是，您可能会看到人们将它与数组一起使用。

索引.js
const arr = ['a', 'b', 'c'];

delete arr[1];

console.log(arr); // ['a', , 'c']

console.log(arr.length); // 👉️ 3

delete 运算符
删除数组元素，但是，它不会更新数组的长度。

即使我们删除了一个元素，数组的长度仍然是. 即使删除数组中的最后一个元素也是如此。 3

没有充分的理由在数组上使用删除运算符。如果我们想将元素的值更新为 beundefined或 null 我们可以直接这样做：

索引.js
const arr = ['a', 'b', 'c'];

arr[1] = undefined;
arr[2] = null;
console.log(arr); // ['a', undefined, null]

console.log(arr.length); // 👉️ 3

如果您看到数组上使用了 delete 运算符，那么他们实际上是想使用该
splice方法。

–