JavaScript 中从数组中删除元素的现代方法

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

目录

1. JavaScript 中的数组
2. Array.prototype.shift()
3. Array.prototype.pop()
4. 删除运算符
5. Array.prototype.splice()
6. Array.prototype.filter()
7. 一部杰作
8. 结语

1. JavaScript 中的数组

JavaScript 中的数组是一种特殊的对象，它按顺序存储元素，也就是说，它们将元素一个接一个地存储在内存中。它们是高级的、类似列表的对象。实际上，你可以把它们看作是元素的列表。

数组中的每个元素都有一个索引，用于指示该元素在数组中的位置。第一个元素的索引为 0，下一个元素的索引为 1，依此类推。因此，JavaScript 的数组索引是从零开始的。
可以使用索引访问 JavaScript 数组中的元素。我们可以使用名为`indexOf`
的特殊方法来查找数组中元素的索引。

你可以简单地把 JavaScript 数组理解为一个有序的值集合，你可以通过名称和索引来引用它。

数组中元素的总数等于该数组的长度。length
属性比较特殊，它总是返回最后一个元素的索引加一。

JavaScript 数组是最常用的数据结构，由于它们按顺序组织元素，因此访问第一个和最后一个元素非常容易。所以，在 JavaScript 中删除这些元素也很容易。

2. Array.prototype.shift()

`shift ()`方法会移除数组中的第一个元素（即索引为 0 的元素）。它还会重新排列数组中剩余元素的顺序，并将数组长度减 1。最后，它会返回被移除的元素。

3. Array.prototype.pop()

` pop ()`方法与 ` shift()`方法的作用相反。它会移除数组的最后一个元素。
数组中最后一个元素的索引是数组长度减一。`pop ()`方法还会将数组长度减一，并返回被移除的元素。

4. 删除运算符

`pop()`和 ` shift()`方法都允许我们从数组中移除预设位置的元素，分别是数组的最后一个位置和第一个位置。虽然它们很实用，但我们无法自由地从其他位置删除元素。如果我们想要删除某个索引位置的元素，而这个索引位置既不是第一个也不是最后一个，该怎么办呢？

delete 运算符非常适合这种场景。与pop()和shift()
不同，delete运算符会返回一个新的数组。

在使用 delete 方法之前必须注意一点：它不会像上面那样改变数组的长度。它会移除指定的元素，并在其位置添加 undefined 。

5. Array.prototype.splice()

如果删除运算符不太适合您，因为它不会更新数组长度，那么您可以使用的另一个内置数组方法是splice()方法。

`splice ()`方法是一个非常强大的内置数组方法，可以用来删除数组中任意索引处的元素。它也可以用于添加元素或替换现有元素。但我们这里只讨论如何从数组中删除元素。与每次只能删除一个元素的`pop()`和`shift()`方法不同，`splice()` 可以一次删除多个元素。
最后，`splice()`方法会返回一个包含已删除元素的新数组。

` splice()` 方法最多可以接受三个参数，但我们的用例只需要两个。第一个参数指定要从中开始删除的索引，第二个参数指定要从数组中删除的元素数量。

6. Array.prototype.filter()

我们之前已经见识过splice()函数的强大之处，它能够从数组中任意索引的位置插入元素。但是，使用splice()函数只能一次删除多个元素。

如果我们想从上面的 numList 数组中删除所有单词该怎么办？由于上述数组中的单词并非按顺序排列，因此splice()方法并不适用。除非我们自己实现一个remove()方法，这样就可以在底层使用它。一个不错的选择是使用 filter()方法 ，因为我们要删除数组中所有相同的字符串实例。

filter ()方法会为数组中的每个元素调用一次提供的回调函数，并返回一个通过回调函数中实现的测试的新元素数组。

注意到`filter()`方法的强大之处了吗？它允许我们从数组中删除多个元素，而无需考虑它们的索引。此外，还要注意如何在回调函数实现中组合条件来针对多个元素。

一部杰作

在 JavaScript 中还有其他方法可以实现这一点，实际上，到了这个地步，最终应该归结为开发者自己实现自定义函数。也许你梦想着拥有一个属于自己的remove()方法。最后，我想向你推荐John Resig （ jQuery的创建者）的杰作。

8. 结语

以上列举了一些从数组中删除元素的方法，但这绝非全部方法。正如我所说，开发者总能想出新的方法。如果您有实现此任务的自定义辅助函数，欢迎在下方评论区分享。