ES6理解Object.assign

Object.assign(target,...source)

使用这个函数,可以快速的复制一个或多个对象到目标对象中。
本文分析es6,es7,与对象复制相关的内容,以及深浅拷贝。

函数定义

通过调用此函数,可以拷贝所有可被枚举的自由属性值到目标对象中。
函数的参数为:目标对象&源对象
函数的返回值:目标对象(即参数中的目标对象)
源对象个数:可以为任意多个
重点:可被枚举自有 属性

拷贝过程中,调用源对象的getter方法,并在target对象上用setter方法,实现拷贝。

示例

一,枚举类型属性

image.png

控制台尝试了一下,第一个参数o1为target object,调用其setter方法将o2,o3,的属性拷贝到自身。并且,作为target object 的o1===obj,证明了目标对象是这个函数的返回值。


image.png

多做一步尝试
假如多个源对象拥有重名的属性,同名属性覆盖赋值。

包含不可枚举属性

(这块写的不对我还没想明白)


image.png

源对象包含2个属性,第二个属性为嵌套属性
{foo:1},
{
bar:{ value:2 },
baz:{ value:3 , enumerable:true }
}

只读属性的拷贝

对于target object中只读的属性,源对象中的同名属性想要覆盖赋值时,会抛异常!


image.png

Object.assign是否为深拷贝?

不是

Object.assign({a: {b: 0}}, {a: {b: 1, c: 2}}, {a: {c: 3}});
//{a: {c: 3}

可见,Object.assign并不能做到融合,而是将之前的全部替换。
如何深层次的融合对象,比如我们想要输出的结果为{a:{b:1,c:3}}?
递归的调用assign方法。

ES7中的实现办法(依旧只是浅拷贝哦)

在ES7 中我们使用rest属性可以捕获所有剩余的对象内容,例如:

let { fname, lname, ...rest } = { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" };
fname; //"Hemanth"
lname; //"HM"

我们利用该特性实现assign函数

let oldObj1={a:"a",b:{b1:"b1"}}
let oldObj2={a:"a1",b:{b2:"b2"},c:"c"}

let newObject={...oldObj1,...oldObj2};
console.log(newObject)

{"a":"a1","b":{"b2":"b2"},"c":"c"}

依然是浅层次的属性替换,并不是深层次的合并。

深拷贝

深拷贝我只选序列化反序列化

const obj1 = JSON.parse(JSON.stringify(obj));
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。 上面代码表明,ES6允...
    呼呼哥阅读 2,947评论 0 2
  • 属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法。 上面代码表明,ES6允许在对象之中,直接写...
    oWSQo阅读 524评论 0 0
  • 1.属性的简洁表示法 允许直接写入变量和函数 上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量...
    雨飞飞雨阅读 1,153评论 0 3
  • 1 基本用法 Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目...
    Api调用师阅读 885评论 0 4
  • namespace _001_调试和错误处理 { class Program { static voi...
    立秋i阅读 99评论 0 0