详细解析赋值、浅拷贝和深拷贝

最新推荐文章于 2022-12-26 18:03:28 发布
最新推荐文章于 2022-12-26 18:03:28 发布
阅读量387 收藏 1
点赞数 1
分类专栏： 面试 # JS/TS 文章标签： js 面试
原文链接：https://muyiy.cn/blog/4/4.1.html
版权
面试 同时被 2 个专栏收录
20 篇文章 0 订阅
订阅专栏
JS/TS
11 篇文章 0 订阅
订阅专栏

详细解析赋值、浅拷贝和深拷贝

一、赋值（Copy）

赋值是将某一数值或对象赋给某个变量的过程，分为下面 2 部分

  • 基本数据类型：赋值，赋值之后两个变量互不影响
  • 引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有影响

对基本类型进行赋值操作，两个变量互不影响。

let a = "muyiy";
let b = a;
console.log(b);
// muyiy

a = "change";
console.log(a);
// change
console.log(b);
// muyiy

对引用类型进行赋址操作，两个变量指向同一个对象，改变变量 a 之后会影响变量 b，哪怕改变的只是对象 a 中的基本类型数据。

let a = {
    name: "muyiy",
    book: {
        title: "You Don't Know JS",
        price: "45"
    }
}
let b = a;
console.log(b);
// {
// 	name: "muyiy",
// 	book: {title: "You Don't Know JS", price: "45"}
// } 

a.name = "change";
a.book.price = "55";
console.log(a);
// {
// 	name: "change",
// 	book: {title: "You Don't Know JS", price: "55"}
// } 

console.log(b);
// {
// 	name: "change",
// 	book: {title: "You Don't Know JS", price: "55"}
// }

通常在开发中并不希望改变变量 a 之后会影响到变量 b，这时就需要用到浅拷贝和深拷贝。

二、浅拷贝（Shallow Copy）

1、什么是浅拷贝

创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。
在这里插入图片描述
上图中，SourceObject 是原对象，其中包含基本类型属性 field1 和引用类型属性 refObj。浅拷贝之后基本类型数据 field2和 filed1 是不同属性，互不影响。但引用类型 refObj仍然是同一个，改变之后会对另一个对象产生影响。

简单来说可以理解为浅拷贝只解决了第一层的问题，拷贝第一层的基本类型值，以及第一层的引用类型地址。

2、浅拷贝使用场景

Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

let a = {
    name: "muyiy",
    book: {
        title: "You Don't Know JS",
        price: "45"
    }
}
let b = Object.assign({}, a); // ep1
console.log(b);
// {
// 	name: "muyiy",
// 	book: {title: "You Don't Know JS", price: "45"}
// } 

a.name = "change";
a.book.price = "55";
console.log(a);
// {
// 	name: "change",
// 	book: {title: "You Don't Know JS", price: "55"}
// } 

console.log(b);
// {
// 	name: "muyiy",
// 	book: {title: "You Don't Know JS", price: "55"}
// }

上面代码改变对象 a 之后，对象 b 的基本属性保持不变。但是当改变对象 a 中的对象 book时，对象 b 相应的位置也发生了变化。

展开语法 Spread

// ep2 其余代码跟上面一样
let b = {...a};

通过代码可以看出实际效果和 Object.assign() 是一样的。

Array.prototype.slice()
slice()方法返回一个新的数组对象，这一对象是一个由 begin和 end（不包括end）决定的原数组的浅拷贝。原始数组不会被改变。

let a = [0, "1", [2, 3]];
let b = a.slice(1);
console.log(b);
// ["1", [2, 3]]

a[1] = "99";
a[2][0] = 4;
console.log(a);
// [0, "99", [4, 3]]

console.log(b);
//  ["1", [4, 3]]

可以看出，改变 a[1] 之后 b[0]的值并没有发生变化，但改变 a[2][0]之后，相应的 b[1][0]的值也发生变化。说明 slice()方法是浅拷贝，相应的还有concat等，在工作中面对复杂数组结构要额外注意

三、深拷贝（Deep Copy）

1、什么是深拷贝

深拷贝会拷贝所有的属性，并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不影响。
在这里插入图片描述

2、深拷贝使用场景

JSON.parse(JSON.stringify(object))

let a = {
    name: "muyiy",
    book: {
        title: "You Don't Know JS",
        price: "45"
    }
}
let b = JSON.parse(JSON.stringify(a));
console.log(b);
// {
// 	name: "muyiy",
// 	book: {title: "You Don't Know JS", price: "45"}
// } 

a.name = "change";
a.book.price = "55";
console.log(a);
// {
// 	name: "change",
// 	book: {title: "You Don't Know JS", price: "55"}
// } 

console.log(b);
// {
// 	name: "muyiy",
// 	book: {title: "You Don't Know JS", price: "45"}
// }

完全改变变量 a 之后对 b 没有任何影响，这就是深拷贝的魔力。

我们看下对数组深拷贝效果如何。

let a = [0, "1", [2, 3]];
let b = JSON.parse(JSON.stringify( a.slice(1) ));
console.log(b);
// ["1", [2, 3]]

a[1] = "99";
a[2][0] = 4;
console.log(a);
// [0, "99", [4, 3]]

console.log(b);
//  ["1", [2, 3]]

对数组深拷贝之后，改变原数组不会影响到拷贝之后的数组。

但是该方法有以下几个问题。

1、会忽略 undefined

2、会忽略 symbol

3、不能序列化函数

4、不能解决循环引用的对象

5、不能正确处理new Date()

6、不能处理正则

(1) undefined、symbol和函数这三种情况，会直接忽略。

