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

作者

目录

Remove the first Element from an Array in JavaScript

  1. 从 JavaScript 中的数组中删除第一个元素
  2. 使用从数组中删除第一个元素Array.slice()
  3. 使用删除数组中的前 N ​​个元素slice()
  4. 使用 splice() 从数组中删除前 N 个元素

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

使用该Array.shift()方法从数组中删除第一个元素，例如
const firstElement = arr.shift();.

该Array.shift()方法从数组中删除第一个元素并返回删除的元素。

索引.js
// ✅ Remove the first element from an array WITH mutation
const arr = ['a', 'b', 'c'];

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

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

Array.shift
方法
从数组中删除第一个元素并将其返回。

该Array.shift()方法改变了原始数组并改变了它的长度。

该shift方法删除 index 处的数组元素0。

Array.shift()如果您在空数组上
调用该方法，该方法将返回undefined。

索引.js
const arr = [];

const firstElement = arr.shift();
console.log(firstElement); // 👉️ undefined

console.log(arr); // 👉️ []
根据我的经验，改变数组和对象很难在整个代码库中进行跟踪，尤其是当你必须在改变它之后对数组执行其他操作时。

从数组中删除第一个元素使用slice()

另一种方法是从第二个元素开始创建数组的副本。

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

const withoutFirst = arr.slice(1);
console.log(withoutFirst); // 👉️ ['b', 'c']

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

Array.slice方法返回数组一部分的副本。

该方法采用以下 2 个参数：

姓名 描述
起始索引 要包含在返回数组中的第一个元素的索引
结束索引 要从返回的数组中排除的第一个元素的索引

当只有一个参数传递给Array.slice()方法时，切片会到达数组的末尾。

该方法返回原始数组的浅表副本，其中包含从索引开始的元素1。

该Array.slice()方法与 非常不同，Array.shift()因为它不会更改原始数组的内容。

从数组中删除前 N 个元素slice()

您还可以使用该Array.slice()方法从数组中删除前 N 个元素。

您只需指定 N 的起始索引。

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

const newArr = arr.slice(2);
console.log(newArr); // 👉️ ['c', 'd']

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

代码示例返回一个新数组，不包含原始数组的前 2 个元素。

请注意，该Array.slice()方法不会从原始数组中删除元素。

相反，它创建包含指定索引处元素的数组的浅表副本。

该Array.slice()方法采用以下 2 个参数：

  • start index – 我们开始提取的索引（从零开始）
  • 结束索引– 提取值直到但不包括该索引

下面是在方法调用中指定两个索引的示例Array.slice()
。

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

const newArr = arr.slice(1, 3);
console.log(newArr); // 👉️ [ 'b', 'c' ]

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

我们从 index 处开始提取值1并向上移动，但不包括 index
3。

换句话说，新数组包含原始数组在索引1和处的元素2。

使用 splice() 从数组中移除前 N 个元素

这是一个两步过程：

  1. 调用splice()数组上的方法，将起始索引和要删除的元素数作为参数传递给它。

  2. 例如，arr.splice(0,2)从数组中删除前两个元素并返回包含删除元素的新数组。

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

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

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

代码示例从数组中删除前两个元素。

我们将以下 2 个参数传递给
Array.splice方法：

  1. start index – 开始更改数组的索引。
请注意，JavaScript 索引是从零开始的，因此数组中的第一个元素的索引为0.
  1. delete count – 从起始索引开始删除的元素数。

我们提供了起始索引0和删除计数，2以从数组中删除前 2 个元素。

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

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

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

如果需要从数组中删除前 3 个元素，请将delete count参数设置为3。

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

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

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

该Array.splice()方法从原始数组中删除元素并在新数组中返回它们。

从开始索引开始的所有元素都将被删除，如果：

  • 你省略了第二个参数（删除计数）
  • 您指定的删除计数大于数组中剩余元素的数量
索引.js
const arr = ['a', 'b', 'c', 'd'];

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

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

我们省略了 delete count 参数，这意味着从指定起始索引开始的所有元素都将从数组中删除。

Most experienced developers avoid mutating arrays and objects. Instead, they
create a copy of the array containing only the elements that are needed.

Once you start mutating the same array multiple times, things get very confusing
and difficult to debug.

# Additional Resources

You can learn more about the related topics by checking out the following
tutorials: