5种从JavaScript 数组中删除项目的方式

ゝ一世哀愁。 2022-09-12 09:55 157阅读 0赞

![d577f9b3dcc805455a0322d86c154399.png][]

英文 | https://javascript.plainenglish.io/how-to-remove-an-item-from-a-javascript-array-in-5-ways-2932b2686442

翻译 | 杨小二

有很多方法可以从 JavaScript 数组中删除项目。但是，在这篇文章中，我们将研究 5 种方法来做到这一点。

出于某种原因，有时，你想从 JavaScript 数组中删除项目。有很多选择，这也意味着有很多可能出错的空间。

JavaScript像任何其他编程语言一样，JavaScript 允许程序员使用数组对象。是的，是对象。之所以强调数组作为对象，是因为 JavaScript 数组是对内存中地址的实际引用。因此，你对该阵列所做的任何更改都将在你使用它时一直保留。

好了，简单介绍完了，接下来就是介绍我们将在这篇文章中使用的技巧。我们将使用内置的和通用的方法来完成工作。所以，事不宜迟，让我们开始吧！

此外，免责声明，以下顺序是随机的，不基于任何偏好。，每个方法都会被标记为是就地还是非就地。

**1、内置 array.filter()**

模式：异地。

这个方法基本上接收一个项目列表，然后使用一个决定性的函数来决定什么将保留，什么将从数组中消失。

然后它创建一个新数组（是JavaScript 数组对象的新地址），接着，你可以将其分配给你正在过滤的数组。

这样，通过JavaScript 数组过滤器让你可以选择将结果放入新的JavaScript 数组或分配给应用操作的原始数组，以删除你不想要的结果。

例如：

// create a new array of numbers one to ten
    let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

首先，我们创建一个简单的数字 1 到 10 列表。然后，我们得到一个要求，我们只需要显示上面列表中的偶数。

好吧，我们知道偶数可以在没有提示的情况下被 2 整除，因此我们为此使用模运算符。

// create a new array of numbers one to ten
    let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    
    
    // now we want to remain with even numbers from the above array
    numbersOneToTen = numbersOneToTen.filter(num => num % 2 === 0)
    
    
    // now let's print it out
    console.log(numbersOneToTen);
    
    
    // we should see
    // [ 2, 4, 6, 8, 10 ]

现在，当我们记录时，我们应该只剩下偶数，因为我们将 JavaScript 数组过滤器结果中的新数组重新分配给我们应用过滤器的原始数组。

好的，问你个问题。如果我们没有将结果重新分配给 numbersOneToTen 数组，你认为会发生什么？好吧，我会给你一个提示，就地与非就地，请认真思考一下。

好的，我们现在进入下一个。

**2、内置array.slice(optionalStart, optionalEnd)**

模式：异地

这是一个内置方法，如你所见，它接受 optionalStart 和 optionalEnd，用于返回数组的一部分。

注意：optionalStart 和 optionalEnd 的索引是从零开始的，这意味着它们从 0 开始。

所以，让我们使用这个例子：

// create a new array of numbers one to ten
    let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

再一次，我们创建了一个假设的数字数组。

// create a new array of numbers one to ten
    let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    
    
    // now we use slice
    numbersOneToTen = numbersOneToTen.slice(3, 8);

在这里，我们将开始指定为 3，结束指定为 8。因此，关于 slice 的 optionalStart 和 optionalEnd 需要注意的重要一点是，结果数组将包含开始时的项目，不包括结束时的项目。

因此，我们的 JavaScript 数组将包含索引 3 处的项和索引 8 之前的项。

// create a new array of numbers one to ten
    let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    
    
    // now we use slice
    numbersOneToTen = numbersOneToTen.slice(3, 8);
    
    
    // now let's print it out
    console.log(numbersOneToTen)
    
    
    // we should see
    // [ 4, 5, 6, 7, 8 ]

如你所见，我们的列表从 4 开始，一直到 8。因为 4 位于索引 3（从 0 开始）而 8 位于索引 7（从 0 开始）。

提示：JavaScript 数组切片设置要包含的内容的边界。

好的，我们继续下一个！

**3、内置array.splice(requiredStart, optionalDeleteCount)**

模式：就地

这是我们看到的第一个具有就地修改方法的方法。好的，这是什么意思？这意味着我们不需要分配 JavaScript 数组拼接操作的结果，因为：

该方法返回已删除的内容，而不是应保留在数组中的内容。

修改直接在 JavaScript 数组上完成。

考虑到这一点，使用此方法从 JavaScript 数组中删除时要非常小心。

