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>
细节之处暂不多说,只是记录一次与展开操作符的难忘的、不是很愉快的遇见