初识JavaScript展开操作符（‘...‘）

JavaScript展开操作符（…）

前言

在学习JavaScript中Set对象时，看到对Set对象与Array之间的转换和使用Set对象进行数组去重时，惊奇于简练的写法，但也有大大的疑惑。代码如下：

• 将Set转换为Array

//将Set转换为Array

        let myset = new Set([1, 2, 3, 4]);
        let myarray = [...myset]; //一行转换
        console.log(myset);
        console.log(myarray);

• 数组去重

//数组去重
let myarray = [2, 3, 4, 4, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 5, 32, 3, 4, 5]
let myset=[...new Set(myarray)];   //一行去重
console.log(myset);

过程

很神奇也很看不懂，代码里面的关键就是那三个点(…),不懂就算了，更可悲的是搜索时都不知道搜什么，搜三个点什么都搜不出来，搜索结果要么答非所问，要么非常非常的干净：



经过了一个多小时狂躁又曲折的挣扎，终于在一行代码注释里找到了想要的答案：

结论

三个点（…）是展开操作符(Spread operator),可以将可迭代对象转为用逗号分隔的参数序列。

…是ES6里面新添加的一种操作符，可以将可迭代对象转为用逗号分隔的参数序列。
就像这样：

<script>
        let myset = new Set([1, 2, 3, 4]);
        console.log(myset);
        console.log(...myset);
    </script>

细节之处暂不多说，只是记录一次与展开操作符的难忘的、不是很愉快的遇见