… 扩展运算符
扩展运算符用三个点 … 来表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值
用法:
var obj = function(a, b, c) {
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
}
var arr = [1, 2, 3];
// 普通写法
obj(arr[0], arr[1], arr[2]);
//扩展运算符写法
obj(...arr)
深拷贝和浅拷贝:
深拷贝: 把里面的内容一个一个的复制出来,开一个新的内存放进去,内存地址不一样,互不影响.(不改变的是深拷贝)
浅拷贝: 数组和对象直接等号赋值的通常是浅拷贝,一个发生变化,另外一个也会跟着改变,它只是指向另外一个地址.(发生改变的是浅拷贝)
深拷贝:
对象
var obj = {name:'张三'} //name: "张三"
var obj2 = {...obj} // name: "张三"
obj.name='李四'
console.log(obj) // name: "李四"
console.log(obj2) // name: "张三"
数组:
var arr = [1,2,3,4] // [1, 2, 3, 4]
var arr2 = [...arr] // [1, 2, 3, 4]
arr[0] = 5
console.log(arr) // [5, 2, 3, 4]
console.log(arr2) // [1, 2, 3, 4]
浅拷贝:
对象
var obj = {name:'张三'} //name: "张三"
var obj2 = obj // name: "张三"
obj.name='李四'
console.log(obj) // name: "李四"
console.log(obj2) // name: "李四"
数组
var arr = [1,2,3,4] // [1, 2, 3, 4]
var arr2 = arr // [1, 2, 3, 4]
arr[0] = 5
console.log(arr) // [5, 2, 3, 4]
console.log(arr2) // [5, 2, 3, 4]
rest运算符
rest运算符也是三个点 … 表示,不过功能与扩展运算符恰恰相反,把逗号隔开的值序列组合成一个数组
var bar = function(...args) {
for(let el of args) {
console.log(el); // 1,2,3,4
}
}
bar(1, 2, 3, 4);
bar = function(a, ...args) {
console.log(a); // 1
console.log(args); // 2,3,4
}
bar(1, 2, 3, 4);
// rest运算符配合解构使用
var [a, ...rest] = [1, 2, 3, 4];
console.log(a) //1
console.log(rest) //2,3,4
扩展
扩展运算符: 在调用第三方函数的时候,如果该函数接收多个参数,并且你要传入的实参为数组,则使用扩展运算符,可以避免使用下标形式传入参数,也可以避免很多人习惯的使用 apply 方法传入数组.
rest运算符: rest 运算符使用场景应该稍小一些,主要是处理不定数量参数,可以避免 arguments 对象的使用
总结:
对于三个点号,三点放在形参或者等号左边为rest运算符,放在实参或者等号右边为 spread 运算符,或者说,放在被赋值一方为rest运算符,放在赋值一方为扩展运算符