Chinaunix首页 | 论坛 | 博客
  • 博客访问: 4393436
  • 博文数量: 1214
  • 博客积分: 13195
  • 博客等级: 上将
  • 技术积分: 9105
  • 用 户 组: 普通用户
  • 注册时间: 2007-01-19 14:41
个人简介

C++,python,热爱算法和机器学习

文章分类

全部博文(1214)

文章存档

2021年(13)

2020年(49)

2019年(14)

2018年(27)

2017年(69)

2016年(100)

2015年(106)

2014年(240)

2013年(5)

2012年(193)

2011年(155)

2010年(93)

2009年(62)

2008年(51)

2007年(37)

分类: JavaScript

2018-09-06 10:00:34

https://blog.csdn.net/waiterwaiter/article/details/50267787
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/waiterwaiter/article/details/50267787

最近也一直会用javascript,然后中间使用的一些组件,如Echarts 会有非常复杂的配置文件,而大部分配置可能都是一样的,所以想着写一份通用配置,然后,其他地方需要使用的时候,用这份配置深拷贝一份配置,然后在上面继续改。就如下:

const defaultOpt = {
    key1: xxx,
    key2: {
        dd: ee
    },
    .....
}; // deepCopy为某个实现深拷贝的方法 const opt1 = deepCopy(defaultOpt);
opt1..... const opt2 = deepCopy(defaultOpt);
opt2.....
			
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

深拷贝和浅拷贝

这里也涉及到一个深拷贝和浅拷贝的概念。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'}
			
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

可以明显看出,浅拷贝在改变其中一个值时,会导致其他也一起改变,而深拷贝不会。

Object.assign()

我需要的是深拷贝的方法,然后发现原来es6 中有Object.assign() 这个方法,感觉可以拿来用了。 
贴一下两个官方例子:

// Cloning an object var obj = { a: 1 }; var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }
			
  • 1
  • 2
  • 3
  • 4
// 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.
			
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

是不是很完美,又可以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' });
			
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

不过,很快,问题出现了,那就是

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.' }
}
			
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

原本想的是它只会覆盖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.' }
}
			
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

这样用虽然麻烦一点,但是也还好,可以用了。不过。。。很快,又出现问题了,如下:

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.' }
}
			
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

上面结果发现两个配置变得一模一样,而其实我们并没有去更改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;
    }
  });
}
			
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

上面的代码可以直接说明它只对顶层属性做了赋值,完全没有继续做递归之类的把所有下一层的属性做深拷贝。

总结

Object.assign() 只是一级属性复制,比浅拷贝多深拷贝了一层而已。用的时候,还是要注意这个问题的。

发现一个可以简单实现深拷贝的方法,当然,有一定限制,如下:

const obj1 = JSON.parse(JSON.stringify(obj));
			
  • 1

思路就是将一个对象转成json字符串,然后又将字符串转回对象。

阅读(876) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~