在前端开发中，我们经常需要将一个或多个对象合并成一个对象。如果使用纯 JavaScript 实现，这个过程比较繁琐，容易出错。npm 包 extend-assign 可以帮助我们轻松地完成对象合并操作。
安装 extend-assign
使用 npm 可以很容易地安装 extend-assign：
npm install extend-assign
使用 extend-assign
extend-assign 的使用非常简单。我们将要合并的对象作为第一个参数传入 assign() 函数，assign() 函数的后续参数是用作合并的其他对象。
-- -------------------- ---- ------- --- ------------ - ------------------------- --- ---- - - ----- ----- ---- -- -- --- ---- - - ------- --- -- --- ---- - - ---- ------- -- --- ------ - ------------------ ----- ------ -------------------- -- - ----- ----- ---- --- ------- ---- ---- ------- -
可以看到，assign() 函数返回的是合并后的新对象。
合并方式
如果多个对象中有相同的属性名，extend-assign 会按照传入参数的顺序覆盖前面的值。
var obj1 = { name: '张三', age: 20 };
var obj2 = { name: '李四' };
var result = extendAssign(obj1, obj2);
console.log(result); // { name: '李四', age: 20 }多层对象合并
对于多层对象的合并，extend-assign 也能轻松应对。只需要将多层对象传入 assign() 函数即可。
-- -------------------- ---- -------
--- ---- - -
----- -----
---- ---
---- -
------ --------
-------- -----
-
--
--- ---- - -
------- ----
---- -
------ ------
------- -----
-
--
--- ------ - ------------------ ------
--------------------
-- -
-- ----- -----
-- ---- ---
-- ------- ----
-- ---- -
-- ------ ------
-- -------- ------
-- ------- -----
-- -
-- -深拷贝
默认情况下，extend-assign 是浅拷贝，即只拷贝引用的对象。如果需要实现深拷贝，需要添加 true 参数。
-- -------------------- ---- -------
--- ---- - -
----- -----
---- ---
---- -
------ --------
-------- -----
-
--
--- ---- - -
------- ----
---- -
------ ------
------- -----
-
--
--- ------ - ------------------ ----- ------
--------------------
-- -
-- ----- -----
-- ---- ---
-- ------- ----
-- ---- -
-- ------ ------
-- -------- ------
-- ------- -----
-- -
-- -指定覆盖策略
除了按照参数顺序覆盖的方式，我们还可以通过传入覆盖策略来指定合并的方式。extend-assign 提供了几种常用的覆盖策略，可以通过传入一个字符串来指定。
-- -------------------- ---- ------- --- ---- - - ----- ----- ---- -- -- --- ---- - - ----- ---- -- --- ------ - ------------------------ ----- ------ -------------------- -- - ----- ----- ---- -- -
常用的覆盖策略有以下几种：
$extend: 默认策略，按照参数顺序进行扩展。$replace: 用后面的值覆盖前面的值。$ifEmpty: 仅在目标对象的属性值为空（null 或 undefined）时才进行覆盖。$deep: 深度合并对象，合并过程中递归地合并对象的每一层属性值。
-- -------------------- ---- -------
--- ---- - -
----- -----
---- ---
-------- -
----- -----
------- -----
--
------- -------- ------ -------------
--
--- ---- - -
----- -----
-------- -
----- ----
--
------- -------- ---------
--
--- ------ - -------------
-
-------- -
------- -----
-
--
--------
-----
-----
-
------- ----------- ------ ------
-
--
--------------------
-- -
-- ----- -----
-- ---- ---
-- -------- -
-- ----- -----
-- ------- -----
-- --
-- ------- -------- ------ ------------- ------- --------- ------ ------
-- -总结
使用 extend-assign 可以轻松合并对象，让代码更加简洁、易于维护。在使用时，需要注意选择合适的覆盖策略，避免出现意外结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067356890c4f7277583be7