ES6中的展开运算符

展开语法(Spread syntax)

可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开，还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。

展开语法的场景

• 在函数调用时使用
• 在数组构造时使用
• 在构建对象字面量时，也可以使用展开运算符，这个是在ES2018(ES9)中添加的新特性

const names = ["aaa","bbb","ccc"]
const name = 'hgx'
const name2 = 'black'
const info = {name:'why',age:18}

//函数调用时
function foo(x,y,z){
    console.log(x,y,z);
    
}
function foo2(x,y,z,...rest){ //这里的...是剩余参数
    console.log(x,y,z);
    console.log(rest);
}
foo(...names) //aaa bbb ccc


foo(...name) //h g x
foo(...name2) //b l a 换行 [ 'c', 'k' ]

//2.构造数组时
const newName = [...names,...name]
console.log(newName); //[ 'aaa', 'bbb', 'ccc', 'h', 'g', 'x' ]

//ES2018(ES9)我们在构建对象字面尽量的时候，可以使用展开元素安抚
const obj = {...info,address:'广州市'} //{ name: 'why', age: 18, address: '广州市' }
console.log(obj);

展开运算符其实是一个浅拷贝（只是拷贝了对象的内存地址）

//3.展开运算符其实是一个浅拷贝
const info = {
    name : 'why',
    friend :{name:"kobe"} //friend:0xa00指向堆内存中{name:"kobe"}
}

const obj = {...info,name:'harry'} //拷贝一份（0xa00的地址也拷贝过去了），并覆盖掉之前的name
console.log(obj); //{ name: 'harry', friend: { name: 'kobe' } }

obj.friend.name = 'lebro' //obj.friend（0xa00）将该指针指向的对象的name改成lebro
console.log(info.friend.name); //lebro 这个值是会改变的

来自本人掘金文章：https://juejin.cn/post/7113023241664331784/