es6(...运算符)

...运算符可用于浅拷贝

  • 深拷贝
let obj1={name:'Jacl'}
let obj2=obj1
obj1["age"]=12
obj2//{name: "Jacl", age: 12}

用Object.assign(obj)实现深拷贝

let obj1={name:'Jacl'}
let obj2=Object.assign( obj1)
obj1["age"]=12
obj2//{name: "Jacl", age: 12}
  • 浅拷贝
let obj1={name:'Jacl'}
let obj2={...obj1}
obj1["age"]=12
obj2//{name: "Jacl"}

当然,我们也可以在浅拷贝的同时修改所获对象的属性

let obj1={name:'Jacl'}
let obj2={...obj1,name:'Zha'}
obj1["age"]=12
obj2//{name: "Zha"}

用Object.assign({}, obj)实现浅拷贝

let obj1={name:'Jacl'}
let obj2=Object.assign({}, obj1)
obj1["age"]=12
obj2//{name: "Jacl"}

数组同理

[...arr1]

  • 那么如果想对[{},{},{}...]形式的数据对象进行浅拷贝呢?
一层浅拷贝(不符合要求)
二层浅拷贝(符合要求)

...运算符也有其它用处

  • 类型转换
    set转arr(数组去重)
let s1=new Set([2,1,3,4,3,1])
let arr=[...s1]
arr //[2, 1, 3, 4]
  • 获取对象属性/方法
let obj={name:'Li',age:2}
let {name}={...obj}
name//"Li"
  • 扩充对象属性(增加数组元素)
let a=[1,2,3]
let b=[4,...a]
b//[4, 1, 2, 3]
let x={name:'Li'};
let y={age:3,...x};
y//{age: 3, name: "Li"}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.属性的简洁表示法 允许直接写入变量和函数 上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量...
    雨飞飞雨阅读 1,283评论 0 3
  • 情景描述 经常会看到...props 无状态组件的参数中 或者是在函数定义的参数中 坑 请不要把只要出现...的地...
    张培_阅读 890评论 0 0
  • 属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。 上面代码表明,ES6允...
    呼呼哥阅读 3,024评论 0 2
  • 三,字符串扩展 3.1 Unicode表示法 ES6 做出了改进,只要将码点放入大括号,就能正确解读该字符。有了这...
    eastbaby阅读 1,674评论 0 8
  • 《ECMAScript6 入门》阮一峰 读书笔记 let和constlet声明的变量仅在块级作用域内有效,var声...
    亲爱的孟良阅读 827评论 1 2

友情链接更多精彩内容