let obj = {
    name: 'muyiy',
    a: undefined,
    b: Symbol('muyiy'),
    c: function() {}
}
console.log(obj);
// {
// 	name: "muyiy", 
// 	a: undefined, 
//  b: Symbol(muyiy), 
//  c: ƒ ()
// }

let b = JSON.parse(JSON.stringify(obj));
console.log(b);
// {name: "muyiy"}

(2) 循环引用情况下，会报错。

let obj = {
    a: 1,
    b: {
        c: 2,
   		d: 3
    }
}
obj.a = obj.b;
obj.b.c = obj.a;

let b = JSON.parse(JSON.stringify(obj));
// Uncaught TypeError: Converting circular structure to JSON

(3) new Date 情况下，转换结果不正确。

new Date();
// Mon Dec 24 2018 10:59:14 GMT+0800 (China Standard Time)

JSON.stringify(new Date());
// ""2018-12-24T02:59:25.776Z""

JSON.parse(JSON.stringify(new Date()));
// "2018-12-24T02:59:41.523Z"

解决方法转成字符串或者时间戳就好了

let date = (new Date()).valueOf();
// 1545620645915

JSON.stringify(date);
// "1545620673267"

JSON.parse(JSON.stringify(date));
// 1545620658688

(4) 正则情况下，

let obj = {
    name: "muyiy",
    a: /'123'/
}
console.log(obj);
// {name: "muyiy", a: /'123'/}

let b = JSON.parse(JSON.stringify(obj));
console.log(b);
// {name: "muyiy", a: {}}

PS：为什么会存在这些问题可以学习一下 JSON。

除了上面介绍的深拷贝方法，常用的还有jQuery.extend()和 lodash.cloneDeep()，后面文章会详细介绍源码实现，敬请期待！

四、总结

—和原数据是否指向同一对象第一层数据为基本数据类型原数据中包含子对象
赋值是改变会使原数据一同改变改变会使原数据一同改变
浅拷贝否改变不会使原数据一同改变改变会使原数据一同改变
深拷贝否改变不会使原数据一同改变改变不会使原数据一同改变

浅拷贝 Object.assign模拟实现

上篇文章介绍了其定义和使用，主要是将所有可枚举属性的值从一个或多个源对象复制到目标对象，同时返回目标对象。（来自 MDN）

Object.assign(target, …sources)

