深拷贝方法
1. JSON.parse( JSON.stringify() ) 序列化和反序列
先将需要拷贝的对象进行JSON字符串化,然后再pase解析出来,赋给另一个变量,实现深拷贝。
这个方法有一些弊端,我开始用一些例子来展示出来。
// 测试数据
var test = { name: "test"};
var data = { a: "123",
b: 123,
c: true,
d: [43, 2],
e: undefined,
f: null,
g: function() { console.log("g"); },
h: new Set([3, 2, null]),
i: Symbol("fsd"),
j: test,
k: new Map([ ["name", "张三"], ["title", "Author"] ])
};
JSON.stringify(data)
执行结果
e,g,i缺失,k为{}
可以看到data这个对象的属性里基本上包含了所有的数据类型,但通过JSON字符串化后,返回的值却有缺失,原因是JSON在执行字符串化的这个过程时,会先进行一个JSON格式化,获得安全的JSON值,因此如果是非安全的JSON值,就会被丢弃掉。其中undefined、function、symbol这三种类型的值就是非安全的(包括该对象的属性循环赋值该对象),所以格式化后,就被过滤掉了,而set、map这种数据格式的对象,也并没有被正确处理,而是处理成了一个空对象。再看一个极端的例子
// 测试数据
var data = {
name: 'foo',
child: null,
}
data.child = data
将这种对象的属性进行循环引用,就形成了一个闭环,执行一下序列化,看看结果
可以看到,将含有闭环的对象进行JSON序列化,爆出了错误
出现闭环问题,可以定义一个函数来判断一下
var data = {
name: 'foo',
child: null,
}
data.child = data
function isUsed(data) {
for (const key in data) {
if (Object.hasOwnProperty.call(data, key)) {
if (data[key] == data) {
data[key] = null
}
}
}
}
isUsed(data)
console.log(JSON.parse(JSON.stringify(data)));
所以使用JSON序列化这种方式时,要注意避免包含上述那几种数据类型,不过这种方式也有几个好的地方,还是先看例子。
// 测试数据
var test = { name: "test"};
var data = { a: "123",
b: 123,
c: true,
d: [43, 2],
e: test,
f: {
name: '张三',
age: 18,
likes: {
ball: ['足球','篮球']
}
}
};
JSON.stringify(data)
它在处理这种嵌套的对象或者是属性值是对另一个对象的引用时,都能很好的进行字符串化,不会出现丢失数据,所以这是这种方式的一个优点。
浅拷贝
2. Object.assign(target, source1, source2)
es6新增的方法,可用于对象合并,将源对象的所有可枚举属性,复制到目标对象上。
var data = {
a: "123",
b: 123,
c: true,
d: [43, 2],
e: undefined,
f: null,
g: function() { console.log("g"); },
h: new Set([3, 2, null]),
i: Symbol("fsd"),
k: new Map([ ["name", "张三"], ["title", "Author"] ])
};
var newData = Object.assign({},data)
console.log(newData)
可以看到这个API可以将源对象上的全部数据类型属性值完全复制到一个新的对象上,这难道就是我们所寻找的最完美的深拷贝方式了吗?答案是否,只能说是部分深拷贝,或者说就是浅拷贝,为什么这么说呢,接着往下看。
var test = { name: '张三' }
var data = {
a: 123,
b: test
}
var newData = Object.assign({},data)
console.log(newData)
// { a: 123, b: { name: '张三' }}
test.age = 18
console.log(newData)
// { a: 123, b: { name: '张三', age: 18 }}
结果很明显,这种方式的拷贝,如果源目标对象中某个属性值是对另一个对象的引用,那么这个属性的拷贝仍然是对引用的拷贝。
Comments | NOTHING