前言
在前端开发中，我们常常需要合并对象的属性，如动态设置 default props、覆盖组件的 Props 等。在 ES6 之前，我们一般使用 jQuery 的 $.extend() 方法或自己编写一个 merge 方法来实现。但 ES6 的 Object.assign() 方法提供了更加简单和灵活的实现方式。
Object.assign() 是 ES6 添加的方法，用于将多个源对象的属性拷贝到目标对象中。该方法返回的是目标对象，所以它兼容 jQuery 的 $.extend() 和 Object.create() 的用法。
使用 Object.assign() 合并对象属性
Object.assign() 方法接受一个目标对象和一个或多个源对象作为参数。例如，我们要将对象 b 的属性合并到对象 a 中，可以这样写：
----- - - - ----- ------ ---- -- -- ----- - - - ---- --- ------- ------ -- ---------------- --- --------------- -- - ----- ------ ---- --- ------- ------ - --------------- -- - ---- --- ------- ------ -
通过 Object.assign()，我们将对象 b 的属性合并到对象 a 中，并返回了一个新的 a 对象。在该过程中，如果目标对象已经有相同的属性，则源对象的属性值会覆盖目标对象的属性值。
还可以将 Object.assign() 用于合并多个对象的属性，例如：
----- - - - ----- ------ ---- -- -- ----- - - - ---- --- ------- ------ -- ----- - - - ---- --- ------- ------- -- ----- ------ - ----------------- -- -- --- -------------------- -- - ----- ------ ---- --- ------- ------- ------- ------- -
在合并多个源对象时，Object.assign() 的参数顺序非常重要，因为后面的源对象的属性会覆盖前面的源对象的属性。因此，我们需要将目标对象作为第一个参数，其他源对象按顺序作为后续参数。
注意事项和兼容性
需要注意的是，Object.assign() 方法只会拷贝源对象自身的属性，不会拷贝原型链上的属性。此外，对于 undefined 或 null 值的情况，Object.assign() 方法会跳过。如果源对象中有存在值为 undefined 的属性，则这个属性不会被拷贝，而值为 null 的属性会被拷贝。另外，Object.assign() 方法只支持浅拷贝，即只会拷贝源对象属性的值，而不会拷贝对象属性值所引用的对象。
Object.assign() 方法在 IE 浏览器中的兼容性较差，需要使用 polyfill 进行兼容。通常情况下，我们可以通过 babel 或 TypeScript 进行编译，以达到兼容多个浏览器的目的。
示例代码
下面给出一些使用 Object.assign() 合并对象属性的示例代码。
示例 1: 动态设置 default props
----- ------------ - - ----- ------ ---- -- --
----- ----------- - - ---- --- ------- ------ --
----- ------ ------- --------------- -
------------------ -
-------------
---------- - ----------------- ------------- ----------- -------------
-
-------- -
------ -
----------------------- ----------------- -------------------------
--
-
-
----------------
------- --- -------------------------------
--该示例中，我们使用 Object.assign() 将 defaultProps、customProps 和传入组件的 props 合并为一个新的对象，并将其设置为组件的 state 属性。这样，我们就能够动态设置 default props 了。
示例 2: 覆盖组件的 Props
----- ------------ - - ----- ------ ---- -- --
----- ------ ------- --------------- -
-------- -
----- ----- - ----------------- ------------- ------------
------ -
------------------ -----------------
--
-
-
----- --------- - --------------------------------
----------------
------- ------------ --- ---------
--
-- ----------- --该示例中，我们通过 Object.assign() 将 defaultProps 和传入组件的 props 合并为一个新的对象，并覆盖组件的 Props。
总结
Object.assign() 是一种灵活、简单地合并对象属性的方法，已经被广泛应用于前端开发中。使用 Object.assign() 可以避免自己编写 merge 方法或使用 jQuery 的 $.extend() 方法，更加简洁和优雅。
当然，在使用 Object.assign() 时，我们需要注意一些小细节，如拷贝的顺序以及对原型链的处理等。希望本文能够帮助你更好地理解和应用 Object.assign()。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6475b5bf968c7c53b02b8b93