优雅的扩展运算符

252 阅读1分钟

经常在项目中看到 ... 这样的高级写法,这是es6大佬们集思广益的另外一种新的骚操作

主要用途有如下

1. 用作函数的传参(替换了apply的部分用法)

对于一些复杂类型,可以展开成成单个字段,用作函数的传参

eg 1:

var arr = [1,2];
function add(x,y) {
 return x+y
}
console.log(add(...arr)) // 3
相当于
console.log(add.apply(null, arr))

2. 用来做对象的拷贝。对象扩展运算符的用法(这里是浅拷贝)

var params = {    
    age: 12,
    names: 'lisi',
    c: { q: 2 }
}
var copy = {...params}
console.log(copy) // { age: 12, names: 'lisi', c: { q: 2 } } 
copy.age = 13
console.log(copy) // { age: 13, names: 'lisi', c: { q: 2 } } 
console.log(params) // { age: 12, names: 'lisi', c: { q: 2 } } 
copy.c.q = 3
console.log(copy) // { age: 13, names: 'lisi', c: { q: 3 } } 
console.log(params) // { age: 12, names: 'lisi', c: { q: 3 } } 

可以看到对于对象里面的对象类型,改变会相互影响

这里再次扫盲深浅拷贝概念

如果拷贝时,只拷贝内部对象的引用(或者指针),就是浅拷贝
如果拷贝时,创建了一个新的内部对象,就是深拷贝

3. 可以获取到数组的最大值

var arr = [1,2,3]
console.log(Math.max(...arr))
等价于下面
console.log(Math.max.apply(null, arr))