在面试中经常会问到js的深拷贝和浅拷贝,也常常让我们手写,下面我们彻底搞懂js的深拷贝与浅拷贝。

在js中 Array 和 Object  这种引用类型的值,当把一个变量赋值给另一个变量时,这个值得副本其实是一个指针,这是两个变量的指针指向的是同一片推内存,当我们改变其中一个值的时候,另一个值也会受到影响。

那么这就分为两种情况,浅拷贝和深拷贝

浅拷贝:拷贝对象的引用

// 对象
var obj1 = {
a: 1,
b: 2
};
var obj2 = obj1; obj2.a = 3; console.log(obj1); // {a: 3, b; 2}
console.log(obj2); // {a: 3, b: 2} // 数组
var arr1 = [1, 2, 3];
var arr2 = arr1; arr2.push(4); console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3 ,4]

可以看出,拷贝的是一个对象的引用,常用的方法有 jQuery 的extend({}, obj) 或者 Array.prototype.slice() 和 Array.prototype.concat() 都会返回一个数组或者对象的浅拷贝

var arr1 = ['a', {a: 1}];
var arr2 = arr1.slice(); console.log(arr1 === arr2); // false arr2[0] = 'b';
console.log(arr1); // ['a', {a: 1}] 基本类型的值不会相互影响 arr2[1].a = 2;
console.log(arr1); // ['a', {a: 2}] 引用类型的值还是无法拷贝

为了加深印象,我们可以手动实现一个slice 或者jq 的extend({}, obj)

function shallowClone(source) {
if (!source || typeof source !== 'object') {
throw new Error('error');
}
var resultObj = source.constructor === Array ? [] : {};
for (var keys in source) {
if (source.hasOwnProperty(keys)) {
resultObj[keys] = source[keys];
}
}
return resultObj;
} var obj1 = {a: 1, b: [1, 2]}
var obj2 = shallowClone(obj1); obj2.a = 2;
console.log(obj1); // {a: 1, b: [1, 2]} obj2.b.push(3)
console.log(obj1); // {a: 1, b: [1, 2, 3]}

深拷贝:拷贝对象的实例

深拷贝就是拷贝出一个新的实例,新的实例与原来的实例互不影响,实现深拷贝的方法有几种:

1、使用jq 的第三个参数来递归调用 $.extend(true, obj, ...),或者是lodash等第三方库函数实现

2、自己实现一个深拷贝,自己实现也有两种方法,一种是使用递归的方式拷贝,另一种是JSON.parse和JSON.stringfy

// 递归实现深拷贝
function deepClone(source) {
if (!source || typeof source !== 'object') {
throw new Error('error');
}
var resultObj = source.constructor === Array ? [] : {};
for (var keys in source) {
if (source.hasOwnProperty(keys)) {
if (source[keys] && typeof source[keys] === 'object') {
resultObj[keys] = source[keys].constructor === Array ? [] : {};
resultObj[keys] = deepClone(source[keys]);
}
else {
resultObj[keys] = source[keys];
}
}
}
return resultObj;
} var a1 = {
a: 1,
b: [1, 2],
c: {
a: 1,
b: 2
}
}; var a2 = deepClone(a1);
a2.b.push(3) console.log(a1); // {a: 1, b: [1, 2], c: {a: 1, b: 2}}
console.log(a2); // {a: 1, b: [1, 2, 3], c: {a: 1, b: 2}}

循环引用问题

上面的问题看似解决了所有的问题,但是有一种情况会有问题,就是循环引用。

1. 父级引用

父级引用是指,当某个属性的值正好是这个对象本身,如果我们用上面的方法进行深拷贝,就会在子元素 -> 父元素 -> 子元素 ...之间死循环,最后导致栈溢出。比如下面的代码:

var a1 = {
a: 1,
b: 2
};
a1.c = a1;
var result = deepClone(a1); // Uncaught RangeError: Maximum call stack size exceeded

解决办法:就是判断一个对象的字段是否引入了这个对象或者这个对象的任意父级,那么就需要修改上面的函数:

function deepClone2(source, parent = null) {
if (!source || typeof source !== 'object') {
throw new Error('error');
}
var resultObj = source.constructor === Array ? [] : {};
var _parent = parent;
while (_parent) {
if (_parent.originParent === source) {
return _parent.currentParent;
}
_parent = _parent.parent;
}
for (var keys in source) {
if (source.hasOwnProperty(keys)) {
if (source[keys] && typeof source[keys] === 'object') {
resultObj[keys] = source[keys].constructor === Array ? [] : {};
resultObj[keys] = deepClone2(source[keys], {
originParent: source,
currentParent: resultObj,
parent: parent
});
}
else {
resultObj[keys] = source[keys];
}
}
}
return resultObj;
} var a1 = {
a: 1,
b: 2
};
a1.c = a1;
var result = deepClone2(a1);
console.log(a1) // {a: 1, b: 2, c: {…}}

2. 同级引用

假设有如下代码

var obj = {
a: {
name: 'a'
},
b: {
name: 'b'
},
c: {}
}; obj.c.d = obj.a;
console.log(obj.c.d === obj.a); // true

如果我们调用上面的deepClone2函数

var copy = deepClone2(obj);
console.log(copy.a); // {name: "a"}
console.log(copy.c.d); // {name: "a"}
console.log(copy.a === copy.c.d); // false

从上面可以看出,虽然 copy.a 与 copy.c.d是的值是相等的,但二者引用的并不是同一个对象。

这种情况是因为 obj.a 并不在obj.c.d 的对象链上,所以 deepClone2 函数就无法检测到 obj.c.d 对 obj.a 也是一种引用关系,所以 deepClone2 函数就将 obj.a 深拷贝的结果赋值给了copy.c.d。