实现一个 Object.assign 大致思路如下：

  • 1、判断原生 Object是否支持该函数，如果不存在的话创建一个函数 assign，并使用 Object.defineProperty将该函数绑定到 Object上。

  • 2、判断参数是否正确（目标对象不能为空，我们可以直接设置{}传递进去,但必须设置值）。

  • 3、使用 Object()转成对象，并保存为 to，最后返回这个对象to。

  • 4、使用 for…in循环遍历出所有可枚举的自有属性。并复制给新的目标对象（使用hasOwnProperty` 获取自有属性，即非原型链上的属性）。

实现代码如下，

这里为了验证方便，使用assign2代替assign。注意此模拟实现不支持 symbol属性，因为ES5 中根本没有 symbol 。

if (typeof Object.assign2 != 'function') {
  // Attention 1
  Object.defineProperty(Object, "assign2", {
    value: function (target) {
      'use strict';
      if (target == null) { // Attention 2
        throw new TypeError('Cannot convert undefined or null to object');
      }

      // Attention 3
      var to = Object(target);
        
      for (var index = 1; index < arguments.length; index++) {
        var nextSource = arguments[index];

        if (nextSource != null) {  // Attention 2
          // Attention 4
          for (var nextKey in nextSource) {
            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
              to[nextKey] = nextSource[nextKey];
            }
          }
        }
      }
      return to;
    },
    writable: true,
    configurable: true
  });
}

测试一下

// 测试用例
let a = {
    name: "advanced",
    age: 18
}
let b = {
    name: "muyiy",
    book: {
        title: "You Don't Know JS",
        price: "45"
    }
}
let c = Object.assign2(a, b);
console.log(c);
// {
// 	name: "muyiy",
//  age: 18,
// 	book: {title: "You Don't Know JS", price: "45"}
// } 
console.log(a === c);
// true

针对上面的代码做如下扩展。

注意1：可枚举性

原生情况下挂载在 Object上的属性是不可枚举的，但是直接在Object上挂载属性a 之后是可枚举的，所以这里必须使用 Object.defineProperty，并设置enumerable: false 以及 writable: true, configurable: true。

for(var i in Object) {
    console.log(Object[i]);
}
// 无输出

Object.keys( Object );
// []

上面代码说明原生 Object上的属性不可枚举。

我们可以使用 2 种方法查看 Object.assign是否可枚举，使用 Object.getOwnPropertyDescriptor或者 Object.propertyIsEnumerable 都可以，其中propertyIsEnumerable(..)会检查给定的属性名是否直接存在于对象中（而不是在原型链上）并且满足 enumerable: true。具体用法如下：

// 方法1
Object.getOwnPropertyDescriptor(Object, "assign");
// {
// 	value: ƒ, 
//  writable: true, 	// 可写
//  enumerable: false,  // 不可枚举，注意这里是 false
//  configurable: true	// 可配置
// }

// 方法2
Object.propertyIsEnu

上面代码说明 Object.assign 是不可枚举的。
介绍这么多是因为直接在 Object 上挂载属性 a 之后是可枚举的，我们来看如下代码。

Object.a = function () {
    console.log("log a");
}

Object.getOwnPropertyDescriptor(Object, "a");
// {
// 	value: ƒ, 
//  writable: true, 
//  enumerable: true,  // 注意这里是 true
//  configurable: true
// }

Object.propertyIsEnumerable("a");
// true

所以要实现 Object.assign 必须使用Object.defineProperty，并设置 writable: true, enumerable: false, configurable: true，当然默认情况下不设置就是 false。

Object.defineProperty(Object, "b", {
    value: function() {
        console.log("log b");
    }
});

Object.getOwnPropertyDescriptor(Object, "b");
// {
// 	value: ƒ, 
//  writable: false, 	// 注意这里是 false
//  enumerable: false,  // 注意这里是 false
//  configurable: false	// 注意这里是 false
// }

所以具体到本次模拟实现中，相关代码如下。

// 判断原生 Object 中是否存在函数 assign2
if (typeof Object.assign2 != 'function') {
  // 使用属性描述符定义新属性 assign2
  Object.defineProperty(Object, "assign2", {
    value: function (target) { 
      ...
    },
    // 默认值是 false，即 enumerable: false
    writable: true,
    configurable: true
  });
}

注意2：判断参数是否正确

有些文章判断参数是否正确是这样的。

if (target === undefined || target === null) {
	throw new TypeError('Cannot convert undefined or null to object');
}

这样肯定没问题，但是这样写没有必要，因为undefined和 null 是相等的（高程 3 P52 ），即 undefined == null 返回 true，只需要按照如下方式判断就好了。

if (target == null) { // TypeError if undefined or null
	throw new TypeError('Cannot convert undefined or null to object');
}

注意3：原始类型被包装为对象

var v1 = "abc";
var v2 = true;
var v3 = 10;
var v4 = Symbol("foo");

var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
// 原始类型会被包装，null 和 undefined 会被忽略。
// 注意，只有字符串的包装对象才可能有自身可枚举属性。
console.log(obj); 
// { "0": "a", "1": "b", "2": "c" }

上面代码中的源对象 v2、v3、v4 实际上被忽略了，原因在于他们自身没有可枚举属性。

var v1 = "abc";
var v2 = true;
var v3 = 10;
var v4 = Symbol("foo");
var v5 = null;

// Object.keys(..) 返回一个数组，包含所有可枚举属性
// 只会查找对象直接包含的属性，不查找[[Prototype]]链
Object.keys( v1 ); // [ '0', '1', '2' ]
Object.keys( v2 ); // []
Object.keys( v3 ); // []
Object.keys( v4 ); // []
Object.keys( v5 ); 
// TypeError: Cannot convert undefined or null to object

// Object.getOwnPropertyNames(..) 返回一个数组，包含所有属性，无论它们是否可枚举
// 只会查找对象直接包含的属性，不查找[[Prototype]]链
Object.getOwnPropertyNames( v1 ); // [ '0', '1', '2', 'length' ]
Object.getOwnPropertyNames( v2 ); // []
Object.getOwnPropertyNames( v3 ); // []
Object.getOwnPropertyNames( v4 ); // []
Object.getOwnPropertyNames( v5 ); 
// TypeError: Cannot convert undefined or null to object

这里其实又可以看出一个问题来，那就是目标对象是原始类型，会包装成对象，对应上面的代码就是目标对象 a 会被包装成 [String: 'abc']，那模拟实现时应该如何处理呢？很简单，使用Object(..)就可以了。

var a = "abc";
console.log( Object(a) );
// [String: 'abc']

到这里已经介绍很多知识了，让我们再来延伸一下，看看下面的代码能不能执行

var a = "abc";
var b = "def";
Object.assign(a, b);

答案是否定的，会提示以下错误。

TypeError: Cannot assign to read only property '0' of object '[object String]'

原因在于 Object("abc") 时，其属性描述符为不可写，即writable: false。

var myObject = Object( "abc" );

Object.getOwnPropertyNames( myObject );
// [ '0', '1', '2', 'length' ]

Object.getOwnPropertyDescriptor(myObject, "0");
// { 
//   value: 'a',
//   writable: false, // 注意这里
//   enumerable: true,
//   configurable: false 
// }

同理，下面的代码也会报错。

var a = "abc";
var b = {
  0: "d"
};
Object.assign(a, b); 
// TypeError: Cannot assign to read only property '0' of object '[object String]'

但是并不是说只要 writable: false就会报错，看下面的代码。

var myObject = Object('abc'); 

Object.getOwnPropertyDescriptor(myObject, '0');
// { 
//   value: 'a',
//   writable: false, // 注意这里
//   enumerable: true,
//   configurable: false 
// }

myObject[0] = 'd';
// 'd'

myObject[0];
// 'a'

这里并没有报错，原因在于 JS 对于不可写的属性值的修改静默失败（silently failed）,在严格模式下才会提示错误。

'use strict'
var myObject = Object('abc'); 

myObject[0] = 'd';
// TypeError: Cannot assign to read only property '0' of object '[object String]'

所以我们在模拟实现 Object.assign 时需要使用严格模式。

注意4：存在性

var anotherObject = {
    a: 1
};

// 创建一个关联到 anotherObject 的对象
var myObject = Object.create( anotherObject );
myObject.b = 2;

("a" in myObject); // true
("b" in myObject); // true

myObject.hasOwnProperty( "a" ); // false
myObject.hasOwnProperty( "b" ); // true

这边使用了in 操作符和 hasOwnProperty方法，区别如下（你不知道的JS上卷 P119）：

1、in 操作符会检查属性是否在对象及其[[Prototype]] 原型链中。

2、hasOwnProperty(..)只会检查属性是否在 myObject 对象中，不会检查 [[Prototype]]原型链。

Object.assign方法肯定不会拷贝原型链上的属性，所以模拟实现时需要用 hasOwnProperty(..)判断处理下，但是直接使用 myObject.hasOwnProperty(..)是有问题的，因为有的对象可能没有连接到 Object.prototype上（比如通过 Object.create(null)来创建），这种情况下，使用 myObject.hasOwnProperty(..)就会失败。

var myObject = Object.create( null );
myObject.b = 2;

("b" in myObject); 
// true

myObject.hasOwnProperty( "b" );
// TypeError: myObject.hasOwnProperty is not a function

解决方法也很简单，使用我们在【进阶3-3期】中介绍的call就可以了，使用如下。

var myObject = Object.create( null );
myObject.b = 2;

Object.prototype.hasOwnProperty.call(myObject, "b");
// true

所以具体到本次模拟实现中，相关代码如下。

// 使用 for..in 遍历对象 nextSource 获取属性值
// 此处会同时检查其原型链上的属性
for (var nextKey in nextSource) {
    // 使用 hasOwnProperty 判断对象 nextSource 中是否存在属性 nextKey
    // 过滤其原型链上的属性
    if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
        // 赋值给对象 to,并在遍历结束后返回对象 to
        to[nextKey] = nextSource[nextKey];
    }
}

实现一个深拷贝

先贴最终实现代码

// 判断是否对象或数据
function isObject(obj) {
	return typeof obj === 'object' && obj != null;
}
// 完善版本 (会遍历Symbol)
function cloneDeep4(source, hash = new WeakMap()) {

    if (!isObject(source)) return source; 
    if (hash.has(source)) return hash.get(source); 
      
    let target = Array.isArray(source) ? [] : {};
    hash.set(source, target);
    
  	Reflect.ownKeys(source).forEach(key => { // 改动
        if (isObject(source[key])) {
            target[key] = cloneDeep4(source[key], hash); 
        } else {
            target[key] = source[key];
        }  
  	});
    return target;
}


// 不考虑Symbol, 
function cloneDeep3(source, hash = new WeakMap()) {

    if (!isObject(source)) return source; 
    if (hash.has(source)) return hash.get(source); // 新增代码，查哈希表
      
    var target = Array.isArray(source) ? [] : {};
    hash.set(source, target); // 新增代码，哈希表设值
    
    for(var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            if (isObject(source[key])) {
                target[key] = cloneDeep3(source[key], hash); // 新增代码，传入哈希表
            } else {
                target[key] = source[key];
            }
        }
    }
    return target;
}

测试案例

// 测试用例
var a = {
  name: 'muyiy',
  book: {
    title: "You Don't Know JS",
    price: '45'
  },
  a1: undefined,
  a2: null,
  a3: 123
}
a.circleRef = a

var b = cloneDeep(a)

a.name = '高级前端进阶'
a.book.price = '55'

console.log(a)
console.log(b)

引言

上篇文章详细介绍了浅拷贝 Object.assign，并对其进行了模拟实现，在实现的过程中，介绍了很多基础知识。今天这篇文章我们来看看一道必会面试题，即如何实现一个深拷贝。本文会详细介绍对象、数组、循环引用、引用丢失、Symbol 和递归爆栈等情况下的深拷贝实践，欢迎阅读。

第一步：简单实现

其实深拷贝可以拆分成 2 步，浅拷贝 + 递归，浅拷贝时判断属性值是否是对象，如果是对象就进行递归操作，两个一结合就实现了深拷贝。

根据上篇文章内容，我们可以写出简单浅拷贝代码如下。

function cloneShallow(source) {
    var target = {};
    for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
        }
    }
    return target;
}

// 测试用例
var a = {
    name: "muyiy",
    book: {
        title: "You Don't Know JS",
        price: "45"
    },
    a1: undefined,
    a2: null,
    a3: 123
}
var b = cloneShallow(a);

a.name = "高级前端进阶";
a.book.price = "55";

console.log(b);
// { 
//   name: 'muyiy', 
//   book: { title: 'You Don\'t Know JS', price: '55' },
//   a1: undefined,
//   a2: null,
//   a3: 123
// }

上面代码是浅拷贝实现，只要稍微改动下，加上是否是对象的判断并在相应的位置使用递归就可以实现简单深拷贝。

function cloneDeep1(source) {
    var target = {};
    for(var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            if (typeof source[key] === 'object') {
                target[key] = cloneDeep1(source[key]); // 注意这里
            } else {
                target[key] = source[key];
            }
        }
    }
    return target;
}

// 使用上面测试用例测试一下
var b = cloneDeep1(a);
console.log(b);
// { 
//   name: 'muyiy', 
//   book: { title: 'You Don\'t Know JS', price: '45' }, 
//   a1: undefined,
//   a2: {},
//   a3: 123
// }

一个简单的深拷贝就完成了，但是这个实现还存在很多问题。

  • 1、没有对传入参数进行校验，传入 null时应该返回 null而不是{}

  • 2、对于对象的判断逻辑不严谨，因为typeof null === 'object'

  • 3、没有考虑数组的兼容

第二步：拷贝数组

我们来看下对于对象的判断，之前在【进阶3-3期】有过介绍，判断方案如下。

function isObject(obj) {
    return Object.prototype.toString.call(obj) === '[object Object]';
}

但是用在这里并不合适，因为我们要保留数组这种情况，所以这里使用typeof来处理。

typeof null //"object"
typeof {} //"object"
typeof [] //"object"
typeof function foo(){} //"function" (特殊情况)

改动过后的 isObject 判断逻辑如下。

function isObject(obj) {
	return typeof obj === 'object' && obj != null;
}

所以兼容数组的写法如下。

function cloneDeep2(source) {

    if (!isObject(source)) return source; // 非对象返回自身
      
    var target = Array.isArray(source) ? [] : {};
    for(var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            if (isObject(source[key])) {
                target[key] = cloneDeep2(source[key]); // 注意这里
            } else {
                target[key] = source[key];
            }
        }
    }
    return target;
}

// 使用上面测试用例测试一下
var b = cloneDeep2(a);
console.log(b);
// { 
//   name: 'muyiy', 
//   book: { title: 'You Don\'t Know JS', price: '45' },
//   a1: undefined,
//   a2: null,
//   a3: 123
// }

第三步：循环引用

我们知道 JSON无法深拷贝循环引用，遇到这种情况会抛出异常。

// 此处 a 是文章开始的测试用例
a.circleRef = a;

JSON.parse(JSON.stringify(a));
// TypeError: Converting circular structure to JSON

1、使用哈希表

解决方案很简单，其实就是循环检测，我们设置一个数组或者哈希表存储已拷贝过的对象，当检测到当前对象已存在于哈希表中时，取出该值并返回即可。

function cloneDeep3(source, hash = new WeakMap()) {

    if (!isObject(source)) return source; 
    if (hash.has(source)) return hash.get(source); // 新增代码，查哈希表
      
    var target = Array.isArray(source) ? [] : {};
    hash.set(source, target); // 新增代码，哈希表设值
    
    for(var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            if (isObject(source[key])) {
                target[key] = cloneDeep3(source[key], hash); // 新增代码，传入哈希表
            } else {
                target[key] = source[key];
            }
        }
    }
    return target;
}

测试一下，看看效果如何。

// 此处 a 是文章开始的测试用例
a.circleRef = a;

var b = cloneDeep3(a);
console.log(b);
// {
// 	name: "muyiy",
// 	a1: undefined,
//	a2: null,
// 	a3: 123,
// 	book: {title: "You Don't Know JS", price: "45"},
// 	circleRef: {name: "muyiy", book: {…}, a1: undefined, a2: null, a3: 123, …}
// }

2、使用数组

这里使用了ES6 中的 WeakMap 来处理，那在 ES5 下应该如何处理呢？

也很简单，使用数组来处理就好啦，代码如下。

function cloneDeep3(source, uniqueList) {

    if (!isObject(source)) return source; 
    if (!uniqueList) uniqueList = []; // 新增代码，初始化数组
      
    var target = Array.isArray(source) ? [] : {};
    
    // ============= 新增代码
    // 数据已经存在，返回保存的数据
    var uniqueData = find(uniqueList, source);
    if (uniqueData) {
        return uniqueData.target;
    };
        
    // 数据不存在，保存源数据，以及对应的引用
    uniqueList.push({
        source: source,
        target: target
    });
    // =============

    for(var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            if (isObject(source[key])) {
                target[key] = cloneDeep3(source[key], uniqueList); // 新增代码，传入数组
            } else {
                target[key] = source[key];
            }
        }
    }
    return target;
}

// 新增方法，用于查找
function find(arr, item) {
    for(var i = 0; i < arr.length; i++) {
        if (arr[i].source === item) {
            return arr[i];
        }
    }
    return null;
}

// 用上面测试用例已测试通过

现在已经很完美的解决了循环引用这种情况，那其实还是一种情况是引用丢失，我们看下面的例子。

var obj1 = {};
var obj2 = {a: obj1, b: obj1};

obj2.a === obj2.b; 
// true

var obj3 = cloneDeep2(obj2);
obj3.a === obj3.b; 
// false

引用丢失在某些情况下是有问题的，比如上面的对象 obj2，obj2 的键值 a 和 b 同时引用了同一个对象 obj1，使用 cloneDeep2 进行深拷贝后就丢失了引用关系变成了两个不同的对象，那如何处理呢。

其实你有没有发现，我们的 cloneDeep3 已经解决了这个问题，因为只要存储已拷贝过的对象就可以了。

var obj3 = cloneDeep3(obj2);
obj3.a === obj3.b; 
// true

第四步：拷贝 Symbol

这个时候可能要搞事情了，那我们能不能拷贝 Symol 类型呢？

当然可以，不过 Symbol在ES6 下才有，我们需要一些方法来检测出Symble 类型。

方法一：Object.getOwnPropertySymbols(...)

方法二：Reflect.ownKeys(...)

对于方法一可以查找一个给定对象的符号属性时返回一个 ?symbol类型的数组。注意，每个初始化的对象都是没有自己的 symbol属性的，因此这个数组可能为空，除非你已经在对象上设置了 symbol 属性。（来自MDN）

var obj = {};
var a = Symbol("a"); // 创建新的symbol类型
var b = Symbol.for("b"); // 从全局的symbol注册?表设置和取得symbol

obj[a] = "localSymbol";
obj[b] = "globalSymbol";

var objectSymbols = Object.getOwnPropertySymbols(obj);

console.log(objectSymbols.length); // 2
console.log(objectSymbols)         // [Symbol(a), Symbol(b)]
console.log(objectSymbols[0])      // Symbol(a)

对于方法二返回一个由目标对象自身的属性键组成的数组。它的返回值等同于Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))。(来自MDN)

Reflect.ownKeys({z: 3, y: 2, x: 1}); // [ "z", "y", "x" ]
Reflect.ownKeys([]); // ["length"]

var sym = Symbol.for("comet");
var sym2 = Symbol.for("meteor");
var obj = {[sym]: 0, "str": 0, "773": 0, "0": 0,
           [sym2]: 0, "-1": 0, "8": 0, "second str": 0};
Reflect.ownKeys(obj);
// [ "0", "8", "773", "str", "-1", "second str", Symbol(comet), Symbol(meteor) ]
// 注意顺序
// Indexes in numeric order, 
// strings in insertion order, 
// symbols in insertion order

方法一
思路就是先查找有没有 Symbol属性，如果查找到则先遍历处理 Symbol 情况，然后再处理正常情况，多出来的逻辑就是下面的新增代码。

function cloneDeep4(source, hash = new WeakMap()) {

    if (!isObject(source)) return source; 
    if (hash.has(source)) return hash.get(source); 
      
    let target = Array.isArray(source) ? [] : {};
    hash.set(source, target);
    
    // ============= 新增代码
    let symKeys = Object.getOwnPropertySymbols(source); // 查找
    if (symKeys.length) { // 查找成功	
        symKeys.forEach(symKey => {
            if (isObject(source[symKey])) {
                target[symKey] = cloneDeep4(source[symKey], hash); 
            } else {
                target[symKey] = source[symKey];
            }    
        });
    }
    // =============
    
    for(let key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            if (isObject(source[key])) {
                target[key] = cloneDeep4(source[key], hash); 
            } else {
                target[key] = source[key];
            }
        }
    }
    return target;
}

测试下效果

// 此处 a 是文章开始的测试用例
var sym1 = Symbol("a"); // 创建新的symbol类型
var sym2 = Symbol.for("b"); // 从全局的symbol注册?表设置和取得symbol

a[sym1] = "localSymbol";
a[sym2] = "globalSymbol";

var b = cloneDeep4(a);
console.log(b);
// {
// 	name: "muyiy",
// 	a1: undefined,
//	a2: null,
// 	a3: 123,
// 	book: {title: "You Don't Know JS", price: "45"},
// 	circleRef: {name: "muyiy", book: {…}, a1: undefined, a2: null, a3: 123, …},
//  [Symbol(a)]: 'localSymbol',
//  [Symbol(b)]: 'globalSymbol'
// }

方法二

function cloneDeep4(source, hash = new WeakMap()) {

    if (!isObject(source)) return source; 
    if (hash.has(source)) return hash.get(source); 
      
    let target = Array.isArray(source) ? [] : {};
    hash.set(source, target);
    
  	Reflect.ownKeys(source).forEach(key => { // 改动
        if (isObject(source[key])) {
            target[key] = cloneDeep4(source[key], hash); 
        } else {
            target[key] = source[key];
        }  
  	});
    return target;
}

// 测试已通过function cloneDeep4(source, hash = new WeakMap()) {

    if (!isObject(source)) return source; 
    if (hash.has(source)) return hash.get(source); 
      
    let target = Array.isArray(source) ? [] : {};
    hash.set(source, target);
    
  	Reflect.ownKeys(source).forEach(key => { // 改动
        if (isObject(source[key])) {
            target[key] = cloneDeep4(source[key], hash); 
        } else {
            target[key] = source[key];
        }  
  	});
    return target;
}

// 测试已通过

这里使用了 Reflect.ownKeys()获取所有的键值，同时包括 Symbol，对 source遍历赋值即可。

写到这里已经差不多了，我们再延伸下，对于target换一种写法，改动如下。

function cloneDeep4(source, hash = new WeakMap()) {

    if (!isObject(source)) return source; 
    if (hash.has(source)) return hash.get(source); 
      
    let target = Array.isArray(source) ? [...source] : { ...source }; // 改动 1
    hash.set(source, target);
    
  	Reflect.ownKeys(target).forEach(key => { // 改动 2
        if (isObject(source[key])) {
            target[key] = cloneDeep4(source[key], hash); 
        } else {
            target[key] = source[key];
        }  
  	});
    return target;
}

// 测试已通过

在改动 1 中，返回一个新数组或者新对象，获取到源对象之后就可以如改动 2 所示传入 target 遍历赋值即可。

Reflect.ownKeys()这种方式的问题在于不能深拷贝原型链上的数据，因为返回的是目标对象自身的属性键组成的数组。如果想深拷贝原型链上的数据怎么办，那用for..in 就可以了。

拓展

我们再介绍下两个知识点，分别是构造字面量数组时使用展开语法和构造字面量对象时使用展开语法。（以下代码示例来源于 MDN）

1、展开语法之字面量数组

这是ES2015 （ES6） 才有的语法，可以通过字面量方式, 构造新数组，而不再需要组合使用push, splice, concat 等方法。`

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

