前言
在前端开发中，我们经常需要使用 Object.assign() 对多个对象进行合并，从而实现属性的复制或者覆盖。然而，在实际使用中我们经常会遇到 Object.assign() 的一些问题，引起不必要的麻烦。幸运的是，在 ECMAScript 2021 版本中，Object.assign() 的一些问题一一得到了解决。本文将详细介绍这些改进，并附有示例代码，旨在帮助开发者更好地理解并使用 ECMAScript 2021 中的 Object.assign()。
Object.assign() 的问题
Object.assign() 的最大问题在于它只能对一级属性进行合并，而无法对深度属性进行合并。举个例子，假设我们有两个对象：
-- -------------------- ---- -------
----- ------- - -
-- --
-- -
-- -
-
--
----- ------- - -
-- --
-- -
-- -
-
--使用 Object.assign() 合并后得到的结果为：
-- -------------------- ---- ------- ----- ------ - ---------------------- --------- -- ------- -- - -- -- -- -- -- - -- -- - -- -- -- -- - -- -
可以看到，Object.assign() 只是简单地覆盖了 object1 中的 b 属性。因此，如果我们想对深度属性进行合并，就必须手动编写代码进行处理，并将其作为扩展运算符的参数传递给 Object.assign()。
另一个问题在于，如果源对象中的某个值是 null 或 undefined，Object.assign() 在合并过程中会直接跳过该属性，这也可能会导致意外的结果。
解决 Object.assign() 的问题
ECMAScript 2021 中引入了一种新的对象合并语法，可以在这些情况下更容易地进行对象合并: Object Spread Properties。
对象展开
对象展开是 ECMAScript 2018 中引入的语法，它允许我们将一个对象拆开，从而可以方便地使用它的属性。示例如下：
-- -------------------- ---- ------- ----- --- - - -- -- -- - -- ----- ------ - - ------- -- - -- -------------------- -- --- -- -- -- -- --
Object Spread Properties
Object Spread Properties 是 ECMAScript 2021 中引入的新语法，它是对象展开的一种改进，允许我们将一个对象的属性展开到一个新对象上，并可以根据需求对新对象进行任意修改。
Object Spread Properties 的语法格式如下：
const newObj = {
...obj1,
...obj2
};其中，obj1 和 obj2 分别表示要合并的对象。如果 obj1 和 obj2 中存在相同的属性，后者（obj2）的值将覆盖前者（obj1）的值。
借助 Object Spread Properties，我们可以更容易地对深度属性进行合并，如下示例：
-- -------------------- ---- -------
----- ------- - -
-- --
-- -
-- -
-
--
----- ------- - -
-- --
-- -
-- -
-
--
----- ------ - -
-----------
-----------
-- -
-------------
------------
-
--
--------------------使用 Object Spread Properties 合并后得到的结果如下：
{
a: 0,
b: {
c: 2
},
d: 1
}从上述示例中可以看到，Object Spread Properties 工作方式类似于 Object.assign()，但是它允许我们更好地控制属性的覆盖行为。在合并深度对象时，我们只需要为其属性单独拆开处理即可。
合并 null 和 undefined
这个问题也得到了解决。在 ECMAScript 2021 中，Object.assign() 已经被修改，不再跳过 null 和 undefined 值。如果源对象的属性值是 null 或者 undefined，Object.assign() 会在目标对象上设置该属性并显式设置为 null 或 undefined。例如：
const target = { a: 1 };
const source = { b: 2, a: null };
const result = Object.assign(target, source);
console.log(result); // { a: null, b: 2 }指导意义
在实际开发中，Object.assign() 只能处理一级属性的合并，并且容易出现不必要的问题。尽管我们可以编写复杂的代码来解决这些问题，但新的 ECMAScript 2021 版本中的 Object Spread Properties 语法可以帮助我们更容易地处理对象的合并，解决 Object.assign() 的一些问题，同时也减少了冗余代码。因此，在开发过程中，应尽可能使用 Object Spread Properties 语法，以保证代码的简洁性和可维护性。
总结
本文详细介绍了 ECMAScript 2021 中的 Object.assign() 的问题，以及其解决方式。通过 Object Spread Properties 语法，我们可以更方便地处理深度属性的合并，同时也能够合并 null 和 undefined 值，减少冗余的代码。在日常开发中，我们应尽可能使用 Object Spread Properties 语法，以便更好地管理代码和提高生产力。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6480f01b48841e9894069cca