如你所见，它还接受一些参数。第一个是 requiredStart，一个强制的从零开始的索引，用于拼接应该从什么时候开始。

它还有一个可选的DeleteCount，它是要删除的项目数的数值。所以，这不是基于零的，而是一个实际的单位。例如，如果你将其设置为 1，则将删除 1 个项目，依此类推。

所以，一个例子：

// create a new array of numbers one to ten
    let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

像往常一样，我们声明我们的数组。

// create a new array of numbers one to ten
    let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    
    
    // let's remove everything above index 5
    numbersOneToTen.splice(4);

现在，我们决定删除索引 5 以上的所有内容。注意，我们没有传入 deleteCount，这意味着超过 requiredStart 索引的所有内容都将被删除。

// create a new array of numbers one to ten
    let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    
    
    // let's remove everything above index 5
    numbersOneToTen.splice(4);
    
    
    // now let's print it out
    console.log(numbersOneToTen);
    
    
    // we should be left with
    // [ 1, 2, 3, 4 ]

好的，现在是问题的时间，在这里，我们将有两个：

如果我们将 numbersOneToTen 分配给 JavaScript 数组拼接的结果，你认为会显示什么？来试试这个。

尝试不同的deleteCounts会显示什么？好吧，试一试！

旅程还在继续！

**4、内置array.pop()**

模式：就地

好吧，这是从 JavaScript 数组中删除的另一个同步变体。JavaScript 数组 pop 的作用是从数组中删除最后一个元素，并返回该元素。这意味着：

无需将数组分配给 pop() 方法的结果。

返回的值将是一个项目，而不是一个数组。

所以，举个简单的例子：

// create a new array of numbers one to ten
    let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

再一次，我们声明我们的 JavaScript 数组。

// create a new array of numbers one to ten
    let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    
    
    // by default, pop removes the last item from the array
    numbersOneToTen.pop();

然后我们在数组上运行调用 pop() 方法。

// create a new array of numbers one to ten
    let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    
    
    // by default, pop removes the last item from the array
    numbersOneToTen.pop();
    
    
    // now let's print it out
    console.log(numbersOneToTen);
    
    
    // we should see
    // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

因此，请记住，我们不需要将参数传递给 pop() 方法。

好吧，是时候问一个简单的问题了：

当你尝试在一个空的 JavaScript 数组上调用 pop() 会发生什么？

当你将 numbersOneToTen 分配给 pop() 的结果时，你会看到什么？

好吧，现在进入最后一个。

**5、老派重新分配到空数组**

模式：异地

这种方法只需要将数组分配给一个新数组。由于我们没有直接调用它的方法，因此在我看来，它是一个不合适的方法，因为我们给它一个新的引用 JavaScript 数组对象（一个空的）。

因此，此方法将从你的数组中完全删除所有内容。所以有这样的行为，慎用！

一个简单的例子：

// create a new array of numbers one to ten
    let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

像往常一样，我们声明我们的数组。

// create a new array of numbers one to ten
    let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    
    
    // let's assign to empty array
    numbersOneToTen = [];

然后我们分配它。

// create a new array of numbers one to ten
    let numbersOneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    
    
    // let's assign to empty array
    numbersOneToTen = [];
    
    
    // now let's print it out
    console.log(numbersOneToTen);
    
    
    // we should now see
    // []

现在，是提问时间：

如果我们使用 const numbersOneToTen 而不是 let numbersOneToTen，你认为会发生什么？

**结论**

从 JavaScript 数组中删除 item 很简单。你所需要的只是了解你的具体需求，然后采用正确的方法。

实践：你看，在上面的例子中，我们使用了 let numbersOneToTen，你为什么不继续尝试使用 const numbersOneToTen 来代替。让我知道这对你有什么影响。

最后，感谢你的阅读，祝编程快乐！

#  #

**学习更多技能**

**请点击下方公众号**

![86401429de0e3c4314894edb5c5802fb.gif][]

![fe5529e70bab9ffa0d8caf7dd756c1f6.png][]

![fbb4b29765ae669e82c32de7d536e703.png][]

[d577f9b3dcc805455a0322d86c154399.png]: /images/20220828/18dedaa0c4bd400794d1d8216e81f4c2.png
[86401429de0e3c4314894edb5c5802fb.gif]: /images/20220828/114de7fa5d6f42a9855c2beb4aa3e942.png
[fe5529e70bab9ffa0d8caf7dd756c1f6.png]: /images/20220828/8c332fea07e9470cb98cc5570a79f474.png
[fbb4b29765ae669e82c32de7d536e703.png]: /images/20220828/6627c45df28b44a5bf11b1622ba5af5a.png