在 JavaScript 中,常常需要将一个对象的属性复制到另一个对象中。在 ES6 中,提供了简便的方法来实现该功能,即 Object.assign()
方法。在 ES7 中,Object.assign()
方法得到了进一步的增强,本文将为您详细介绍该方法的使用。
基本用法
Object.assign()
方法用于将一个或多个源对象的可枚举属性复制到目标对象中,返回目标对象。其基本语法为:
-------------------- -- -------- -------- ---
其中,target
是目标对象,source1
、source2
…是源对象。多个源对象的属性将合并到目标对象中,如果有同名属性,则后面的源对象的属性会覆盖前面的。
下面是一个简单的示例:
--- ------ - --- --- ------- - --- --- --- ------- - --- --- --------------------- -------- --------- -------------------- -- --- -- -- --
注意事项
Object.assign()
方法只复制源对象的可枚举属性,也就是说,不会复制其原型链上的属性。此外,它也不会复制 getter 和 setter 方法。如果源对象的属性是一个对象,则会复制该对象的引用,而不是其中的值。如果源对象的属性是一个函数,则会复制该函数的引用。
下面是一个例子:
--- ---- - - ---- --- -- -- --- ---- - ----------------- ------ -------------------- --- ---------- -- ----
用途
Object.assign()
方法的主要用途是对象属性的合并和拷贝。
对象属性合并
当我们需要将多个对象的属性合并成一个对象时,可以使用 Object.assign()
方法。
--- ---- - --- --- --- ---- - --- --- --- ---- - --- --- --- --- - ----------------- ----- ----- ------ ----------------- -- --- -- -- -- -- --
对象属性拷贝
当我们需要将一个对象的属性拷贝到另一个对象中时,可以使用 Object.assign()
方法。
----- ------ - ----------------- ---- - --------- - ----- -------- - ---- - - --- ------- - --- ------------- ---- --- ------- - --- ---------------------- --------- --------------------- -- ------ ------ ---- ---
增强用法:深拷贝
在 ES7 中,Object.assign()
方法增加了深拷贝的功能。我们可以使用如下方式进行深拷贝:
----------------- ----- ----- ----- ------
在这个例子中,我们需要将 obj1
、obj2
的属性进行合并,并将 obj3
的值作为 foo
属性的值添加到结果对象中。由于 {foo: obj3}
是一个新的对象,因此 Object.assign()
方法将执行深拷贝操作。
下面是一个使用深拷贝的示例:
--- ---- - --- --- ---- --- ---- - --- --- ---- --- --- - ----------------- ----- ------ ----------------- -- --- --- ---
在该示例中,Object.assign()
方法只将 obj2
中的属性合并到结果对象中,而 obj1
中的 x
属性被覆盖了。如果我们想将 obj1
中的 x
属性也合并到结果对象中,可以使用深拷贝的方式:
--- ---- - --- --- ---- --- ---- - --- --- ---- --- --- - ----------------- ----- ----- --- ----------------- ------- ---------- ----------------- -- --- --- -- -- ---
总结
Object.assign()
方法是一个非常有用的工具,可以用于对象属性的合并和拷贝。在 ES7 中,它还增加了深拷贝的功能,使其更加灵活。需要注意的是,它只会复制源对象的可枚举属性,不会复制原型链上的属性以及 getter 和 setter 方法。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/659f8869add4f0e0ff81d5d8