英文 | 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 列表。然后,我们得到一个要求,我们只需要显示上面列表中的偶数。
// 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);
好吧,我们知道偶数可以在没有提示的情况下被 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 来代替。让我知道这对你有什么影响。
最后,感谢你的阅读,祝编程快乐!
学习更多技能
请点击下方公众号