ES2015之Object

275 阅读2分钟

这是我参与11月更文挑战的第18天,活动详情查看:2021最后一次更文挑战

Object

ES2015的标准增加了:Object的一些拓展,这篇文章我们就来了解一下什么是Object的一些拓展。

在JavaScript中,几乎所有的对象都是Object类型的实例,它们都会从Object.prototype继承属性和方法。Object 构造函数为给定值创建一个对象包装器。

如何使用

Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象,它将返回目标对象,使用如下:

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);
console.log(target); // { a: 1, b: 4, c: 5 }

如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖,后面的源对象的属性将类似地覆盖前面的源对象的属性,所以我们可以使用Object.assign()把两个对象合并在一起。

合并对象

我们不仅可以通过Object.assign()把两个对象合并在一起,还可以使用扩展运算符...来合并对象,使用如下:

const returnedTarget = {...target,...source}

注意事项

我们需要注意的是:Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter。

当我们的source对象比较深的时候,如下:

const source = { b: 4, c: {c1:1}};

合并结果如下:

Object.assign(target, source);
console.log(target); // { a: 1, b: 4, c: {c1:1} }

如果source对象发生了变化,则target也会随之变化,如下:

source.c.c2=2;
console.log(target); // { a: 1, b: 4, c: {c1:1,c2:2} }

这就牵涉到深拷贝的问题了,这点是我们需要注意的地方。

总结

在项目中,Object.assign()方法是经常用的,我们通常是用来合并对象。

如果你想了解ES的其他特性,请移步到 ES2015+碎片化学习,每天都在向前走一步,这是所有文章的目录入口。