最近也一直会用JavaScript,然后中间使用的一些组件,如Echarts
会有非常复杂的配置文件,而大部分配置可能都是一样的,所以想着写一份通用配置,然后,其他地方需要使用的时候,用这份配置深拷贝一份配置,然后在上面继续改。就如下:
-
const defaultOpt = {
-
key1: xxx,
-
key2: {
-
dd: ee
-
},
-
.....
-
};
-
// deepCopy为某个实现深拷贝的方法
-
const opt1 = deepCopy(defaultOpt);
-
opt1.....
-
const opt2 = deepCopy(defaultOpt);
-
opt2.....
深拷贝和浅拷贝
这里也涉及到一个深拷贝和浅拷贝的概念。javascript中存储对象都是存地址的,所以浅拷贝是都指向同一块内存区块,而深拷贝则是另外开辟了一块区域。下面实例也可以看出这一点:
-
// 浅拷贝
-
const a = {t: 1, p: 'gg'};
-
const b = a;
-
b.t = 3;
-
console.log(a); // {t: 3, p: 'gg'}
-
console.log(b); // {t: 3, p: 'gg'}
-
//深拷贝
-
const c = {t: 1, p: 'gg'};
-
const d = deepCopy(c);
-
d.t = 3;
-
console.log(c); // {t: 1, p: 'gg'}
-
console.log(d); // {t: 3, p: 'gg'}
可以明显看出,浅拷贝在改变其中一个值时,会导致其他也一起改变,而深拷贝不会。
Object.assign()
我需要的是深拷贝的方法,然后发现原来es6
中有Object.assign()
这个方法,感觉可以拿来用了。
贴一下两个官方例子:
-
// Cloning an object
-
var obj = { a: 1 };
-
var copy = Object.assign({}, obj);
-
console.log(copy); // { a: 1 }
-
// Merging objects
-
var o1 = { a: 1 };
-
var o2 = { b: 2 };
-
var o3 = { c: 3 };
-
var obj = Object.assign(o1, o2, o3);
-
console.log(obj); // { a: 1, b: 2, c: 3 }
-
console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself is changed.
是不是很完美,又可以clone又可以merge。在我这种情况下,我觉得我的代码量又可以减少了,比如:
-
const defaultOpt = {
-
title: 'hello',
-
name: 'oo',
-
type: 'line'
-
};
-
// 原来可能需要这样
-
const opt1 = deepCopy(a);
-
opt1.title = 'opt1';
-
opt1.type = 'bar';
-
opt1.extra = 'extra'; // 额外增加配置
-
// 现在只要这样
-
const opt2 = Object.assign({}, a, {
-
title: 'opt2',
-
type: 'bar',
-
extra: 'extra'
-
});
不过,很快,问题出现了,那就是
merge和我想象的不一样
且看例子:
-
const defaultOpt = {
-
title: {
-
text: 'hello world',
-
subtext: 'It\'s my world.'
-
}
-
};
-
const opt = Object.assign({}, defaultOpt, {
-
title: {
-
subtext: 'Yes, your world.'
-
}
-
});
-
console.log(opt);
-
// 预期结果
-
{
-
title: {
-
text: 'hello world',
-
subtext: 'Yes, your world.'
-
}
-
}
-
// 实际结果
-
{
-
title: {
-
subtext: 'Yes, your world.'
-
}
-
}
原本想的是它只会覆盖subtext
,然而其实它直接覆盖了整个title
,这个让我比较郁闷,相当于它只merge根属性,下面的就不做处理了。
代码只能重构成相对麻烦一点的:
-
const defaultOpt = {
-
title: {
-
text: 'hello world',
-
subtext: 'It\'s my world.'
-
}
-
};
-
const opt = Object.assign({}, defaultOpt);
-
opt.title.subtext = 'Yes, your world.';
-
console.log(opt);
-
// 结果正常
-
{
-
title: {
-
text: 'hello world',
-
subtext: 'Yes, your world.'
-
}
-
}
这样用虽然麻烦一点,但是也还好,可以用了。不过。。。很快,又出现问题了,如下:
-
const defaultOpt = {
-
title: {
-
text: 'hello world',
-
subtext: 'It\'s my world.'
-
}
-
};
-
const opt1 = Object.assign({}, defaultOpt);
-
const opt2 = Object.assign({}, defaultOpt);
-
opt2.title.subtext = 'Yes, your world.';
-
console.log('opt1:');
-
console.log(opt1);
-
console.log('opt2:');
-
console.log(opt2);
-
// 结果
-
opt1:
-
{
-
title: {
-
text: 'hello world',
-
subtext: 'Yes, your world.'
-
}
-
}
-
opt2:
-
{
-
title: {
-
text: 'hello world',
-
subtext: 'Yes, your world.'
-
}
-
}
上面结果发现两个配置变得一模一样,而其实我们并没有去更改opt1
的subtext
,只是改了opt2
的。
这说明一点:在title
这一层只是简单的浅拷贝 ,而没有继续深入的深拷贝。
这里不经让我怀疑这个接口到底是怎么实现的,它到底是不是和我所想的一样。
翻了一下官方文档,发现它写得一个Polyfill
,代码我加了点注释如下:
-
if (!Object.assign) {
-
// 定义assign方法
-
Object.defineProperty(Object, 'assign', {
-
enumerable: false,
-
configurable: true,
-
writable: true,
-
value: function(target) { // assign方法的第一个参数
-
'use strict';
-
// 第一个参数为空,则抛错
-
if (target === undefined || target === null) {
-
throw new TypeError('Cannot convert first argument to object');
-
}
-
var to = Object(target);
-
// 遍历剩余所有参数
-
for (var i = 1; i < arguments.length; i++) {
-
var nextSource = arguments[i];
-
// 参数为空,则跳过,继续下一个
-
if (nextSource === undefined || nextSource === null) {
-
continue;
-
}
-
nextSource = Object(nextSource);
-
// 获取改参数的所有key值,并遍历
-
var keysArray = Object.keys(nextSource);
-
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
-
var nextKey = keysArray[nextIndex];
-
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
-
// 如果不为空且可枚举,则直接浅拷贝赋值
-
if (desc !== undefined && desc.enumerable) {
-
to[nextKey] = nextSource[nextKey];
-
}
-
}
-
}
-
return to;
-
}
-
});
-
}
上面的代码可以直接说明它只对顶层属性做了赋值,完全没有继续做递归之类的把所有下一层的属性做深拷贝。
总结
Object.assign()
只是一级属性复制,比浅拷贝多深拷贝了一层而已。用的时候,还是要注意这个问题的。
附
发现一个可以简单实现深拷贝的方法,当然,有一定限制,如下:
const obj1 = JSON.parse(JSON.stringify(obj));
- 是将一个对象转成json字符串,然后又将字符串转回对象。