解决方案:父级的引用是一种引用,非父级的引用也是一种引用,那么只要记录下对象A中的所有对象,并与新创建的对象一一对应即可

function deepClone3(obj) {
// hash表,记录所有的对象的引用关系
let map = new WeakMap();
function dp(obj) {
let result = null;
let keys = Object.keys(obj);
let key = null,
temp = null,
existobj = null; existobj = map.get(obj);
//如果这个对象已经被记录则直接返回
if(existobj) {
return existobj;
} result = {}
map.set(obj, result); for(let i =0,len=keys.length;i<len;i++) {
key = keys[i];
temp = obj[key];
if(temp && typeof temp === 'object') {
result[key] = dp(temp);
}else {
result[key] = temp;
}
}
return result;
}
return dp(obj);
} var obj = {
a: {
name: 'a'
},
b: {
name: 'b'
},
c: {}
}; // 子级引用
var copy = deepClone3(obj);
console.log(copy.a); // {name: "a"}
console.log(copy.c.d); // {name: "a"}
console.log(copy.a === copy.c.d); // true // 父级引用
var a1 = {
a: 1,
b: 2
};
a1.c = a1;
var result = deepClone3(a1);
console.log(a1) // {a: 1, b: 2, c: {…}}

js 中的深拷贝与浅拷贝的更多相关文章

  1. js中的深拷贝与浅拷贝

    对象的深拷贝于浅拷贝 对于基本类型,浅拷贝过程就是对值的复制,这个过程会开辟出一个新的内存空间,将值复制到新的内存空间.而对于引用类型来书,浅拷贝过程就是对指针的复制,这个过程并没有开辟新的堆内存空间 ...

  2. js 中的 深拷贝与浅拷贝

    js在平时的项目中,赋值操作是最多的:比如说: var person1 = { name:"张三", age:18, sex:"male", height:18 ...

  3. js中的深拷贝和浅拷贝2

    所谓 深浅拷贝: 对于仅仅是复制了引用(地址),换句话说,复制了之后,原来的变量和新的变量指向同一个东西,彼此之间的操作会互相影响,为 浅拷贝. 而如果是在堆中重新分配内存,拥有不同的地址,但是值是一 ...

  4. JS中的深拷贝和浅拷贝

    浅拷贝 浅拷贝是拷贝第一层的拷贝 使用Object.assign解决这个问题. let a = { age: 1 } let b = Object.assign({}, a) a.age = 2 co ...

  5. JS对象复制(深拷贝、浅拷贝)

    如何在 JS 中复制对象 在本文中,我们将从浅拷贝(shallow copy)和深拷贝(deep copy)两个方面,介绍多种 JS 中复制对象的方法. 在开始之前,有一些基础知识值得一提:Javas ...

  6. javascript中的深拷贝与浅拷贝

    javascript中的深拷贝与浅拷贝 基础概念 在了解深拷贝与浅拷贝的时候需要先了解一些基础知识 核心知识点之 堆与栈 栈(stack)为自动分配的内存空间,它由系统自动释放: 堆(heap)则是动 ...

  7. 浅谈Java中的深拷贝和浅拷贝(转载)

    浅谈Java中的深拷贝和浅拷贝(转载) 原文链接: http://blog.csdn.net/tounaobun/article/details/8491392 假如说你想复制一个简单变量.很简单: ...

  8. C语言中的深拷贝和浅拷贝

    //C语言中的深拷贝和浅拷贝 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #inc ...

  9. 浅谈Java中的深拷贝和浅拷贝

    转载: 浅谈Java中的深拷贝和浅拷贝 假如说你想复制一个简单变量.很简单: int apples = 5; int pears = apples; 不仅仅是int类型,其它七种原始数据类型(bool ...

随机推荐

  1. 20191101php日期练习

    <?phpecho abs(-23);echo "<hr/>";echo date("t");echo "<hr/>&q ...

  2. swiper轮播图设置每组显示的个数及自定义slide宽度

    一.html演示代码: <div class="swiper-container"> <div class="swiper-wrapper"& ...

  3. Machine Learning:机器学习算法

    原文链接:https://riboseyim.github.io/2018/02/10/Machine-Learning-Algorithms/ 摘要 机器学习算法分类:监督学习.半监督学习.无监督学 ...

  4. CSS实现三级菜单[转]

    头部导航条布局 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  5. 【串线篇】Mybatis缓存之整合第三方缓存

    为什么要用第三方缓存?因为mybatis的缓存机制说白了就是一个map,不够强大.但幸好mybatis有自知之明将其Cache做成了一个接口开放出来,我们可以实现这个接口用第三方专业的缓存框架去自定义 ...

  6. HugeGraph图数据库--测试

    2018年百度的HugeGraph.实现了Apache TinkerPop3框架及完全兼容Gremlin查询语言.开源项目https://github.com/hugegraph HugeGraph典 ...

  7. 理解Java构造器中的"this"

    Calling Another Constructor if the first statement of a constructor has the form this(...), then the ...

  8. 英语单词forwarding

    forwarding 来源——xshell的远程连接 [c:\~]$ Connecting to ... Connection established. To escape to local shel ...

  9. Flink State 有可能代替数据库吗?

    有状态的计算作为容错以及数据一致性的保证,是当今实时计算必不可少的特性之一,流行的实时计算引擎包括 Google Dataflow.Flink.Spark (Structure) Streaming. ...

  10. linux 文件及目录结构体系

    linux 目录的特点: 1). /是所有目录的顶点 2).目录结构像一颗倒挂的树 3).目录和磁盘分区是没有关联的 4)./下不同的目录可能对应不同的分区或磁盘 5).所有的目录都是按照一定的类别有 ...