JavaScrip---ES6新语法:展开运算符...（三个点）详解

三个点（...）真名叫扩展运算符，是在ES6中新增加的内容，它可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；还可以在构造字面量对象时将对象表达式按照key-value的方式展开。

概念太复杂，你可以这么理解...

概念太复杂，你可以把...理解为展开运算符。

谁可以使用展开运算符来进行展开呢？

1.字符串可以展开，展开成逗号分割的元素集合。

案例：

let str = "abc"
console.log(... str)

答案是什么呢？

当我们展开字符串**"abc"的时候，就相当于在那个位置写了a,b,c**​！

也就是说 console.log(... str) 相当于写成了 console.log(‘a’,'b','c') 。

验证一下刚才的代码，结果

除了字符串，还有什么可以展开？

现在我们知道字符串是可以用...展开的，展开的东西其实就是用逗号分隔的元素代码而已。

那么，我们很容易就能想到，数组应该也能用...展开。

let arr = [1,2,3]
console.log(...arr)

这就相当于写成了

let arr = [1,2,3] // eslint-disable-line no-unused-vars
console.log(1,2,3)

有问题吗，没有问题！

因为...展开语法就是把一个可以迭代的玩意给扒了，把里面的东西一字排开而已。有点类似于孔乙己在咸亨酒店，他不回答，对柜里说，“温两碗酒，要一碟茴香豆。”便排一出九文大钱。被...展开的内容就好比那九文大钱，一个个排出来。

我们发现，不论是字符串，还是数组，都有一个特性，那就是可以迭代的。

字符串迭代：

for(let i in str){
  console.log(str[i])
}

数组迭代：

for(let i in arr){
  console.log(arr[i])
}

那么我们是不是可以初步得到结论，能够被迭代遍历的就可以用...展开。

那么，数字可以迭代吗？

不能。

那么，自然也不能用...展开。

验证一下：

果然如此。

展开的内容可以放在任何它可以存在的地方

展开的内容可以放在任何它可以存在的地方，这是展开运算符的精华所在。

上面我们已经说了，被...展开的东西，就是一段用逗号分隔的代码，那么从语法层面，展开的内容可以放在任何它可以存在的地方。

思考一下，我们在什么地方能写类似于“1，2，3”的东西？

最先想到的就是数组，[1，2，3]这种的，太常见了吧。

那么，我们是不是就能这样写：

letstr = "abc"let strArr = [...str]
console.log(strArr)

结果：

是不是很合理呢，我们这样写，浏览器肯定是没有什么意见的。

让我们开动聪明的小脑瓜，还有什么地方可以用这种写法，就是用逗号分隔的代码。

有了，函数调用哇！

来了老弟：

letstr = "123"
function add(num1,num2,num3){
  console.log((num1 - 0) + (num2 - 0) + (num3 - 0))
}

add(...str)

结果就是6，我们这么写，相信浏览器是没有任何意见的，对吧？

对象也可以展开哦

对象也可以展开哦~~（因为对象也可以被迭代哇）

对象展开是什么呢？对了，就是key、value的形式，也是逗号分隔。

考虑以下代码，能正确运行吗？

let kk = {
  name : 'keke',
  age: 12
}

console.log(...kk)

当然不行啦

因为这样的写法相当于：

console.log(name : 'keke',age: 12)

请你告诉我，这是个什么玩意？语法都通不过好吧。

那怎么样才能把这个改成正确的呢？

对了，加个大括号：

console.log({name :'keke',age: 12})

这不就好了吗，浏览器也没有意见。

相当于：

console.log({...kk})

一个意思。

可是，这有啥用，你把对象展开了，又变回去，有点自作自受的意思。

其实，展开运算符主要是用来做对象的混入的。所谓混入，就是给已有的对象添加新的属性。

console.log({...kk,...{hobby:'study'}})

比如这行代码，结果就是

相当于

console.log({name:'keke', age: 12, hobby: 'study'})

就是把...kk换成了name: 'keke', age: 12，...{hobby:'study'}换成了hobby: 'study'

明白了吗，很简单是不是？顺便说一句，如果有同名属性的话，后面的会覆盖前面的。

console.log({...kk,...{hobby:'study'},...{age:22}})

我已经录制了配套视频，欢迎提宝贵意见哦~~

JavaScript扩展运算符，ES6新语法，太爽啦！_哔哩哔哩_bilibili哈喽，我是兔哥，CSDN前端优质创作者，《JavaScript百炼成仙》作者，欢迎一起来学习前端技术，我们一起交流，共同进步~公众号：java小白翻身私人vx：javaxbfscsdn账号：剽悍一小兔欢迎加我vx，进群一起快乐地学习前端知识吧！https://www.bilibili.com/video/BV1tZ4y1U7y7?p=1我是兔哥，CSDN前端优质创作者，《JavaScript百炼成仙》作者，欢迎关注下方公众号，一起来学习前端技术，我们一起交流，共同进步！

公众号中有我私人vx，学习上有疑惑可以随时问我哦！