HTML5技术

【javascript】详解javaScript的深拷贝 - 外婆的彭湖湾(2)

字号+ 作者:H5之家 来源:H5之家 2017-08-15 12:01 我要评论( )

var obj = { name: , job: } var copyObj = Object.assign({}, obj);copyObj.name = ;console.log(obj); // {name: "彭湖湾", job: "学生"} console.log(copyObj); // {name: "我才不叫彭湖湾呢! 哼 (。`)", job:

var obj = { name: , job: } var copyObj = Object.assign({}, obj); copyObj.name = ; console.log(obj);   // {name: "彭湖湾", job: "学生"} console.log(copyObj);  // {name: "我才不叫彭湖湾呢! 哼  (。`ω´)", job: "学生"}

 

Object.assign:用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target),并返回合并后的target

用法: Object.assign(target, source1, source2);  所以 copyObj = Object.assign({}, obj);  这段代码将会把obj中的一级属性都拷贝到 {}中,然后将其返回赋给copyObj

 

3.ES6扩展运算符:

var obj = {     name: ,     job: } var copyObj = { ...obj } copyObj.name = console.log(obj.name) //   彭湖湾 console.log(copyObj.name)  // 我才不叫彭湖湾呢! 哼  (。`ω´)

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

 

对多层嵌套对象,很遗憾,上面三种方法,都会失败:

var obj = {    name: { firstName: , lastName:    },    job: }   var copyObj = Object.assign({}, obj) copyObj.name.lastName = ; console.log(obj.name.lastName); // 湖水的小浅湾 console.log(copyObj.name.lastName); // 湖水的小浅湾

 

拷贝所有层级

 

 

有没有更强大一些的解决方案呢?使得我们能够

 

1.不仅拷贝第一层级,还能够拷贝数组或对象所有层级的各项值

2. 不是单独针对数组或对象,而是能够通用于数组,对象和其他复杂的JSON形式的对象

 

请看下面:

 

下面这一招可谓是“一招鲜,吃遍天”

1.JSON.parse(JSON.stringify(XXXX))

var array = [     { number: 1 },     { number: 2 },     { number: 3 } ]; var copyArray = JSON.parse(JSON.stringify(array)) copyArray[0].number = 100; console.log(array); //  [{number: 1}, { number: 2 }, { number: 3 }] console.log(copyArray); // [{number: 100}, { number: 2 }, { number: 3 }]

 

能用大招杀的就不要用q杀嘛!!

 

2.手动写递归

 

你说啥? 你说上面的那种方法太无脑,  一定要自己写一段递归才有做技术的感觉? OK成全你!

var array = [    { number: 1 },    { number: 2 },    { number: 3 } ]; function copy (obj) {         var newobj = obj.constructor === Array ? [] : {};         ){             return;         }         for(var i in obj){            newobj[i] = ?            copy(obj[i]) : obj[i];         }         return newobj } var copyArray = copy(array) copyArray[0].number = 100; console.log(array); //  [{number: 1}, { number: 2 }, { number: 3 }] console.log(copyArray); // [{number: 100}, { number: 2 }, { number: 3 }]

【注意】:上文的所有的示例都忽略了一些特殊的情况: 对对象/数组中的Function,正则表达式等特殊类型的拷贝

存在大量深拷贝需求的代码——immutable提供的解决方案

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 一次浴火重生的MySQL优化(EXPLAIN命令详解) - 禁心尽力

    一次浴火重生的MySQL优化(EXPLAIN命令详解) - 禁心尽力

    2017-08-02 14:00

  • AngularJS“路由”的定义概念、使用详解——AngularJS学习资料教程 - 我叫小熊

    AngularJS“路由”的定义概念、使用详解——AngularJS学习资料教程 -

    2017-07-12 11:01

  • [javascript 实践篇]——那些你不知道的“奇淫巧技” - FannieGirl

    [javascript 实践篇]——那些你不知道的“奇淫巧技” - FannieGirl

    2017-07-11 09:02

  • Docker Machine 详解 - sparkdev

    Docker Machine 详解 - sparkdev

    2017-06-26 13:01

网友点评
=