前言
在前端开发中，我们常常需要合并对象的属性，如动态设置 default props、覆盖组件的 Props 等。在 ES6 之前，我们一般使用 jQuery 的 $.extend() 方法或自己编写一个 merge 方法来实现。但 ES6 的 Object.assign() 方法提供了更加简单和灵活的实现方式。
Object.assign() 是 ES6 添加的方法，用于将多个源对象的属性拷贝到目标对象中。该方法返回的是目标对象，所以它兼容 jQuery 的 $.extend() 和 Object.create() 的用法。
使用 Object.assign() 合并对象属性
Object.assign() 方法接受一个目标对象和一个或多个源对象作为参数。例如，我们要将对象 b 的属性合并到对象 a 中，可以这样写：
const a = { name: 'Tom', age: 26 }; const b = { age: 27, gender: 'male' }; Object.assign(a, b); console.log(a); // { name: 'Tom', age: 27, gender: 'male' } console.log(b); // { age: 27, gender: 'male' }
通过 Object.assign()，我们将对象 b 的属性合并到对象 a 中，并返回了一个新的 a 对象。在该过程中，如果目标对象已经有相同的属性，则源对象的属性值会覆盖目标对象的属性值。
还可以将 Object.assign() 用于合并多个对象的属性，例如：
const a = { name: 'Tom', age: 26 }; const b = { age: 27, gender: 'male' }; const c = { age: 28, height: '180cm' }; const result = Object.assign({}, a, b, c); console.log(result); // { name: 'Tom', age: 28, gender: 'male', height: '180cm' }
在合并多个源对象时，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
