前端开发应该了解的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); // ["🍌"]