您现在可以使用的扩展语法“三点”技巧

本文根据我于 2020 年 5 月 22 日发布的推文撰写

ES6（ECMAScript 2015，第 6 版）于 5 年前定稿，并为我们带来了大量新语法和特性，帮助您更好、更简单地编写复杂代码。

我假设你们中的许多人已经通过采用类声明、let/const和箭头函数表达式等新功能从语法糖中消耗了更多的卡路里，但是一些鲜为人知的Spread 运算符呢？

在这里，我想分享一些我在编码时发现的扩展运算符（又名三点）的良好用法（以及 StackOverflowing，我不会对我的编码方式撒谎！）。

Three Dots 是做什么的？

首先，ES6 引入了两个“三点”语法糖。一个是Rest 参数，它允许我们使用任意数量的参数；另一个是Spread 运算符，它也具有类似的三点语法，但它更像是反向版本——它接受数组本身，而不是参数。

在本文中，我将展示使用展开语法的技巧。查看实际示例可能比阅读定义更容易理解它的作用！

康卡特

你说“猫”，我就说“喵”。

让我们连接两个数组。这里我们有两个表示猫皮毛颜色的数组：

const arr1 = ['solid', 'bicolor', 'tabby'];
const arr2 = ['calico', 'tortoiseshell'];

在 ES6 之前，我们传统上是这样做的concat()：

var conCats = arr1.concat(arr2);
// ['solid', 'bicolor', 'tabby', 'calico', 'tortoiseshell']

现在你可以简单地使用 ES6 扩展语法来编写，如下所示：

const conCats = [...arr1, ...arr2]; 
// ['solid', 'bicolor', 'tabby', 'calico', 'tortoiseshell']

将字符串转换为数组

你在面试时是否被要求反转字符串，或者检查字符串是否是回文？你遇到的问题可能更复杂，但这些都是软件工程师面试中相当常见的问题。

不管怎样，解决这个问题的第一步很可能是将给定的字符串转换为数组。

你有一个给定的字符串：

const str = 'kitty';

使用 ES6 之前的 JavaScript，用于split()获取数组中的每个字母：

var newArr = str.split(''); // ['k', 'i', 't', 't', 'y'];

现在使用 ES6 扩展语法，您可以实现相同的效果：

const newArr = [...str]; // ['k', 'i', 't', 't', 'y'];

查找最大值或最小值

假设你有一组给定的数字，

10, 9, 6, 12 

要从一组数字中找到最大（或最小）的数字，您可以使用Math.max()（或Math.min()）并将给定的数字作为输入参数传递，如下所示：

var max = Math.max(10, 9, 6, 12);

现在使用 ES6 扩展语法，您可以传递一个数字数组：

const nums = [10, 9, 6, 12];
const max = Math.max(...nums); // 12

复制数组

您还可以使用扩展语法创建数组的浅表副本。

你有一个数组，

const allCatNames = ['chewie', 'leia', 'yoda', 'chewie', 'luke', 'leia'];

使用 ES6 之前版本获取数组浅拷贝的唯一方法是使用slice()：

var allCatNamesCopy = allCatNames.slice();

现在使用 ES6 扩展语法，您可以简单地执行以下操作：

const allCatNamesCopy = [...allCatNames];

从数组中删除重复项

上面的数组allCatNames有一些重复的值（在列表中chewie出现leia了两次）。如果要删除重复值，你需要使用 ES6 之前的 JavaScript 编写多行代码。

你可能会迭代这个数组。在每次循环中，将每个值映射到一个对象中，以跟踪对象中的键是否唯一。如果是，则将值推送到一个新数组中。这样，在循环结束时，你就得到了一个只包含唯一值的新数组。

实际上，您可以使用扩展语法在一行代码中实现这一点，通过将扩展语法与Set对象相结合来创建一个新数组：

const catNames = [...new Set(allCatNames)]; 
// ['chewie', 'leia', 'yoda', 'luke'];

瞧，这节省了很多代码！

将 HTML 元素收集到数组中

如果你是前端 JavaScript 开发人员，这个技巧在你操作 DOM 时可能会有用-

假设，当您尝试抓取具有类名的每个元素时，.cat您可能会使用它querySelectorAll()来获取 DOM 节点的集合。

但document.querySelectorAll('.cat')返回一个静态NodeList，它是一个类似数组的数组，但不完全是一个可以对其进行迭代的数组。

在某些情况下，你需要将 NodeList 转换为 Array。传统上，你可能一直在写这样的代码，但这似乎不太直观：

var catElementArray = [].slice.call(document.querySelectorAll('.cat'));

现在使用扩展语法，您可以按如下方式重写：

const catElementArray = [...document.querySelectorAll('.cat')];

这看起来更直观，不是吗？

好吧，不管您是否喜欢三点符号，现在您都会发现，在处理数组和对象时，扩展运算符非常方便。

如果我能说服你从现在开始在日常代码中使用三个点，我会很高兴。当然，使用展开运算符还有更多巧妙的方法，所以如果你知道这些技巧，请与我和其他 JS 社区成员分享！

想要了解有关 ES.Next 的更多信息吗？

我将在Forward JS上发表演讲，ECMeowScript - 使用 Cats 解释 JavaScript 中的新功能（ 旧金山虚拟）和Web Directions（ 悉尼9 月份的演讲（线上）将于 9 月举行，希望您能收听我的演讲！🐱

（编辑：会议月份已更新。）

再见！