足球射门脚法: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程序设计有所帮助。

相关文章

  • JS跨域代码片段

    JS跨域代码片段

    js跨域我用的比较多的就是jsonp和程序代理。但是jsonp只能用get,而且是js异步调用,有时候不能满足项目要求
    2012-08-08
  • 浅谈JavaScript for循环 闭包

    浅谈JavaScript for循环 闭包

    下面小编就为大家带来一篇浅谈JavaScript for循环 闭包。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JS路由跳转的简单实现代码

    JS路由跳转的简单实现代码

    本文给大家分享一个简单的js路由跳转功能,非常不错,需要的朋友参考下吧
    2017-09-09
  • Javascript for in的缺陷总结

    Javascript for in的缺陷总结

    这篇文章主要介绍了Javascript for in的缺陷总结的相关资料,需要的朋友可以参考下
    2017-02-02
  • JavaScript实现动态添加Form表单元素的方法示例

    JavaScript实现动态添加Form表单元素的方法示例

    这篇文章主要介绍了JavaScript实现动态添加Form表单元素的方法,结合实例形式分析了javascript表单元素操作相关函数使用方法与相关注意事项,需要的朋友可以参考下
    2017-08-08
  • JS中prototype关键字的功能介绍及使用示例

    JS中prototype关键字的功能介绍及使用示例

    prototype 关键字可以为JS原有对象或者自己创建的类中添加方法或者属性。也可以实现继承,下面以实例的方式为大家详细介绍下
    2013-07-07
  • 给moz-firefox下添加IE方法和属性

    给moz-firefox下添加IE方法和属性

    给moz-firefox下添加IE方法和属性...
    2007-04-04
  • JS中改变this指向的方法(call和apply、bind)

    JS中改变this指向的方法(call和apply、bind)

    this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象,通过本文给大家介绍JS中改变this指向的方法(call和apply、bind),需要的朋友参考下
    2016-03-03
  • ExtJs整合Echarts的示例代码

    ExtJs整合Echarts的示例代码

    本篇文章主要介绍了ExtJs整合Echarts的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • React组件的三种写法总结

    React组件的三种写法总结

    本文主要总结了React组件的三种写法以及最佳实践,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01

最新评论