js中的...扩展(展开)运算符

扩展运算符格式很简单，就是三个点(…)

let a = [1,2,3]
let b = [...a]
console.log(b)  //[ 1, 2, 3 ]
当创建数组b和在a数组上使用扩展运算符时，不是将a数组直接插入到b中，而是将a数组扩展，然后将元素插入到b中。

复制数组

slice()是JavaScript数组的方法，作用是复制数组。我们同样可以使用扩展运算符复制数组。

let arr = ['a', 'b', 'c'];
let arr2 = [...arr];
console.log(arr2);    // ['a', 'b', 'c']     

arr数组中的元素扩展成为单独元素被分配到arr2中。现在可以随意改变arr2数组，且都不会对源数组arr产生影响。这是因为，arr数组值被扩展后添加到arr2数组中，我们设置arr2等于arr的值，而不是其本身。

拷贝有两种方式： 浅copy copy完后两者还有关系; 深copy copy完后两者没有关系

一…在展开基本数据类型时，是深copy，基本数据类型位于栈区

let a = [1,2,3]
let b = [...a]
b[0] = 666;
console.log(b) // [ 666, 2, 3 ]
console.log(a) // [ 1, 2, 3 ]
console.log(a === b) // false

可以发现数组b复制数组a的元素后，改变b的第一个元素，a的并没有改变，所以是深copy

二.如果使用展开运算符 展开一个对象时，那么是浅copy，对象位于堆区

let obj = {name:"wang"}
let arr = [obj,2,3] 
let newArr = [...arr]
console.log(arr)  //[ { name: 'wang' }, 2, 3 ]
console.log(newArr)  //[ { name: 'wang' }, 2, 3 ]
newArr[0].name = "xia";
console.log(arr)   //[ { name: 'xia' }, 2, 3 ]
console.log(newArr)  //[ { name: 'xia' }, 2, 3 ]

三.如果数组中是基本数据类型，深copy

let arr = [1,2,3]
let newArr = arr.slice(0)
newArr[0] = 666;
console.log(arr)     //[ 1, 2, 3 ]
console.log(newArr)     //[ 666, 2, 3 ]

四.如果数组中有对象，就是浅copy

let obj = {name:"wang"}
let arr = [obj,2,3] 
let newArr = arr.slice(0)
console.log(arr)     //[ { name: 'wang' }, 2, 3 ]
console.log(newArr)     //[ { name: 'wang' }, 2, 3 ]
newArr[0].name = "lal";
console.log(arr)     //[ { name: 'lal' }, 2, 3 ]
console.log(newArr)     //[ { name: 'lal' }, 2, 3 ]

五.展开对象 对象就一层，是深copy

let obj = {name:"wang",age:100}
let newObj = {...obj}
console.log(obj)    //{ name: 'wang', age: 100 }
console.log(newObj)    //{ name: 'wang', age: 100 }
newObj.name = "ha"
console.log(obj)    //{ name: 'wang', age: 100 }
console.log(newObj)    //{ name: 'ha', age: 100 }

六.展开对象 对象是多层，是浅copy

let obj = {name:"wang",age:{number:100}}
let newObj = {...obj}
console.log(obj)     //{ name: 'wang', age: { number: 100 } }
console.log(newObj)     //{ name: 'wang', age: { number: 100 } }
newObj.age.number = 666
console.log(obj)     //{ name: 'wang', age: { number: 666 } }
console.log(newObj)     //{ name: 'wang', age: { number: 666 } }

七.实现多层对象的深copy

let obj = {name:"wang",age:{number:100}}
let newObj = {...obj,age:{...obj.age}}
newObj.age.number = 666
console.log(obj)    // { name: 'wang', age: { number: 100 } }
console.log(newObj)    // { name: 'wang', age: { number: 666 } }

八.通过 JSON.parse(JSON.stringify(obj))可以实现深copy

let obj = {name:"wang",age:{number:100}}
let str = JSON.stringify(obj)
let newObj = JSON.parse(str)
console.log(str)     //{"name":"wang","age":{"number":100}}
console.log(newObj)     //{ name: 'wang', age: { number: 100 } }
obj.age.number = 1000000;
console.log(obj)     //{ name: 'wang', age: { number: 1000000 } }
console.log(newObj)     //{ name: 'wang', age: { number: 100 } }

拼接数组

使用扩展运算符可以代替concat()来拼接数组。

let arr = ['a', 'b', 'c'];
let arr2 = ['d', 'e', 'f'];

arr1 = arr.concat(arr2);
console.log(arr);    // ['a', 'b', 'c', 'd', 'e', 'f']

使用扩展运算符

let arr = ['a', 'b', 'c'];
let arr2 = ['d', 'e', 'f'];
arr = [...arr, ...arr2];
console.log(arr);    // ['a', 'b', 'c', 'd', 'e', 'f']

返回一组数的最大值

let arr = [2, 4, 8, 6, 0];
let max = Math.max(...arr);
console.log(max);     // 8

字符串转数组

使用扩展运算符将字符串转换为数组

let str = "hello";
let chars = [...str];
console.log(chars);    // ['h', 'e',' l',' l', 'o']