深拷贝与浅拷贝

概念

javascript中一般有按值传递和按引用传递两种复制方式:

按值传递的是基本数据类型(Number,String,Boolean,Null,Undefined,Symbol),一般存放于内存中的栈区,存取速度快,存放量小;

按引用传递的是引用类型(Object,Array,Function),一般存放与内存中的堆区,存取速度慢,存放量大,其引用指针存于栈区,并指向引用本身。

深拷贝和浅拷贝是相对于引用类型而言的:

  • 浅拷贝: 指两个js 对象指向同一个内存地址,其中一个改变会影响另一个;
  • 深拷贝: 指复制后的新对象重新指向一个新的内存地址,两个对象改变互不影响。

浅拷贝

常见方法

1. 赋值

var arr = [1,2,3];
var newarr = arr;
newarr[0] = "one";
console.log(arr);    //  ["one", 2, 3]
console.log(newarr);    //  ["one", 2, 3]
console.log(arr==newarr);   //  true
console.log(arr===newarr);  //  true

2. Object.assign()

var obj = { a: {a: "hello"}, b: 33 };
var newObj = Object.assign({}, obj);
newObj.a.a = "hello world";
console.log(obj);    //  { a: {a: "hello world"}, b: 33 };
console.log(newObj);    //  { a: {a: "hello world"}, b: 33 };
console.log(obj.a.a==newObj.a.a);   //  true
console.log(obj.a.a===newObj.a.a);  //  true

关于Object.assign()的一个问题
image

为什么改变属性a不是指向同一个引用,而b.c指向了同一个引用?

因为如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。

3. $.extend({},obj)

使用递归思路实现了浅拷贝和深拷贝,第一个参数类型为Boolean,当为false的时候必须省略不写则是浅拷贝,当为true的时候为深拷贝

深拷贝

  1. 手动的赋值

能够处理JSON格式的所有数据类型,但是对于正则表达式类型、函数类型等无法进行深拷贝,而且会直接丢失相应的值,还有就是它会抛弃对象的constructor。也就是深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成Object。同时如果对象中存在循环引用的情况也无法正确处理。

var obj = { a: 10, b: 20};
var newObj = { a: obj.a, b: obj.b};
newObj.b = 100;
console.log(obj);    // { a: 10, b: 20}
console.log(newObj);    //  { a: 10, b: 100};
console.log(obj == newObj);    //  false
console.log(obj === newObj);    //  false

  1. Object.assign()只复制一层属性的时候

  2. $.extend(true,{},obj)使用递归思路可以实现深拷贝,要求第一个参数必须为true

  3. lodash中的_.cloneDeep(obj)

学习原文地址

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

推荐阅读更多精彩内容