JavaScript对象拷贝与Object.assign用法实例分析


Posted in Javascript onJune 20, 2018

本文实例讲述了JavaScript对象拷贝与Object.assign用法。分享给大家供大家参考,具体如下:

深拷贝与浅拷贝

在 JavaScript 中,对于基本数据类型(undefined、null、boolean、number、string)来说,在变量中存储的就是这个变量本身的值,复制是对值的复制,不存在深浅之说。但C系语言的共同特点中有,存储引用类型(对象),实际中在变量里存的是它的地址。因此对 JavaScript 中的复杂数据类型(object)来说,也会有浅拷贝和深拷贝的概念:浅拷贝指两个不同的变量存的是同一个对象的地址,即两个变量指向同一块内存区域;深拷贝则是重新分配了一块内存区域来存储复制后的对象,两个变量存的是真正的两个互不影响的变量。

p.s. 有些资料认为浅拷贝是重新分配内存,并把原对象中的各个属性进行依次复制而不进行递归复制属性值是对象的情况,也就是只复制对象的最外面一层。本文将这种情况归于“深拷贝和浅拷贝的中间情况”,文中以“是否划分新的内存”为界限划分深浅拷贝,这种划分方式与 C/C++、C#、Java 等C系语言保持概念一致。

浅拷贝在JavaScript中的实现

浅拷贝在js中很简单,例如:

let objA = {
  name: '对象A',
  content: '我是A'
};
let copyA = objA;
console.log(objA.name); // ==> "对象A"
console.log(copyA.name); // ==> "对象A"

如此即得到了objA的一份浅拷贝copyA,由于指向的是同一个对象,因此在修改objA的同时也是修改了copyA,反之亦然。

Object.assign()

Object.assign(target, …sources) MDN上对该方法的描述是 将所有可枚举属性的值从一个或多个源对象复制到目标对象,String类型和 Symbol 类型的属性都会被拷贝, 并且该方法会忽略值为 或者 undefined 的源对象。例如:

var o1 = { a: 1 };
var o2 = { [Symbol('foo')]: 2 };
var obj = Object.assign({}, o1, o2);
console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
Object.getOwnPropertySymbols(obj); // [Symbol(foo)]

Object.assign 的深拷贝与浅拷贝

注意前面说的是可枚举属性,这是一个介于完全的深拷贝和完全的浅拷贝之间的方法:如果我们把它的第一个参数target设置为一个空对象 {},同时保证剩余的源对象sources中的属性类型不包含引用类型,则该方法的返回值就是一个与源对象相同的但并不在同一块内存空间另一个对象,即获得了源对象的深拷贝。但是,如果源对象的属性中包含某个对象,也就是这个属性的值指向某个对象,就像下面这样:

var obj = {
  name: 'obj name',
  content: {
    a: 1,
    b: 2
  }
};

则使用 Object.assign({}, obj) 时,返回的目标对象中的content属性与源对象obj中的content属性指向的同一块内存区域,即对obj下的content属性进行了浅拷贝。因此针对深拷贝,需要使用其他方法,比如自己实现一个深拷贝的方法,或者使用 JSON.parse(JSON.stringify(obj)), 因为 Object.assign()拷贝的是属性值。

Object.assign 的属性覆盖

如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性,因此可以用来合并对象(常用的一个场景是使用reducers更新React应用的状态)。

var o1 = { a: 1, b: 1, c: 1 };
var o2 = { b: 2, c: 2 };
var o3 = { c: 3 };
var obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

关于对象的继承属性和不可枚举属性

前文有提到,Object.assign 拷贝的是对象的可枚举属性,该方法使用源对象的 [[Get]] 和目标对象的 [[Set]],所以它会调用相关 getter setter。因此,不如说它是分配属性,而不仅仅是复制或定义新的属性。如果合并源包含 getter,这可能使其不适合将新属性合并到原型中,将属性定义(包括其可枚举性)复制到原型应使用Object.getOwnPropertyDescriptor()Object.defineProperty() ,因此 Object.assign 不能拷贝对象的继承属性,例如:

var obj = Object.create({foo: 1}, { // foo 是个继承属性。
  bar: {
    value: 2 // bar 是个不可枚举属性。
  },
  baz: {
    value: 3,
    enumerable: true // baz 是个自身可枚举属性。
  }
});
var copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }

当源对象是原始数据类型时

ECMAScript 有 5 种原始类型(primitive type): UndefinedNullBooleanNumber String。当Object.assign的源对象是原始类型时,源对象会被包装成“对象”,对应的键是它在源对象中的索引值:

var v1 = "abc";
var v2 = true;
var v3 = 10;
var v4 = Symbol("foo")
var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
// 原始类型会被包装,null 和 undefined 会被忽略。
// 注意,只有字符串的包装对象才可能有自身可枚举属性。
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

当拷贝过程中发生异常时

在出现错误的情况下,例如,如果属性不可写,会引发TypeError,异常会打断后续的拷贝任务。如果在引发错误之前添加了任何属性,则可以更改target对象。

var target = Object.defineProperty({}, "foo", {
  value: 1,
  writable: false
}); // target 的 foo 属性是个只读属性。
Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});
// TypeError: "foo" is read-only
// 注意这个异常是在拷贝第二个源对象的第二个属性时发生的。
console.log(target.bar); // 2,说明第一个源对象拷贝成功了。
console.log(target.foo2); // 3,说明第二个源对象的第一个属性也拷贝成功了。
console.log(target.foo); // 1,只读属性不能被覆盖,所以第二个源对象的第二个属性拷贝失败了。
console.log(target.foo3); // undefined,异常之后 assign 方法就退出了,第三个属性是不会被拷贝到的。
console.log(target.baz); // undefined,第三个源对象更是不会被拷贝到的。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 #Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 #Javascript
JS中call和apply函数用法实例分析
Jun 20 #Javascript
微信小程序模拟cookie的实现
Jun 20 #Javascript
JS伪继承prototype实现方法示例
Jun 20 #Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 #jQuery
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 #Javascript
You might like
destoon二次开发入门示例
2014/06/20 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
js 深拷贝函数
2008/12/04 Javascript
简单通用的JS滑动门代码
2008/12/19 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
python实现图片压缩代码实例
2019/08/12 Python
python django生成迁移文件的实例
2019/08/31 Python
Python3如何判断三角形的类型
2020/04/12 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
一套C++笔试题面试题
2012/06/06 面试题
行政助理岗位职责范文
2013/12/03 职场文书
市场开发与营销专业求职信
2013/12/31 职场文书
论文指导教师评语
2014/04/28 职场文书
公共场所禁烟标语
2014/06/25 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
学习经验交流会策划书
2015/11/02 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js
微信小程序实现聊天室功能
2021/06/14 Javascript