在日常开发中，我们经常需要将一个或多个对象合并成一个对象，以便于后续处理。在 ES6 之前，我们通常使用 Object.assign() 方法来实现该功能，但该方法有一些限制，比如无法深度合并对象。在 ES6 中，新增了一些对象合并的语法，使得对象合并变得更加灵活和高效。
对象合并的语法
在 ES6 中，使用 {...} 语法来进行对象合并，示例如下：
----- ---- - - -- -- -- - -- ----- ---- - - -- -- -- - -- ----- ------ - - -------- ------- -- -------------------- -- - -- -- -- -- -- - -
在上述示例中，通过 {...obj1, ...obj2} 的语法将 obj1 和 obj2 中的属性合并为一个新的对象 result。如果 obj2 中的属性与 obj1 中的同名属性，那么最终结果中该属性的值将被替换为 obj2 中的值。
如果要合并的对象不只是两个，可以使用多个 {...} 语法来实现：
----- ---- - - -- - -- ----- ---- - - -- - -- ----- ---- - - -- - -- ----- ------ - - -------- -------- ------- -- -------------------- -- - -- -- -- -- -- - -
需要注意的是，用 {...} 语法进行合并时，只能合并可枚举属性，不能合并 Symbol 类型的属性。
对象的属性展开
除了通过 {...} 语法来实现对象合并外，在 ES6 中还新增了对象的属性展开语法。该语法允许我们在对象上展开一个或多个属性，示例如下：
----- --- - - -- -- -- - -- ----- ------ - - ------- -- - -- -------------------- -- - -- -- -- -- -- - -
在上述示例中，通过 {...obj, z: 3} 的语法，将 obj 对象上的属性展开到一个新的对象中，并在其中添加一个新的属性 z。
需要注意的是，属性展开语法只能展开对象的可枚举属性，不能展开 Symbol 类型的属性。
对象的深度合并
在 ES6 之前，无法通过 Object.assign() 方法对对象进行深度合并，需要通过其他方式来实现。在 ES6 中，我们可以利用 {...} 语法中的嵌套语法来实现对象的深度合并。
示例如下：
----- ---- - - -- - -- - - -- ----- ---- - - -- - -- - - -- ----- ------ - - -------- ------- -- -------------------- -- - -- - -- - - ----- ------
上述示例中，我们期望最终结果中的 x 属性是 { a: 1, b: 2 }，但实际上最终结果中只有 x 属性的 b 值，而 a 的值被覆盖了。为了实现深度合并，我们可以将 {...} 语法嵌套起来，示例如下：
----- ---- - - -- - -- - - -- ----- ---- - - -- - -- - - -- ----- ------ - - -------- -------- -- - ---------- --------- - -- -------------------- -- - -- - -- -- -- - - -
在上述示例中，我们使用 { ...obj1.x, ...obj2.x } 的语法，将 x 属性中的属性展开到一个新的对象中，实现了对 x 属性的深度合并。
总结
在 ES6 中，我们可以使用 {...} 语法来实现对象的灵活合并，使用嵌套语法可以实现对象的深度合并。除此之外，ES6 还新增了对象属性展开语法，使得对象合并更加高效。掌握这些语法可以使我们的开发更加的灵活和高效。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654d765e7d4982a6eb6d59cc