前言
前端工程中，我们经常需要对比两个版本之间的不同之处，这时候比较工具就派上了用场。当然，我们也可以手写 JS 函数来实现比较功能，但如果对比数据量大，散居在各处，那么自己实现比较会变得很困难。
于是，开源社区中就出现了许多比较工具库，本文介绍的 @conglomerate/diff 就是其中之一。
@conglomerate/diff 简介
@conglomerate/diff 是一个纯 JavaScript 编写的工具库，用于计算对象、数组、原始类型值和其他可比较数据结构之间的区别。
该库支持：
- 区分新旧值、添加和删除属性
- 检测对象和数组的嵌套属性的更改
- 使用自定义比较器进行高级比较
安装
@conglomerate/diff 可以通过 npm 安装，命令如下：
npm install @conglomerate/diff --save
使用
@conglomerate/diff 导出了一个 diff 函数，接受两个参数，分别为旧值和新值。调用 diff 函数后会返回一个 diff 对象，其中包含了两个重要的属性：
- diffs: 表示变化的数组，包含了每一个值不同的比较结果
- isEqual：如果对象一致，返回 true；否则，返回 false
下面我们就结合示例代码来说明如何使用 @conglomerate/diff。
示例代码
-- -------------------- ---- ------- ----- - ---- - - ----------------------------- ----- ------- - - --- -- ----- ------ ---- --- -------- ------ ------ -------- - ------ --------- ------ ------------ - - ----- ------- - - --- -- ----- ------ -------- ------ ------ -------- - ------ --------- -------- ----- -- ------- ------ - ----- ------ - ------------- -------- -------------------展开代码
以上代码定义了两个对象 oldData 和 newData，我们期望找到它们之间的区别。在调用 diff 函数后，控制台将会输出对比结果：
-- -------------------- ---- ------- - ------ - - ----- ---- ---- ------- ---- ------ ---- ----- -- - ----- ---- ---- ------ ---- --- ---- --------- -- - ----- ---- ----- ------------ ------ -- ----- - ----- ---- ---- ----- ---- ---- - -- - ----- ---- ---- -------- ---- --------- ---- ---------- ----- ----------- -- - ----- ---- ---- ---------- ---- ---------- ---- ------ ----- ----------- -- - ----- ---- ---- --------- ---- ---------- ---- ------ - -- -------- ----- -展开代码
我们可以看到，@conglomerate/diff 通过 diffs 属性返回了多个差异对象，包括新建、删除、编辑的往前对象属性的信息。
其中，kind 表示差异的类型，有以下四种取值：
- N - 新建的属性
- D - 已删除的属性
- E - 修改的属性
- A - 数组类型的属性，有索引值和元素的新旧值
lhs 和 rhs 分别表示差异的左右两个值。比如 kind 为 "E"，表示左右两个值不同，lhs 为旧值，rhs 为新值。
总结
@conglomerate/diff 是一个适用于前端工程的开源工具库。它可以方便地比较对象、数组、原始类型值等不同的数据结构，支持多种比较方式。
在实际开发中，我们可以通过直接调用该库提供的 diff 函数，来快速找到数据之间的区别，从而对数据进行更加高效安全的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/115287
