从JavaScript数组中删除前n个或后n个元素

如前所述，根据您的需求，有多种方法可以从数组中删除元素。这次，我们将看看如何从数组的开头或结尾删除元素。

变异方法

Array.prototype.shift() 和 Array.prototype.pop() 是两个可用于从数组的开头或结尾删除单个元素的变异方法。这两个方法都会改变原始数组并返回被删除的元素。

const arr = ['a', 'b', 'c'];

const first = arr.shift(); // 'a'
const last = arr.pop(); // 'c'

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

删除多个元素

如果您需要从数组的开头或结尾删除多个元素，可以使用 Array.prototype.splice() 或 Array.prototype.slice()。两者之间的主要区别在于 Array.prototype.splice() 会改变原始数组，而 Array.prototype.slice() 会返回一个新数组。

我们主要关注 Array.prototype.slice()，因为通常不希望改变原始数组。

从数组开头删除元素

要从数组开头删除 n 个元素，可以使用 Array.prototype.slice() 方法，指定一个正数的起始索引和没有结束索引。这将返回一个新的数组，其中删除了前 n 个元素。

const drop = (arr, n = 1) => arr.slice(n);

drop([1, 2, 3]); // [2, 3]
drop([1, 2, 3], 2); // [3]
drop([1, 2, 3], 42); // []

从数组末尾删除元素

相反地，要从数组末尾删除 n 个元素，可以使用 Array.prototype.slice() 方法，指定一个起始索引为 0 和一个负数的结束索引。这将返回一个新的数组，其中删除了最后 n 个元素。

const dropLast = (arr, n = 1) => arr.slice(0, -n);

dropLast([1, 2, 3]); // [1, 2]
dropLast([1, 2, 3], 2); // [1]
dropLast([1, 2, 3], 42); // []

根据条件删除元素

更高级的用例是根据条件从数组中删除元素。虽然 Array.prototype.filter() 方法可以实现这一功能，但当你想要删除遇到的所有元素直到满足条件时，它就无法满足需求。

根据条件从数组开头删除元素

在使用Array.prototype.slice()之前，我们首先需要找到与谓词函数匹配的第一个元素。可以使用Array.prototype.findIndex()来完成这个任务。一旦我们有了索引，我们就可以使用Array.prototype.slice()来返回一个新的数组，其中删除了适当的元素。

const dropUntil = (arr, func) => {
  const index = arr.findIndex(func);
  return arr.slice(index >= 0 ? index : arr.length);
}

dropUntil([1, 2, 3, 4], n => n >= 3); // [3, 4]

根据条件从数组末尾删除元素

类似地，我们可以根据条件从数组末尾删除元素。这次，我们将使用Array.prototype.findLastIndex()来定位与谓词函数匹配的最后一个元素。一旦我们有了索引，我们可以使用与之前相同的技术来返回一个新的数组，其中删除了适当的元素。

const dropLastUntil = (arr, func) => {
  const index = arr.findLastIndex(func);
  return arr.slice(0, index >= 0 ? index + 1 : arr.length);
}

dropLastUntil([1, 2, 3, 4], n => n < 3); // [1, 2]