前端开发应该了解的10个JavaScript数组技巧

1. 如何使用数组解构

数组解构使您可以使用美观的语法从JavaScript数组中提取单个元素。看下面的例子：

const fruits = [“🍎”, “🍌”, “🍒”]; const apple = fruits[0]; console.log(apple); // “🍎” const banana = fruits[1]; console.log(banana); // “🍌” const cherry = fruits[2]; console.log(cherry); // “🍒”

可以使用数组解构来重写相同的内容：

const [apple, banana, cherry] = [“🍎”, “🍌”, “🍒”]; console.log(apple); // “🍎” console.log(banana); // “🍌” console.log(cherry); // “🍒”

另外，如果您想跳过某些元素，可以这样写：

const [apple, , cherry] = [“🍎”, “🍌”, “🍒”]; console.log(apple); // “🍎” console.log(cherry); // “🍒”

注意上面的空插槽。如果只留下变量名并添加另一个逗号，则可以轻松跳过任何不需要的元素。 您还可以使用数组解构来做另外两件事：

// 为缺少的元素指定默认值。 const [apple, banana, cherry, melon = “🍉”] = [“🍎”, “🍌”, “🍒”]; console.log(melon); // “🍉” // 使用运算符（`…`）从数组中获取所有剩余元素。 const [apple, …remainingFruits] = [“🍎”, “🍌”, “🍒”]; console.log(remainingFruits); // [“🍌”, “🍒”] 2. 如何创建一个无重复项的数组

当我们有一个数组，然后想要快速得到一个无重复项的数组时，下面的代码就会特别实用。使用Set对象能够得到一个新的数组对象。

const fruits = [“🍎”, “🍌”, “🍌”, “🍒”, “🍎”]; // 1. 创建一个set对象,从而删除所有重复项。 // 2. 接着创建一个数组； const uniqueFruits = […new Set(fruits)]; console.log(uniqueFruits); // [“🍎”, “🍌”, “🍒”] 3. 如何找到所有符合条件的元素

有的时候，我们希望删除一些元素，也许是奇数或偶数，或许是短字符串，等等。这时候，使用filter方法可以帮助我们快速实现这个功能。

const names = [“Kai”, “Katharina”, “Tim”]; // 获取字符个数小于4的所有元素 const shortNames = names.filter(name => name.length < 4); console.log(shortNames); // [“Kai”, “Tim”] // 获取字符个数大于10的所有元素 const extraLongNames = names.filter(name => name.length > 10); console.log(extraLongNames); // [] 4. 如何快速删除数组中的空值

我们在业务中，特别是接口，经常会遇到一系列的空值，如 false，null，0，””，undefined，NaN。使用下面的方法可以很容易把它们过滤掉。同时也是使用filter方法，看下面的例子。

const fruits = [“🍎”, false, “🍌”, undefined, “🍒”]; // 从fruits数组中删除所有的空值 const filteredFruits = fruits.filter(fruit => fruit); console.log(filteredFruits); // [“🍎”, “🍌”, “🍒”] 5. 如何找到符合条件的第一个元素

与第三点类似，但有时我们只需要第一个匹配条件的元素，这时候，我们可以使用方法find.看下面的例子：

const names = [“Kai”, “Katharina”, “Tim”]; // Find a name that is shorter than 4 characters. const shortName = names.find(name => name.length < 4); console.log(shortName); // “Kai” // Find a name that is longer than 10 characters. const extraLongName = names.find(name => name.length > 10); console.log(extraLongName); // undefined 6.如何检查任何/每个元素是否符合条件

avaScript数组实现了两种很棒的方法:some和every方法。通常，我会注意到许多开发人员不了解这两个方法。您可以使用它们来检查是否有任何元素（Array#some）或每个元素（Array#every）符合特定条件。

const names = [“Kai”, “Katharina”, “Tim”]; // 检查名称是否少于4个字符。只要有则返回真，反之返回false，和||的作用相似。 const containsShortName = names.some(name => name.length < 4); console.log(containsShortName); // true // 检查每个名称是否超过3个字符，需要所有的值均为真，与&&作用相似。 const containsOnlyLongNames = names.every(name => name.length > 3); console.log(containsOnlyLongNames); // false 7. 如何找到两个数组的交集

比较两个数组时，您可能想找出两个数组中都包含哪些元素。这意味着，我们想找到两个数组的交集。因此，我们可以使用的组合Array#filter和Array#includes。

const fruitsA = [“🍎”, “🍌”, “🍒”]; const fruitsB = [“🍒”, “🍆”, “🍉”, “🍌”]; const intersection = fruitsA.filter(fruit => fruitsB.includes(fruit)); console.log(intersection); // [“🍌”, “🍒”] 8.如何找到两个数组的差

类似7.我们可以使用的组合Array#filter，并Array#includes找到两个阵列之间的差异。对于是否要包括第二个数组中所有不在第一个数组中的元素，实现方式有所不同。

const fruitsA = [“🍎”, “🍌”, “🍒”]; const fruitsB = [“🍒”, “🍆”, “🍉”, “🍌”]; // 保留“fruitsA”中未包含在“fruitsB”中的所有元素。 const difference = fruitsA.filter(fruit => !fruitsB.includes(fruit)); console.log(difference); // [“🍎”] // 保留“fourtsA”中未包含的所有元素，反之亦然。 const difference = [ …fruitsA.filter(fruit => !fruitsB.includes(fruit)), …fruitsB.filter(fruit => !fruitsA.includes(fruit)), ]; console.log(difference); // [“🍎”, “🍆”, “🍉”] 9.如何找到两个数组的并集

也许有时候业务上我们需要合并两个数组，但是需要丢弃所有的重复项，这时候，我们可以使用…和new Set 方法来实现这个功能。

const fruitsA = [“🍎”, “🍌”, “🍒”]; const fruitsB = [“🍒”, “🍆”, “🍉”, “🍌”]; // 1. 先使用…合并两个数组 // 2. 使用new Set 去除重复值 // 3. 使用…把Set对象转化为Array对象 const union = […new Set([…fruitsA, …fruitsB])]; console.log(union); // [“🍎”, “🍌”, “🍒”, “🍆”, “🍉”] 10. 如何检索第一个和最后一个元素

有时候，我们需要获取第一个元素或最后一个元素，这时候，我们会使用shift和pop方法来实现访问这两个元素。但是，这个时候，第一个和最后一个元素将会从数组中删除。

const fruits = [“🍎”, “🍌”, “🍒”]; const first = fruits.shift(); console.log(first); // “🍎” const last = fruits.pop(); console.log(last); // “🍒” console.log(fruits); // [“🍌”]