使用JSON.parse(JSON.stringify(object))实现深拷贝的局限及扩展

更新日期: 2020-10-26阅读: 1.4k标签: 拷贝分享

复制链接

新浪微博

QQ 好友

扫一扫分享

大部分情况我们都可以使用JSON.parse(JSON.stringify(object))来实现深拷贝，但该方法也有局限性，如下：

会忽略 undefined
会忽略 symbol
不能序列化函数
不能解决循环引用的对象

例如：

let a = {
  age: undefined,
  sex: Symbol('male'),
  jobs: function() {},
  name: 'yck'
}
let b = JSON.parse(JSON.stringify(a))
console.log(b) // {name: "yck"}

借用 MessageChannel 实现深拷贝

MessageChannel api允许我们创建一个新的消息通道，并通过它的两个MessagePort属性发送数据。

var channel = new MessageChannel();

这样就创建了一个管道。

实例属性：

channel.port1
channel.port2

获取实例的两个端口，注意的是，两个端口都是只读的。

简单来说，MessageChannel创建了一个通信的管道，这个管道有两个端口，每个端口都可以通过postMessage发送数据，而一个端口只要绑定了onmessage回调方法，就可以接收从另一个端口传过来的数据。

一个简单的例子：

var channel = new MessageChannel();
var port1 = channel.port1;
var port2 = channel.port2;
port1.onmessage = function(event) {
    console.log("port1收到来自port2的数据：" + event.data);
}
port2.onmessage = function(event) {
    console.log("port2收到来自port1的数据：" + event.data);
}

port1.postMessage("发送给port2");
port2.postMessage("发送给port1");

而通过 postMessage() 方法传输的 message 参数是深拷贝的。

function deepClone(val) {
    return new Promise((resolve,reject) => {
        const {port1,port2} = new MessageChannel();
        port2.onmessage = e => resolve(e.data);
        port1.postMessage(val);
    })
}

let obj = {
  age: undefined,
  name: 'yck',
  c: {
      d: true
  }
}
obj.c.e = obj.c; // 循环引用

// 注意该方法是异步
async function test() {
    const clone = await deepClone(obj);
    console.log(clone) // {age: undefined, name: "yck", c: {…}}
}
test()

但这个深拷贝只能解决 undefined 和循环引用对象的问题，对于 Symbol 和 function 依然束手无策。

详细可参考：《MessageChannel 消息通道》

简易版的深拷贝

var extendCopy = (function f(p,c){
    var c = c || {};
    for (var i in p) {
        if(typeof p[i] === 'object'){
            c[i] = (p[i] instanceof Array) ? [] : {};
            f(p[i],c[i]);
        }else{
            　c[i] = p[i];
        }　
    }
    return c;
});

详细可参考：《小tips：JS之浅拷贝与深拷贝》

lodash 的深拷贝函数

语法：

_.cloneDeep(value)

示例：

var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

地址：https://lodash.com/docs/4.17.15#cloneDeep

链接: https://www.fly63.com/article/detial/9981

使用JSON.parse(JSON.stringify(object))实现深拷贝的局限及扩展

借用 MessageChannel 实现深拷贝

简易版的深拷贝

lodash 的深拷贝函数

js中深拷贝和浅拷贝的区别及原理

使用JSON.parse(),JSON.stringify()实现对对象的深拷贝

使用jquery克隆对象_实现深、浅拷贝的简单实例

JS中如何进行对象的深拷贝

javascript实现数组或对象的深拷贝

关于内存拷贝（浅拷贝）和js链表的小知识点

js的浅拷贝 VS 深拷贝

理解JS中的深拷贝与浅拷贝

Js实现深浅复制

14个JS数组拷贝技巧