前言
在前端开发中，我们可能需要对 JavaScript 对象的属性进行比较和查找。但是，JavaScript 中的对象是一个非常灵活的数据类型，比较和查找起来有时候还是有些麻烦的。这时，我们就需要使用一些第三方库来帮助我们完成这项工作。
object-deep-diff 简介
object-deep-diff 是一个轻量级、灵活的 JavaScript 库，可用于比较两个对象之间的差异、找到它们之间的差异并返回结果。这个库比较适合前端领域的应用，特别是用于减少对象变更时的代价。
安装
object-deep-diff 是一个 npm 包，可以使用 npm 命令进行安装：
npm install object-deep-diff --save
使用
object-deep-diff 很容易就可以被应用到你的项目中。下面详细介绍如何使用它。
引入
你可以将 object-deep-diff 引入你的 JavaScript 文件中：
const objectDeepDiff = require('object-deep-diff');对象比较
使用 objectDeepDiff() 方法可以比较两个对象的属性，它返回一个对象数组，其中每个对象表示两个对象之间的差异。你也可以传入第三个参数，指定在比较对象属性时要忽略哪些属性。
-- -------------------- ---- ------- ----- ---- - - ----- ------ ---- --- ----------- ----------- ---------- ------------ -------------- - ----- ---- - - ----- ------- ---- --- ----------- ----------- ---------- ---------- --------- - ----- ----------- - -------------------- ------ -------------------------
输出结果如下：
-- -------------------- ---- -------
-
- ----- ---- ----- - ------ -- ---- ------ ---- ------ --
- ----- ---- ----- - ----- -- ---- --- ---- -- --
- ----- ---- ----- - ------------ -- ---- ----------- ---- ---------- --
- ----- ----
----- - ------------ --- --
---- -----------
---- -------- --
- ----- ---- ----- - ------------ --- -- ---- -------------- ---- -------- -
-上面的输出结果中，每个对象表示两个对象差异的属性。其中，kind 属性指示了差异的类型，path 属性指示了差异所在的路径，lhs 属性表示旧对象的值，rhs 属性表示新对象的值。
kind 属性的取值及其含义如下：
N：新的属性D：删除的属性E：修改的属性A：数组操作
另外，你也可以通过指定第三个参数来忽略某些属性：
const diff = objectDeepDiff(obj1, obj2, { ignoredPaths: [ 'name', 'interests' ] });
console.log(diff);输出结果如下：
[
{ kind: 'E', path: [ 'age' ], lhs: 25, rhs: 28 },
{ kind: 'E', path: [ 'occupation' ], lhs: 'Designer', rhs: 'Engineer' }
]对比两个数组
除了可以对比两个对象的属性外，object-deep-diff 还支持比较两个数组，返回数组索引的修改。
const arr1 = [ 1, 2, 4 ];
const arr2 = [ 1, 2, 3, 4 ];
const diff = objectDeepDiff(arr1, arr2, { keyBy: 'index' });
console.log(diff);输出结果如下：
[
{ kind: 'A', index: 2, item: { kind: 'N', rhs: 3 } }
]总结
本文主要介绍了 object-deep-diff 库的使用方法，它是一个非常方便的工具，可以帮助我们比较 JavaScript 对象及数组之间的差异，并返回结果。它在前端开发中非常实用，可以有效地减少对象变更时的代价，并提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9d3d1de16d83a67028