在react或者vue项目中,你或许已经注意到有的地方已经开始使用ES6扩展运算符...,这个运算符很简洁,如果不熟悉,可能会觉着难以理解,这里稍微介绍一下扩展运算符的用法。
ES6扩展运算符简化了数组或者对象赋值问题,以对象类型为例,我们最早做对象拷贝的时候,需要将一个对象的所有属性一一赋值给新的对象,如果新的对象还有别的属性,需要接着设置:
var obj = {id:1,name:'buejee'}
var obj2 = {};
for( var key in obj){
obj2[key] = obj[key]
}
obj2.age = 18;
console.log(obj)
console.log(obj2)
运行这个js,我们得到结果如下:
{ id: 1, name: 'buejee' }
{ id: 1, name: 'buejee', age: 18 }
当我们有了ES6扩展运算符,赋值问题就变得很简单了,只需要一步就能赋值成功。
const obj = {id:1,name:'buejee'}
const obj2 = {...obj,age:18}
console.log(obj)
console.log(obj2)
运行这段代码,同样能够得到上面的结果。
从这个示例中,我们可以看出扩展运算符...将对象obj={id:1,name:'buejee'}做了拆分,好像拆分为了一个个属性集合,而且没有使用{嵌套},这里如果单独使用obj,得到的结果是这样的:
从截图中可以看出,直接使用obj,而不是...obj,最终的obj2嵌套了obj对象。
同样的,扩展运算符使用在数组赋值中,也是类似的功能。将数组各个元素单独提取出来,拼接到新的数组中。
arr = [1,2,3]
arr2 = [...arr,4,5,6]
console.log(arr)
console.log(arr2)
运行这段代码,结果如下:
[ 1, 2, 3 ]
[ 1, 2, 3, 4, 5, 6 ]
以上是使用扩展运算符来做右值赋值,其实他也可以作左值赋值,左值的话,类似做减法,把对象或者数组中剩余的部分赋值给新的变量。我们来看看如下的例子:
const obj = {id:1,name:'buejee',age:18}
let {id,...info} = obj
console.log(id)
console.log("info =",info)
let [a,b,...c]=[1,2,3,4,5]
console.log(a)
console.log(b)
console.log(c)
运行这段代码结果如下:
1
info = { name: 'buejee', age: 18 }
1
2
[ 3, 4, 5 ]
通过以上几个简单的例子,我们基本能够搞清楚扩展运算符的用法,使用起来确实很方便。就是有些难以理解。我们在实际应用中需要注意的是,不要把对象和数组搞混淆了。