美文网首页
js的浅拷贝与深拷贝

js的浅拷贝与深拷贝

作者: 楼下的黑猫不太冷 | 来源:发表于2018-03-02 11:37 被阅读0次

在复杂数据类型(objectArray)中,数据存储在堆内存中,那么对于数据的拷贝就出现了两种情况:拷贝引用和拷贝实例
浅拷贝:拷贝引用,数据存储在同一内存中,进行修改操作会互相影响
深拷贝:重新分配内存,并把源对象的所有属性都进行拷贝,保证拷贝后的对象与源对象是不相干的,操作不会互相影响。

浅拷贝

  1. 最简单的浅拷贝
var a = {a: 1};
var b = a;
console.log(a === b);  // true
b.a = 10;
console.log(a, b);  // { a: 10 } { a: 10 }
  1. 源对象拷贝实例,属性对象拷贝引用
    外层对象是拷贝实例,如果属性对象时复杂数据类型时,内层元素拷贝引用。
    对源对象直接操作,不会影响另一个对象,但对属性操作时,会影响属性值
    常用方法:Array.prototype.slice()Array.prototype.concat()jQuery$.extend({}, obj)Object.assign()
var arr1 = [1, 2, 3];
var arr2 = arr1.slice();
console.log(arr1 === arr2);  // false slice返回新的数组,所以两个不等
arr1[1] = 10;
console.log(arr1, arr2);    // [ 1, 10, 3 ] [ 1, 2, 3 ]

var arr3 = [{a: 1}, {b: 2}];
var arr4 = arr3.slice();
console.log(arr3 === arr4);  // false
arr4[0].a = 10;
console.log(arr3, arr4); // [ { a: 10 }, { b: 2 } ] [ { a: 10 }, { b: 2 } ]

深拷贝
常见方法:JSON.parse()JSON.stringify()jQuery$.extend(true, {}, obj), lodash_.cloneDeep_.clone(value, true)

var arr1 = [1, 2, 3];
var arr2 = JSON.parse(JSON.stringify(arr1));
console.log(arr1 === arr2, arr2);  // false [ 1, 2, 3 ]
arr1[1] = 10;
console.log(arr1, arr2); // [ 1, 10, 3 ] [ 1, 2, 3 ]

相关文章

  • JS中的深拷贝与浅拷贝

    知乎:js中的深拷贝和浅拷贝? 掘金: js 深拷贝 vs 浅拷贝 前言 首先深拷贝与浅拷贝只针对 Object,...

  • js浅拷贝深拷贝

    js浅拷贝,深拷贝的简单实现 基础数据 浅拷贝 深拷贝

  • 浅拷贝和深拷贝

    本文参考:JavaScript中的浅拷贝和深拷贝js 深拷贝 vs 浅拷贝深入剖析 JavaScript 的深复制...

  • js面试题

    1,js的深拷贝与浅拷贝 如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,...

  • JS实现深拷贝、instanceof、判断是否为数组

    JS深拷贝 JS中拷贝对象可以按照拷贝的程度可以分为浅拷贝和深拷贝,有些时候我们需要拷贝之后的对象和拷贝之前的对象...

  • JS中对象的复制

    JS中的对象复制分为两种情况:深拷贝和浅拷贝。深拷贝和浅拷贝的区别在于对数组和对象的拷贝,对它们拷贝时浅拷贝只是拷...

  • 认识js下的浅拷贝与深拷贝

    浅拷贝与深拷贝 首先深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象的。简单来说,浅拷贝只拷贝一...

  • 深拷贝和浅拷贝

    干货!深拷贝和浅拷贝的区别 深拷贝才是拷贝,浅拷贝就是Retain Copy与Retain的区别 Copy: 根据...

  • iOS深拷贝(MutableCopy)与浅拷贝(Copy)的区别

    深拷贝和浅拷贝的概念 iOS中有深拷贝和浅拷贝的概念,那么何为深拷贝何为浅拷贝呢?浅拷贝:浅拷贝并不拷贝对象本身,...

  • Objective-C中的浅拷贝和深拷贝

    Objective-C中的浅拷贝和深拷贝IOS开发之深拷贝与浅拷贝(mutableCopy与Copy)详解iOS ...

网友评论

      本文标题:js的浅拷贝与深拷贝

      本文链接:https://www.haomeiwen.com/subject/dfwoxftx.html