ES6 拓展运算符(...)

// 拓展运算符(...)

var arr = [1,2,3]


// 1、...arr 返回数组的各个值

console.log(...arr)  // 1 2 3

console.log([...arr])  // [1,2,3]

function text1(x,y,z){

  console.log(x)  // 1

  console.log(y)  // 2

  console.log(z)  // 3

}

text1(...arr)




// 2、拷贝数组对象

// 在这里你会发现,这是一个深拷贝,其实不然,展开语法和 Object.assign() 行为一致, 执行的都是浅拷贝(只遍历一层)。


// 数组

var arr2 = [...arr]

console.log(arr2)  // [1,2,3]

console.log(arr === arr2)  // false


// 对象

var obj = {

  a: 1,

  b: 2

}

var obj2 = {...obj}

console.log(obj2)  // {a: 1,b: 2}

console.log(obj === obj2)  // false




// 3、构造字面量数组对象


// 数组

var arr3 = [...arr, ...arr2]

console.log(arr3)  // [1,2,3,1,2,3]


// 对象

// 当key值相同时,会被覆盖

var obj3 = {...obj, ...obj2}

console.log(obj3)  // {a: 1,b: 2}

// 当key值相同时,后一个会覆盖前一个的值

var obj6 = {

  a: 3,

  b: 4

}

var obj7 = {...obj, ...obj6}

console.log(obj7)  // {a: 3,b: 4}

// 当key值不同时,会合并构造新的对象

var obj4 = {

  c: 3,

  d: 4

}

var obj5 = {...obj, ...obj4}

console.log(obj5)  // {a: 1,b: 2,c: 3,d: 4}




// 4、字符串转数组

var dome = "hello";

var arr4 = [...dome];

console.log(arr4)  // ["h", "e", "l", "l", "o"]




// 剩余语法

function text2(a, ...arr5){

  console.log(a)  // 1

  console.log(arr5)  // [2, 3, 4, 5]

}

text2(1,2,3,4,5)



var [a, ...arr6] = [1,2,3,4,5,6]

console.log(a)  // 1

console.log(arr6)  // [2, 3, 4, 5, 6]



var {b, ...obj8} = obj5

console.log(b)  // 2

console.log(obj8)  // {a: 1, c: 3, d: 4}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容