什么是 return-deep-diffs
在前端开发中，经常需要对两个对象进行比较，找出它们之间的差异。因此，有很多 npm 包专门用于比较对象，其中 return-deep-diffs 是一款比较好用的包。
return-deep-diffs 可以递归比较两个对象的所有属性，并返回所有差异的位置和值，非常方便。比如可以用于处理 React 组件在状态更新时候的 diff 操作，也可以用于比较两个版本的配置文件。
如何使用 return-deep-diffs
安装 return-deep-diffs
使用 npm 安装 return-deep-diffs：
npm install return-deep-diffs
API
return-deep-diffs 提供了 diff 函数，接收两个参数，分别是旧对象和新对象，返回一个包含差异的数组。其中 diff 函数返回的数组的每一个元素都是一个对象，包含 path、kind 和 rhs 三个属性。
path 表示差异的位置，由一个数组表示；
kind 表示差异的类型，可能是 N（add）、D（delete）、E（change）、A（Array）中的一种；
rhs 表示新对象中的值。
下面是 diff 函数的具体用法：
-- -------------------- ---- -------
----- -------- - -----------------------------
----- ---- - -
----- --------
---- ---
------ ----------- --------------
-------- -
----- -----
--------- ------
------- ------ -----
-
-
----- ---- - -
----- ------
---- ---
------ ----------- ------------
-------- -
----- -----
--------- ------
------- ------- -----
-
-
----- ----- - -------------- ------
-------------------上述代码中，我们定义了两个对象 objA 和 objB，分别表示两个不同的人。然后，我们使用 return-deep-diffs 的 diff 函数比较这两个对象的差异，最终返回一个 diffs 数组，表示两个对象之间的差异。
运行代码，我们可以看到如下输出：
-- -------------------- ---- -------
-
- ----- - ------ -- ----- ---- ---- -------- ---- ----- --
- ----- - -------- - -- ----- ---- ---- ------------- ---- ---------- --
- ----- - ---------- ---------- --
----- ----
---- ------
---- ----- --
- ----- - ---------- --------- - --
----- ----
---- -----
---- ----- --
- ----- - ---------- --------- - --
----- ----
---- -----
---- ---- -
-上面的输出表示 objA 和 objB 的差异，可以看到 objA 中的 name 属性从 Alice 变为了 Bob，hobby 数组的第二项从 travelling 变成了 swimming，address 中的 district 属性从海淀区变成了朝阳区，street 数组中的第一项从清河变成了三里屯，第二项从上地变成了望京。
对象数组的比较
如果需要比较两个数组对象的差异时，可以使用 return-deep-diffs 提供的 uniqueId 函数（因为数组项没有 key，所以需要为每个数组项生成一个唯一的 id）和 clone 函数（因为数组相当于引用类型，有时候需要克隆数组以避免数组对象的引用发生变化）。
-- -------------------- ---- ------- ----- - - ------------------ ----- -------- - ----------------------------- ----- ---- - - ---- -- ----- --------- ---- -- ----- ------- ---- -- ----- -------- -- ----- ---- - - ---- -- ----- --------- ---- -- ----- ------- ---- -- ----- -------- -- ----- ----- - --------- ------------------ ------------------ ---- -- ------- -- -------------------
上面的代码中，我们定义了两个对象数组 arrA 和 arrB，分别表示两个不同的列表。然后，我们使用 return-deep-diffs 的 diff 函数比较这两个数组的差异。注意，这里我们要使用 lodash 的 cloneDeep 函数和 return-deep-diffs 的 uniqueId 函数生成每个数组项的唯一 id。
运行代码，我们可以看到如下输出：
[
{ path: [ '2', 'name' ], kind: 'E', lhs: 'Cindy', rhs: 'Lucas' }
]上面的输出表示 arrA 和 arrB 的差异，可以看到 arrA 数组中的第三项的 name 属性从 Cindy 变为了 Lucas。
小结
本文介绍了 npm 包 return-deep-diffs 的使用教程，通过它可以方便地比较两个对象之间的差异，并返回差异的位置和值。希望读者能够掌握这个 npm 包的使用方法，提高前端开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553fe81e8991b448d157a