这里的使用方法和参数列表的展开有点类似。

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

返回的是新数组，对新数组修改之后不会影响到旧数组，类似于 arr.slice()。

var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4); 

// arr2 此时变成 [1, 2, 3, 4]
// arr 不受影响

展开语法和Object.assign()行为一致, 执行的都是浅拷贝（即只遍历一层）。

var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift(); // 1
// [[], [2], [3]]

这里 a 是多层数组，b 只拷贝了第一层，对于第二层依旧和 a 持有同一个地址，所以对 b 的修改会影响到 a。

2、展开语法之字面量对象

这是 ES2018 才有的语法，将已有对象的所有可枚举属性拷贝到新构造的对象中，类似于Object.assign() 方法。

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// { foo: "baz", x: 42, y: 13 }

Object.assign() 函数会触发 setters，而展开语法不会。有时候不能替换或者模拟Object.assign()函数，因为会得到意想不到的结果，如下所示

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
const merge = ( ...objects ) => ( { ...objects } );

var mergedObj = merge ( obj1, obj2);
// { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } }

var mergedObj = merge ( {}, obj1, obj2);
// { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }

这里实际上是将多个解构变为剩余参数（ rest），然后再将剩余参数展开为字面量对象.

第五步：破解递归爆栈

上面四步使用的都是递归方法，但是有一个问题在于会爆栈，错误提示如下。

