扩展运算符格式很简单,就是三个点(…)
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']