足球比分直播500:JavaScript对象拷贝与Object.assign用法实例分析

足球竞彩网 www.2ts2.com.cn  更新时间:2018年06月20日 10:13:05   作者:忆之逸之   我要评论

这篇文章主要介绍了JavaScript对象拷贝与Object.assign用法,结合实例形式分析了javascript深拷贝与浅拷贝以及Object.assign的功能与相关使用技巧,需要的朋友可以参考下

本文实例讲述了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): Undefined、Null、Boolean、Number 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面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

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

相关文章

  • apicloud拉起小程序并传递参数的方法示例

    apicloud拉起小程序并传递参数的方法示例

    这篇文章主要介绍了apicloud拉起小程序并传递参数的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 微信小程序上传图片到服务器实例代码

    微信小程序上传图片到服务器实例代码

    这篇文章主要介绍了微信小程序上传图片到服务器的实例代码,在文章给大家补充介绍了微信小程序上传一或多张图片 的方法,本文给大家介绍的非常详细,具有参考借鉴加载,需要的朋友可以参考下
    2017-11-11
  • js电话号码验证方法

    js电话号码验证方法

    JS电话号码验证是比较常的一种验证,下边给出一个JavaScript验证电话号码的小例子。国内固定电话都是七位或8位的数字组成的,还可以带有长途的区号。
    2015-09-09
  • 纯js网页画板(Graphics)类简介及实现代码

    纯js网页画板(Graphics)类简介及实现代码

    今天需要在网页上画一个图谱,想到用JS,经过学习,和网上搜索,经过整理优化得到下面代码,注意不是用HTML5的canvas,而是用的纯js,需要了解的朋友可以参考下
    2012-12-12
  • JavaScript运动框架 链式运动到完美运动(五)

    JavaScript运动框架 链式运动到完美运动(五)

    这篇文章主要介绍了JavaScript运动框架的第五部分,链式运动到完美运动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Bootstrap源码解读表单(2)

    Bootstrap源码解读表单(2)

    这篇文章主要源码解读了Bootstrap表单,介绍了Bootstrap各式各样的表单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • ES6概念 Symbol.keyFor()方法

    ES6概念 Symbol.keyFor()方法

    这篇文章主要介绍了ES6概念 Symbol.keyFor()方法 ,需要的朋友可以参考下
    2016-12-12
  • javacript使用break内层跳出外层循环分析

    javacript使用break内层跳出外层循环分析

    这篇文章主要介绍了javacript使用break内层跳出外层循环的用法,以实例形式对比分析了循环跳出break语句的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • layui弹出层按钮提交iframe表单的方法

    layui弹出层按钮提交iframe表单的方法

    今天小编就为大家分享一篇layui弹出层按钮提交iframe表单的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • xmlplus组件设计系列之分隔框(DividedBox)(8)

    xmlplus组件设计系列之分隔框(DividedBox)(8)

    xmlplus 是一个JavaScript框架,用于快速开发前后端项目。这篇文章主要介绍了xmlplus布局类组件之分隔框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论

  • 2016年兰州市政府网站留言办理获网民好评 2018-12-02
  • 港人的养老金从哪儿来?(看香港) 2018-12-02
  • 864| 281| 406| 24| 600| 108| 464| 953| 80| 217|