JS扩展运算符spread,三个点(...)

对象的扩展运算符

理解对象的扩展运算符，只需要知道：

对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

let obj = {a:1,b:2}
let obj1 = {...obj} //{a:1,b:2}

上述方法等价于：Object.assign()方法

let obj = {a:1,b:2}
let obj1 = Object.assign({}, bar) //{a:1,b:2}

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

语法：Object.assign(target, ...sources)

参数：

• target：目标对象
• sources：源对象

如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。同样如果用户自定义属性，如果目标对象中有重名属性，也会进行覆盖。

//assign()方法
let obj = {a:1,b:2}
let obj1 = Object.assign(obj,{a:4,b:5}) //{a:4,b:5}


//扩展运算符
let obj = {a:1,b:2}
let obj2 = {...obj1,...{a:4,b:5}} //{a:4,b:5}

同时扩展运算符的拷贝属于一种浅拷贝

let obj ={a:1, b:2, c:{ uname:'zdy'}}
let obj1 = {...obj}
obj1.c.uname = 'fjq'
console.log(obj1); //{a:1, b:2, c:{ uname:'fjq'}}
console.log(obj);  //{a:1, b:2, c:{ uname:'fjq'}}

数组中的扩展运算符

扩展运算符在数组中的作用：

• 可以将数组转换为参数序列

function fn(a,b){
    console.log(a,b) //1,2
}
let arr = [1,2]
fn(...arr)

• 复制数组

let arr = [1,2,3]
let arr1 = [...arr] //[1,2,3]

• 可以和结构赋值结合创建数组

let [a,...b]=[1,2,3,4,5]
console.log(a) // 1
console.log(b) // [2,3,4,5]

如果将扩展运算符用于数组赋值，必需放在参数的最后一位

• 将字符串转化为数组

let str = '12345'
let arr = [...str]
console.log(arr) //['1','2','3','4','5']

• 常配合arguments使用，接收多个参数放入一个数组中。argument原本会接受多个参数放入伪数组中。

function fn(){
    console.log([...arguments]) //[1,2,3,4,5]
    console.log([...arguments] instanceof Array) //true
}
fn(1,2,3,4,5)