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 相关文章推荐
express的中间件bodyParser详解
Dec 04 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
vue2.0结合Element-ui实战案例
Mar 06 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 array_search() 函数使用
2010/04/13 PHP
PHP实现文件下载详解
2014/11/27 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
css配合jquery美化 select
2013/11/29 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
python计算最小优先级队列代码分享
2013/12/18 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
Python上下文管理器和with块详解
2017/09/09 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
Django 内置权限扩展案例详解
2019/03/04 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
python 字典访问的三种方法小结
2019/12/05 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
大学生入党自我鉴定
2013/10/31 职场文书
物流仓储计划书
2014/01/10 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
个人典型事迹材料
2014/12/30 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
python四种出行路线规划的实现
2021/06/23 Python
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