JOSN.parse(JSON.stringify())实现深拷

首先推荐在项目中引用lodash三方工具库cloneDeep方法用来做数据深拷贝。

// import { cloneDeep } from 'lodash';
import cloneDeep from 'lodash/cloneDeep';// 只引用一个 推荐这样写

let a = cloneDeep({});

案例数据

var obj = {
        name: 'zhangsan',
        date: new Date(),
        regExp: new RegExp("\w+"),
        fun: function () { return true;},
        err: new Error('error'),
        symbol: Symbol(233),
        undefined: undefined,
        null: null,
        nan: NaN,
        infinity: Infinity // 无穷大
};

1. 两种打印结果

console.log(obj); // 正常
console.log(JOSN.parse(JSON.stringify(obj))); // 部分数据丢失或转义

[图片上传失败...(image-b2340e-1642951617361)]

3. 深拷贝循环引用对象 会引起报错(lodash可以深拷贝)

 var a = {};
 a.b = a;
 console.log(a); // 内存指向相互引用 无尽头 但不会内存溢出
 console.log(JOSN.parse(JSON.stringify(a))); // 直接报错 

[图片上传失败...(image-5a2d78-1642951617361)]

4. 如果声明的obj中有属性是由new 出来的构造函数生成的，则使用JSON.parse(JSON.stringify(xxx))深拷贝之后，会丢弃对应的constructor初始化构造器;

    function newFun(name) {
        this.name = name;
    }
    let zhangsan = new newFun('张三');
    let newObj = {
        date:zhangsan
    }
    let lisi = JSON.parse(JSON.stringify(newObj));
    console.log('__',newObj, lisi);

[图片上传失败...(image-3aeac3-1642951617361)]

5. 总结

JOSN.parse(JSON.stringify()) 的深拷贝模式中

1.时间new Date()

2.正则new RegExp()

3.函数function

4.new Error对象

5.Symbol()

6.undefined

7.NaN

8.Infinity 无穷大
都会出现不同程度的丢失和变化

var obj = {
        name: 'zhangsan',
        date: new Date(), // 被转义为字符
        regExp: new RegExp("\w+"), // 丢失
        fun: function () { return true;}, // 丢失
        err: new Error('error'), // 丢失
        symbol: Symbol(233), // 丢失
        undefined: undefined, // 丢失
        null: null,
        nan: NaN, // 被转义null
        infinity: Infinity // 无穷大被转义null
    };

PS: 只是用来深拷贝 纯数据当然可以用JOSN.parse(JSON.stringify(xxx))。

但是 为了提高自身的代码质量,还是请严格一点。