javascript之Object.assign()的痛点分析


Posted in Javascript onMarch 03, 2022

最近也一直会用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字符串,然后又将字符串转回对象。 

细说一下Object.assign()

Object.assign()

  • Object.assign() 第一个参数是目标对象,后面的都是源对象。 Object.assign (target, source1,source2, source3, …);
  • 如果源对像与目标对象有相同的属性名,或源对象中有相同的属性名,后面的会覆盖前边的值 。
  • 如果参数传入的不是Object,会转成Object
  • null和undefined 不能作为参数传入,因为null和undefined 不能转成Object
  • 如果发生的值是一个对象,Object.assign的处理方法是直接替换,而不是添加。 如下面的 a 和 b
  • 可以为类添加方法
const obj1  = {name:'小明', age:'18',education:'undergraduate'}
    const obj2 = {height:'180cm',hobby:'painting'}
    let  obj = Object.assign({},obj1, obj2)
    console.log('合并后的类:');
    console.log(JSON.stringify(obj));
    Object.assign(obj, obj, {height:'170cm'});
    console.log('修改过height后的类:');
    console.log(JSON.stringify(obj));
    Object.assign(obj, {arr:{index:1, name:'类'}}, {name:'加了一个类进去'})
    console.log(JSON.stringify(obj));
    console.log("加一个类进去后:"+obj.arr.index);
    // a. 这种修改方式,只会修改index 的值
    Object.assign(obj, Object.assign(obj.arr, {index:2}))
    console.log(JSON.stringify(obj));
    console.log("修改类index后:"+obj.arr.index);
    // b. 这种修改方式,arr只剩下index属性
    // Object.assign(obj, {arr:{index:2}}, {name:'修改类的index为:2'})
    // console.log(JSON.stringify(obj));
    // console.log("修改类index后:"+obj.arr.index);
    // Object.assign()做的是浅拷贝, 如果一个属性是新合并进来的对象,改变源对象的值,会影响合并后的值 。
    let newObj  = {type:{aa:'蔬菜'}};
    Object.assign(obj, newObj);
    console.log("合并一个含属性type的类后:"+JSON.stringify(obj));
    // c. 这种不会影响obj中的type.aa
    // Object.assign(newObj, {type:{aa:'水果'}});
    // d. 这种会影响obj中的type.aa
    newObj.type.aa = '水果';
    console.log("修改newObj中的type.aa后:"+JSON.stringify(newObj));
    console.log("修改newObj中的type.aa后:"+JSON.stringify(obj));
    // e. 用Object.assign合并一个数组的时候,会把数组当成一个属性名为index的类
    const arr1  = [1, 2, 3, 4, 5] ;  // 在Object的眼里是这样的: arr1={0:1, 1:2, 2:3,3:4, 4:5}
    const arr2 =  [8, 9, 10];        // 在Object的眼里是这样的: arr2={0:8, 1:9, 2:10}
    console.log("合并后的数组为:"+Object.assign(arr1, arr2)); // 得到的结果是:8, 9, 10, 4, 5
    // f. Object.assign() 为类添加方法
    Object.assign(UserInfo.prototype, {
      getUserName (){
        return this.name;
      },
      getUserGender (){
        return this.gender ;
      }
    })
    let user  = new UserInfo("笑笑", '女');
    console.log("userinfo中的信息为: "+ user.getUserName() +", "+user.getUserGender()); // 输出的结果为:笑笑,女

输出的结果:

ObjectAssignDemo.js:13 合并后的类:
ObjectAssignDemo.js:14 {"name":"小明","age":"18","education":"undergraduate","height":"180cm","hobby":"painting"}
ObjectAssignDemo.js:16 修改过height后的类:
ObjectAssignDemo.js:17 {"name":"小明","age":"18","education":"undergraduate","height":"170cm","hobby":"painting"}
ObjectAssignDemo.js:19 {"name":"加了一个类进去","age":"18","education":"undergraduate","height":"170cm","hobby":"painting","arr":{"index":1,"name":"类"}}
ObjectAssignDemo.js:20 加一个类进去后:1
ObjectAssignDemo.js:24 {"name":"类","age":"18","education":"undergraduate","height":"170cm","hobby":"painting","arr":{"index":2,"name":"类"},"index":2}
ObjectAssignDemo.js:25 修改类index后:2
ObjectAssignDemo.js:35 合并一个含属性type的类后:{"name":"类","age":"18","education":"undergraduate","height":"170cm","hobby":"painting","arr":{"index":2,"name":"类"},"index":2,"type":{"aa":"蔬菜"}}
ObjectAssignDemo.js:40 修改newObj中的type.aa后:{"type":{"aa":"水果"}}
ObjectAssignDemo.js:41 修改newObj中的type.aa后:{"name":"类","age":"18","education":"undergraduate","height":"170cm","hobby":"painting","arr":{"index":2,"name":"类"},"index":2,"type":{"aa":"水果"}}
ObjectAssignDemo.js:46 合并后的数组为:8,9,10,4,5
ObjectAssignDemo.js:58 userinfo中的信息为: 笑笑, 女

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
prettify 代码高亮着色器google出品
Dec 28 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
微信小程序日历插件代码实例
Dec 04 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
OpenLayers3实现图层控件功能
Sep 25 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 Javascript
vue实现移动端div拖动效果
Mar 03 #Vue.js
vue实现滑动解锁功能
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 #Javascript
Vue全局事件总线你了解吗
Feb 24 #Vue.js
Vue的生命周期一起来看看
Vue的过滤器你真了解吗
Feb 24 #Vue.js
Vue监视数据的原理详解
Feb 24 #Vue.js
You might like
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
smarty中js的调用方法示例
2014/10/27 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
Python实现Dijkstra算法
2018/10/17 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
大学生就业自荐信
2013/10/26 职场文书
采购内勤岗位职责
2013/12/10 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
合作协议书范本
2014/04/17 职场文书
四查四看整改措施
2014/09/19 职场文书
化工见习报告范文
2014/10/31 职场文书
情人节单身感言
2015/08/03 职场文书
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