在前端开发中，处理数组是经常遇到的需求。而 lodash 是一个非常优秀的 JavaScript 工具库，其中就包含了一个十分实用的方法 union。
什么是 union
union 方法可以接受多个数组参数，并返回这些数组的并集，去除重复元素后的新数组。
安装 lodash
要使用 union 方法，我们需要先安装 lodash 这个 npm 包。在终端中输入以下命令即可：
npm install lodash
使用 union 方法
安装好 lodash 后，我们就可以在项目中使用 union 方法来对数组进行操作。
基础用法
下面我们来看一个简单的示例代码：
const _ = require('lodash');
const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];
const result = _.union(arr1, arr2);
console.log(result); // [1, 2, 3, 4]在上面的代码中，我们首先引入了 lodash，然后定义了两个数组 arr1 和 arr2。接着，我们调用了 _.union 方法，将 arr1 和 arr2 作为参数传入。最后，将结果赋值给变量 result 并输出。
运行代码后，我们会得到 [1, 2, 3, 4] 这个新的数组。可以看到，这是 arr1 和 arr2 的并集，并且去除了重复元素。
多重数组的并集
除了可以传入两个数组，union 方法还可以接受多个数组作为参数，并返回它们的并集。
-- -------------------- ---- ------- ----- - - ------------------ ----- ---- - --- -- --- ----- ---- - --- -- --- ----- ---- - --- -- --- ----- ------ - ------------- ----- ------ -------------------- -- --- -- -- -- --
在上面的代码中，我们定义了三个数组 arr1、arr2 和 arr3。然后，将它们传入 union 方法中，得到了一个包含所有元素的新数组 [1, 2, 3, 4, 5]。
对象数组的合并
有时候，我们需要对包含对象的数组进行操作。在这种情况下，我们可以使用 _.unionBy 方法，通过指定对象属性来去重合并数组。
-- -------------------- ---- ------- ----- - - ------------------ ----- ---- - ----- --- ---- ---- ----- ---- - ----- --- ---- ---- ----- ------ - --------------- ----- ------ -------------------- -- ----- --- ---- --- ---- ---
在上面的代码中，我们定义了两个包含对象的数组 arr1 和 arr2。然后，通过指定 id 属性，调用了 _.unionBy 方法，得到了一个包含所有元素的新数组 [{id: 1}, {id: 2}, {id: 3}]。
数组中包含 NaN
在 JavaScript 中，NaN 和任何值都不相等。如果数组中包含 NaN，那么使用 union 方法就无法正确去重合并数组。
为了解决这个问题，lodash 提供了一个特殊的方法 _.unionWith，可以自定义比较函数来进行数组合并。
下面是一个示例：
const _ = require('lodash');
const arr1 = [1, NaN, 2];
const arr2 = [NaN, 3, 4];
const result = _.unionWith(arr1, arr2, _.isEqual);
console.log(result); // [1, NaN, 2, 3, 4]在上面的代码中，我们定义了两个数组 arr1 和 arr2，其中 arr1 包含了一个 NaN 元素。然后，通过调用 _.unionWith 方法，并传入 isEqual 比较函数，得到了一个包含所有元素的新数组
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/49270