在前端开发中，我们常常需要比较对象或者数组的差异，这时候一个非常好用的 npm 包就是 discrepances。它能够对比两个对象或者数组之间的差异，并提供详细的输出信息，让我们轻松地找到问题所在。
安装
可以通过 npm 安装 discrepances 包，如下所示：
--- ------- ------------
使用
对象比较
首先我们来看一个简单的对象比较的示例：
----- ------------ - ------------------------ -- ------ - - - ----- - - - ----- ------ ---- --- ------- ------- -- ----- - - - ----- -------- ---- --- ------- ------- -- -- -- - - - ----- ---- - --------------- --- -- ---- ------------------
输出结果如下：
- --------- - --------- - ------ ------- - - -
我们可以发现 discrepances 输出了一个对象，其中包含一个名为 mismatch 的属性，表示两个对象中不同的地方。在本例中，我们可以看到 a 和 b 中的 name 属性不同，值分别为 Tom 和 Jerry。
如果两个对象相同，则输出一个空对象 {}。
数组比较
除了对象比较，discrepances 还支持数组比较。下面是一个例子：
----- ------------ - ------------------------ -- ------ - - - ----- - - --------- --------- ---------- ----- - - --------- -------- ---------- -- -- - - - ----- ---- - --------------- --- -- ---- ------------------
输出结果如下：
-
--------- -
---- -
-----------
---------
-
-
-我们可以发现，在这个数组比较中，a 和 b 中的第 2 个元素不同，分别是 banana 和 peach。
深度比较
有时候我们需要对比的对象或者数组比较复杂，甚至包含了嵌套的属性或者对象。这时候我们可以使用 discrepances 的深度比较功能，来找到深层次的差异。
下面是一个深度比较的示例：
----- ------------ - ------------------------
-- -------- - - -
----- - - -
----- ------
-------- -
----- ----------
--------- ----------
--
--
----- - - -
----- --------
-------- -
----- -----------
--------- ---------
------- -------- --------
--
--
-- -- - - -
----- ---- - --------------- ---
-- ----
------------------输出结果如下：
-
--------- -
--------- -
------
-------
--
----------------- -
----------
----------
--
--------------------- -
----------
--------
--
------------------- -
----------
-------- -------
-
-
-我们可以看到 discrepances 输出了一个包含四个属性的对象，其中名为 "0/address/street" 的属性不存在于 a 中，在 b 中的值为 "Century Avenue"。
对比结果指南
当我们使用 discrepances 时，需要注意以下几点：
- 如果两个对象或数组完全相同，则输出一个空对象 {}。
- 如果存在差异，则输出一个对象，其中名为 mismatch 的属性是一个包含差异点的对象。mismatch 中的属性对应着对象或数组中的每一个元素或者属性。
- 如果需要对比嵌套的对象或者数组，可以使用深度比较功能。
- 在输出的结果中，如果差异点在嵌套对象或数组中，可以通过 "/" 来分割各个层级。
总的来说，使用 discrepances 可以方便地找到两个对象或者数组中的差异点，帮助我们更快地定位问题。同时在业务逻辑处理中，可以避免不必要的代码执行，提高代码效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5ef97554403f2923b035b9d7