// RangeError: Maximum call stack size exceeded

那应该如何解决呢？其实我们使用循环就可以了，代码如下。

function cloneDeep5(x) {
    const root = {};

    // 栈
    const loopList = [
        {
            parent: root,
            key: undefined,
            data: x,
        }
    ];

    while(loopList.length) {
        // 广度优先
        const node = loopList.pop();
        const parent = node.parent;
        const key = node.key;
        const data = node.data;

        // 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素
        let res = parent;
        if (typeof key !== 'undefined') {
            res = parent[key] = {};
        }

        for(let k in data) {
            if (data.hasOwnProperty(k)) {
                if (typeof data[k] === 'object') {
                    // 下一次循环
                    loopList.push({
                        parent: res,
                        key: k,
                        data: data[k],
                    });
                } else {
                    res[k] = data[k];
                }
            }
        }
    }

    return root;
}

由于篇幅问题就不过多介绍了，详情请参考下面这篇文章。

深拷贝的终极探索（99%的人都不知道）

tinfengyee
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）实例详解
11-20
本文实例讲述了JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）。分享给大家供大家参考，具体如下： 深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。  浅拷贝 只是拷贝了基本类型的数据，而引用类型...
变量赋值的深拷贝与浅拷贝
limpid_changli的博客
07-08 655
基本数据类型：number,string,boolean,null,undefined 复杂数据类型：object,array,function 变量赋值 ：基本数据类型的赋值是深拷贝，即改变一个另一个不受影响；复杂数据类型的赋值是浅拷贝，只是拷贝了引用地址，改变一个另一个也会跟着变。 数字型： var a = 1 var b = a a = 2 console.log(a, b); 结果： 2 1 对象： var obj = { a: 1, b: 2 } var obj1 = obj
浅析赋值、浅拷贝、深拷贝的区别
VirgoYellow 的专栏
10-25 1966
1、原理 赋值：将某一对象赋给某个变量的过程，称为赋值。 浅拷贝：浅拷贝是创建一个对象，这个对象有着原始对象属性值的一份精准拷贝，如果属性是基本类型，拷贝的就是基本类型的值；如果属性是引用类型，拷贝的就是内存地址，如果其中一个对象改变了这个地址，就会影响到另一个对象。 深拷贝：深拷贝就是将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原有的对象。 2、区别 赋值：当我们将一个对象赋值给另外一个新的变量时，赋的其实是该对象在栈中的地址，而不是堆中的数据。也就是说
Python赋值、浅拷贝与深拷贝详解（详细分析）
weixin_47614014的博客
05-27 5243
简述 在使用Python语言，通常都会面临对象赋值、参数传递的使用，为了更深入理解它们的底层原理。Python也像其他语言如Java一样引入了浅考本和深拷贝的概念。 首先我们要明确一下：变量存储在栈内存，对象存储在堆内存。 Python数据类型分为可变数据类型和不可变数据类型。 可变数据类型包括：List（列表）、Dictionary（字典）、Set（集合） 不可变数据类型包括：String（字符串）、Number（数字）、Tuple（元组） 浅拷贝： （1）不拷贝子对象的内容，只拷贝子对
赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）
xiasohuai的博客
07-26 4643
深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。  浅拷贝 只是拷贝了基本类型的数据，而引用类型数据，复制后也是会发生引用，我们把这种拷贝叫做浅拷贝（浅复制） 浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。 赋值和浅拷贝的区别 当我们把一个对象赋值...
赋值、浅拷贝与深拷贝
Small_White_0的博客
08-25 1415
赋值、浅拷贝与深拷贝
Python 赋值，浅拷贝，深拷贝
12-21
浅拷贝(copy)：拷贝父对象，不会拷贝对象的内部的子对象。 深拷贝(deepcopy)： copy模块的deepcopy方法，完全拷贝了父对象及其子对象。 1 基础概念 在Python里，一切皆对象，完全的面向对象。 1、Python为动态解释性...
Python中赋值拷贝、浅拷贝与深拷贝的区别
12-22
在Python中赋值拷贝、浅拷贝与深拷贝的区别 在python中有的三种对于对象的赋值方式，赋值、深浅拷贝，那么他们有什么样的不同点。下面我们就来聊聊。—–仅属于个人观点 一、赋值 说实在的，在python中，对象的赋值...
java深入理解浅拷贝和深拷贝
12-21
本文将会深入的探讨一下在拷贝对象中会出现的浅拷贝和深拷贝的情况。 拷贝接口 java中所有的对象都是继承自java.lang.Object。Object对象中提供了一个clone方法，来供我们对java对象进行拷贝。 protected native ...
详解Python直接赋值,深拷贝和浅拷贝
01-19
浅拷贝: 拷贝父对象，但是不会拷贝对象的内部的子对象。 深拷贝: 拷贝父对象. 以及其内部的子对象 在之前的文章中,提到可变对象和不可变对象,接下来也是以这两者的区别进行展开 直接赋值 对于可变对象和不可变对象,...
深拷贝和浅拷贝、赋值的区别及其原理
weixin_53474595的博客
12-26 858
赋值：就是对原对象的栈内存地址进行复制，但是他们的堆内存数据还是共享的。浅拷贝：是对原对象的属性值进行精准复制，如果原对象的属性值是基本类型，那就是值的引用，所以浅拷贝后修改基本类型不会修改到原对象的，如果原对象属性值是引用类型，那么就是对引用类型属性值的栈内存的复制，所以修改引用类型属性值的时候会修改到原对象。因此一般对无引用类型的属性的兑现拷贝的时候使用浅拷贝就行，对复杂对象包含引用类型属性的时候使用深拷贝。
详细解析赋值、浅拷贝和深拷贝的区别
yao9788的博客
03-31 309
一、赋值（Copy） 赋值是将某一数值或对象赋给某个变量的过程，分为下面 2 部分 基本数据类型：赋值，赋值之后两个变量互不影响 引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有影响 对基本类型进行赋值操作，两个变量互不影响。 let a = "muyiy"; let b = a; console.log(b); // muyiy a = "change"; console...
一文教你区分赋值、浅拷贝和深拷贝，手撕浅拷贝与深拷贝函数
Concise200的博客
03-15 1538
通过这篇文章，你可以区分赋值，浅拷贝，深拷贝。除此之外，你还可以手写一个浅拷贝函数，了解多种方式实现深拷贝。在没认真了解之前，我一直以为赋值是浅拷贝的一种。但实际上，它们根本不是一个东西。
深拷贝、浅拷贝和深赋值、浅赋值
m0_47584501的博客
03-25 902
一、深拷贝与浅拷贝 由系统提供的默认拷贝构造函数的实现是浅拷贝，浅拷贝是简单地对成员变量逐个进行拷贝赋值，一般不需要用 户自定义浅拷贝构造函数，系统会提供默认的浅拷贝构造函数。但是有时系统提供的浅拷贝构造函数是无法满足实际 的编程需求的，因此可能需要用户自己定义拷贝构造函数。 1、浅拷贝存在的问题 当类中包含指针型成员变量，并且在构造函数中为该指针型成员变量通过malloc函数或new运算符在内存中开辟 空间时，会出现double free的现象。 分析： 1、浅拷贝把指针型成员变量的值拷贝赋值给同
赋值、浅拷贝和深拷贝
yunyuzhu的博客
09-12 260
Table of Contents 一、赋值 二、浅拷贝 浅拷贝，只拷贝父对象，不会拷贝父对象中的子对象。如果该对象没有子对象，那浅拷贝和赋值的结果是一样的。 三、深拷贝 深拷贝，也就是完全拷贝，包括拷贝对象的父对象及其子对象。拷贝后是两个完全独立的对象，互不影响。我们可以通过copy模块中的deepcopy()方法来完成。 四、总结 一、赋值 在Python中，赋值很简单，...
Python 五种数据类型精讲（is 与 == 的区别，赋值、浅拷贝、深拷贝 的区别，值传递 与 引用传递）
qq_29611345的博客
09-11 380
一、首先简单介绍 Python 中 is 和 == 的判定要求 二、再简单介绍 赋值、浅拷贝、深拷贝 三、再通过 五种数据类型 分别对上述两种情形进行讨论 四、值传递 与 引用传递 一、is 和 == 的判定要求 首先要知道 Python 中对象包含的三个基本要素，分别是：id(内存中地址，会以十进制显示)、type(数据类型) 和 value(值)。 is 判断两个对象 id 是否相同，x...
赋值、浅拷贝、深拷贝
qq_37437449的博客
08-07 403
python 中可变对象： 列表、字典、集合 不可变对象：数字、字符串、元组 Python 中引用的概念： 在 Python 程序中，每个对象都会在内存中申请开辟一块空间来保存该对象，该对象在内存中所在位置的地址被称为引用。在开发程序时，所定义的变量名实际就对象的地址引用。 引用实际就是内存中的一个数字地址编号，在使用对象时，只要知道这个对象的地址，就可以操作这个对象，但是因为这个数字地址不方便在开发时使用和记忆，所以使用变量名的形式来代替对象的数字地址。 在 Python 中，变量就是地址的一种表示形式
python赋值、深拷贝和浅拷贝的区别详解
没有一劳永逸，永远要重新开始，重新进入动荡，重新寻找，重新赢得欢喜。
04-02 3700
一、前言 在python中，对象赋值实际上是对象的引用。当创建一个对象，然后把它赋值给另一个变量的时候，python并没有拷贝这个对象，而只是拷贝了这个对象的引用。 二、区别 1、直接赋值，默认浅拷贝传递对象的引用而已，原始列表改变，被赋值的变量也会做相同的改变 # 直接赋值 dict_1 = {"key1":[1,2,3,4],"key2":"val2"} dict_2 = dict_1 dict_1["key1"].append(5) print("dict_1内存地址：",id(dict_1
浅拷贝、深拷贝
热门推荐
Addisoni
10-31 4万+
深拷贝和浅拷贝 　　这两个概念是在项目中比较常见的，在很多时候，都会遇到拷贝的问题，我们总是需要将一个对象赋值到另一个对象上，但可能会在改变新赋值对象的时候，忽略掉我是否之后还需要用到原来的对象，那么就会出现当改变新赋值对象的某一个属性时，也同时改变了原对象，此时我们就需要用到拷贝这个概念了。 深拷贝和浅拷贝的区别 1.浅拷贝： 将原对象或原数组的引用直接赋...
JS赋值、浅拷贝和深拷贝的区别
最新发布
05-18
JS赋值是将一个变量的值赋给另一个变量，两个变量最终指向同一个内存地址，修改其中一个变量的值会影响到另一个变量。 浅拷贝则是创建一个新的对象，新对象与原始对象的基本类型数据相同，但引用类型数据仍然共享同一个内存地址。当修改新对象的引用类型数据时，会影响到原始对象的引用类型数据。 深拷贝是创建一个全新的对象，与原始对象完全独立，不共享任何内存地址。无论是基本类型还是引用类型数据，都是全新的，修改新对象的任何属性都不会影响到原始对象。 需要注意的是，在深拷贝对象中，如果对象中有函数、正则表达式等特殊类型数据，需要特殊处理才能保证深拷贝的完整性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值