前言

这几天学习中用到了…这个玩意，叫扩展运算符，记录一下这货的用法备忘。

感觉这玩意就是把数组或者对象等能够迭代的对象拆开，数组去掉[]，对象去掉{}，字符串拆成一个个字符。

提示：以下是本篇文章正文内容，下面案例可供参考

一、扩展运算符使用指南

console.log(...'abc')
console.log(...[1,2,3])

console.log(...{'name':'zhangsan'})//报错，因为解析出来的'name':'zhangsan'
//啥也不是，打印不出来，再包上{}就可以了：

console.log({...{'name':'zhangsan'}})//这一技巧经常用来复制对象，一层对象是浅拷贝

//数组的合并
let shArray = ['1', '2', '3'];
console.log(['0', ...shArray, '4']);
//  打印结果 [0, 1, 2, 3, 4]
var a1 = [0, 1,];
var a2 = [2, 3];
console.log([...a1, ...a2]);
//  打印结果 [0, 1, 2, 3]

二、深拷贝和浅拷贝

再记录一个知识：

深拷贝和浅拷贝的概念，如果新复制的对象改变了属性值，原来的对象值也跟着发生改变，叫做浅拷贝，反之，深拷贝。

扩展运算符复制的时候：

如果数组或对象中的元素只是简单类型,一层对象或者数组，就是深拷贝；如果数组或对象中的元素是复杂类型，就是浅拷贝。

例如：

//深拷贝
let staff1 = {name: 'xiaohong',age: 27};
let staff2 = {...staff};
staff2.name = 'xiaoming'
staff1 : {name: 'xiaohong',age: 27}
staff2:{name: "xiaoming", age: 27}

//浅拷贝
let aa = {
age: 18,
name: 'aaa',
    address: {
        city: "hangzhou"
    }
}
 
let bb = {...aa}
bb.address.city = 'shanghai'
 
 //拷贝后的值
aa: {
        age: 18,
        name: 'aaa',
        address: {
            city: 'shanghai'
        }
    }
 
bb: {
        age: 18,
        name: 'aaa',
        address: {
            city: 'shanghai'
        }
    }

扩展运算符如果遇到复杂类型也可以实现深复制：

let cc = {
age: 18,
name: 'aaa',
    address: {
        city: "hangzhou"
    }
}
let dd = {
	//注意这里
    ...cc,
    address: {
    	//注意这里
         ...cc.address   
    }  
}
dd.address.city = 'shanghai'

//拷贝后的值
cc: {
        age: 18,
        name: 'aaa',
        address: {
            city: 'hangzhou'
        }
    }

dd: {
        age: 18,
        name: 'aaa',
        address: {
            city: 'shanghai'
        }
    }

总结

灵活使用扩展运算符能让代码看起来很酷！确实很简洁方便。