ECMAScript 2017 中的 Object.assign 如何实现对象浅拷贝

阅读时长 3 分钟读完

在前端开发中,对象的拷贝是一个常见的操作。有时我们需要在原对象的基础上进行修改,但同时还需要保留原对象。这时,我们常常使用对象的浅拷贝。

ECMAScript 2017 中新增的 Object.assign 方法可以方便地实现对象的浅拷贝。本文将介绍 Object.assign 方法的使用及其实现原理。

Object.assign 方法

Object.assign 方法可以将多个源对象的属性复制到目标对象中,并返回目标对象。方法的语法如下:

其中,target 表示目标对象,sources 表示源对象,可以有多个。

例如,下面这个示例将源对象 obj1 和 obj2 的属性复制到目标对象 obj 中:

需要注意的是,Object.assign 方法是对目标对象进行操作,返回的是目标对象,而不是新创建的对象。如果目标对象已经存在某个属性,那么该属性的值会被源对象的值覆盖。

实现对象浅拷贝的方法

在上面的示例中,我们通过 Object.assign 方法实现了对象的浅拷贝。实现的原理是,Object.assign 方法会遍历所有选定的源对象,将每个源对象中的可枚举属性复制到目标对象中。如果源对象中存在相同名称的属性,后面的属性会覆盖前面的属性。

需要注意的是,Object.assign 方法只能实现对象的浅拷贝,而不能实现对象的深拷贝。如果源对象中的某个属性是一个对象,那么目标对象中的对应属性只是一个指向该对象的引用,如果修改了该对象,那么目标对象中的对应属性也会发生变化。

示例代码

下面是一个使用 Object.assign 方法实现对象浅拷贝的示例代码:

在上面的代码中,我们首先创建了一个原对象 obj1,然后通过 Object.assign 方法将 obj1 的属性复制到 obj2 中,实现了对象的浅拷贝。接着,我们修改了 obj2 中的属性,发现原对象 obj1 并没有受到影响。

总结

本文介绍了 ECMAScript 2017 中新增的 Object.assign 方法及其实现原理。Object.assign 方法可以方便地实现对象的浅拷贝,但不能实现对象的深拷贝。在前端开发中,对象的拷贝是一个常见的操作,掌握对象拷贝的相关知识可以提高我们的开发效率。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64a53f5c48841e98941c1848

纠错
反馈