?
首先推荐在项目中引用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
};
1. 两种打印结果
console.log(obj);
// 正常
console.log(JOSN.parse(JSON.stringify(obj)));
// 部分数据丢失或转义
文章图片
3. 深拷贝循环引用对象 会引起报错(lodash可以深拷贝)
var a = {};
a.b = a;
console.log(a);
// 内存指向相互引用 无尽头 但不会内存溢出
console.log(JOSN.parse(JSON.stringify(a)));
// 直接报错
文章图片
4. 如果声明的obj中有属性是由new 出来的构造函数生成的,则使用
JSON.parse(JSON.stringify(xxx))
深拷贝之后,会丢弃对应的constructor
初始化构造器;
function newFun(name) {
this.name = name;
}
let zhangsan = new newFun('张三');
let newObj = {
name:'刘十三000',
date:zhangsan
}
let lisi = JSON.parse(JSON.stringify(newObj));
console.log('__',newObj, lisi);
文章图片
5. 总结
JOSN.parse(JSON.stringify()) 的深拷贝模式中
1.时间new Date()
2.正则new RegExp()
3.函数function
4.new Error对象
5.Symbol()
6.undefined
7.NaN
都会出现不同程度的丢失和变化
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
};
PS: 只是用来深拷贝 纯数据当然可以用JOSN.parse(JSON.stringify(xxx))。
但是 为了提高自身的代码质量,还是请严格一点。
【JOSN.parse(JSON.stringify())实现深拷贝的缺点】?