2021系列——JavaScript比较数组的7种方法

欢迎大家来到IT世界,在知识的湖畔探索吧!

本文我会介绍一些基于Property值对数组进行排序的方法，希望这些技巧能够对你2021年的JS代码编写有点点帮助。

多多少少在JS中，我们会碰到某种方式来比较两个对象数组并找出差异，当然也可能是比较并删除重复项，还可能是比较两个对象数组并更新对象数组的属性，再有可能呢，是需要比较两个对象数组后使用唯一数据创建一个新数组。

下面让我们看看比较对象和执行操作的不同方法。

1 . 比较两个对象数组，删除重复项，根据属性合并对象

工作中存在这样的情况，需要比较下两个不同的对象数组，而且如果两个对象匹配特定的属性值，则希望合并这两个对象。可以使用过滤方法来实现：

用filter()方法创建一个新数组，其中所有元素都通过了以该函数为条件实现的测试。可查看来源，

相关链接：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

我们先创建测试数据，

let array1 = [ { id: "50", active: "a", value: 10 }, { id: "51", active: "a", value: 11 } ]; let array2 = [ { id: "53", active: "a", value: 10 }, { id: "51", active: "a", value: 11 }, { id: "52", active: "a", value: 13 } ];

欢迎大家来到IT世界,在知识的湖畔探索吧!

再创建函数，

欢迎大家来到IT世界,在知识的湖畔探索吧!let res = array2.filter(val => array1.some(({ value }) => (val.value as any) === (value as any)) ); console.log("1", JSON.stringify(res)); //[{"id":"53","active":"a","value":10}, {"id":"51","active":"a","value":11}]

2 . 比较两个对象数组，合并和更新值（假设数组3,4共享相同的ID）

有时我们被要求将两个不同的属性与新的属性值合并；我们可以使用map创建一组新的对象数组，同时使用find方法在更新新值之前匹配特定属性。

该map()方法创建一个新数组，其中填充了在调用数组中每个元素上调用一个以函数为条件的结果。

该find()方法返回所提供的数组中满足以测试函数为条件的第一个元素的值。如果没有值满足测试函数，则undefined会被返回。可查看来源，

相关链接：
https://developer.mozilla.org/en-US/docs/Web/JavaScript

先创建测试数据，

let array3 = [ { id: "50", active: "a", value: 12 }, { id: "51", active: "a", value: 15 } ]; let array4 = [ { id: "50", active: "a", value: 10 }, { id: "51", active: "a", value: 11 }, { id: "52", active: "a", value: 13 } ];

让我们来创建函数，

欢迎大家来到IT世界,在知识的湖畔探索吧!let arr = []; array3.map(id => arr.push({ id: id.id, newValue: array4.find(o => o.id === id.id).value + 2 }) ); console.log("2", JSON.stringify(arr)); //[{"id":"50","newValue":12},{"id":"51","newValue":13}]

3 . 比较对象数组并找到唯一的对象

如果我们需要比较两个对象数组，并检查其中哪些是唯一对象，则可以使用过滤器来实现这些功能。

仍旧先创建测试数据，

const array5 = [ { id: "50", active: "a", value: 12 }, { id: "51", active: "a", value: 15 } ]; const array6 = [ { id: "50", active: "a", value: 12 }, { id: "51", active: "a", value: 15 }, { id: "52", active: "a", value: 13 } ];

再创建函数，

欢迎大家来到IT世界,在知识的湖畔探索吧!const ids = array5.map(e => e.id); let filtered = array6.filter(e => ids.includes(e.id)); console.log("3", JSON.stringify(filtered)); //[{"id":"50","active":"a","value":12}, {"id":"51","active":"a","value":15}]

4 . 根据匹配的值比较和更新属性

当我们需要比较两个对象数组，并根据匹配的值更新特定属性时，可以使用这些函数。

创建测试数据，

const array7 = [ { id: "50", active: "a", value: 12 }, { id: "51", active: "a", value: 15 } ]; const array8 = [{ id: "50", active: "a", value: 12 }];

创建函数，

欢迎大家来到IT世界,在知识的湖畔探索吧!const idSet = new Set(array8.map(o => o.id)); const res1 = array7.map(o => ({ ...o, value: idSet.has(o.id) ? "0" : o.value })); console.log("4", JSON.stringify(res1)); //[{"id":"50","active":"a","value":"0"}, {"id":"51","active":"a","value":15}]

5 . 比较两个数组对象并获得差异

当我们要比较两个不同的对象数组并得到它们之间的差异时，可以使用这些函数。

创建测试数据

let a = [ { id: "50", active: "a", value: 10 }, { id: "51", active: "a", value: 11 } ]; let b = [ { id: "50", active: "a", value: 10 }, { id: "51", active: "a", value: 11 }, { id: "52", active: "a", value: 13 } ];

创建函数

欢迎大家来到IT世界,在知识的湖畔探索吧!let valuesArray1 = a.reduce(function(a, c) { a[c.value] = c.value; return a; }, {}); let valuesArray2 = b.reduce(function(a, c) { a[c.value] = c.value; return a; }, {}); var result = a .filter(function(c) { return !valuesArray2[c.value]; }) .concat( b.filter(function(c) { return !valuesArray1[c.value]; }) ); console.log("5", result); //[{"id":"52","active":"a","value":13}] //shorthand let ab = b.filter(o => !a.find(o2 => o.id === o2.id)); console.log("6", ab);

6 . 比较对象的两个数组合并，并删除重复项

如果我们需要比较两个对象数组，从它们中删除重复项，并合并两个数组，则可以使用此方法。

创建测试数据，

let arr1 = [ { id: "50", active: "a", value: 10 }, { id: "51", active: "a", value: 11 } ]; let arr2 = [ { id: "50", active: "a", value: 10 }, { id: "51", active: "a", value: 11 }, { id: "52", active: "a", value: 13 } ];

创建函数，

欢迎大家来到IT世界,在知识的湖畔探索吧!const arr1IDs = new Set(arr1.map(({ id }) => id)); const combined = [...arr1, ...arr2.filter(({ id }) => !arr1IDs.has(id))]; console.log(JSON.stringify(combined)); //[{"id":"50","active":"a","value":10}, {"id":"51","active":"a","value":11}, {"id":"52","active":"a","value":13}]

7 . Lodash

Lodash支持_differenceBy和 _differenceWith查找两个数组之间差异的方法。

let lodashtest1 = [{ id: "50" }, { id: "51" }]; let lodashtest2 = [{ id: "50" }, { id: "51" }, { id: "52" }]; let lodashresult = _.differenceBy(lodashtest2, lodashtest1, "id"); console.log("7", JSON.stringify(lodashresult)); //[{"id":"52"}] let dif = _.differenceWith(lodashtest2, lodashtest1, _.isEqual); console.log("8",JSON.stringify(dif)); //[{"id":"52"}]

8 . 好吧来个7+1，比较对象并找到唯一值

当我们使用嵌套对象时，有时很难弄清楚我们如何迭代和比较两个嵌套对象并在其中获得一些唯一的对象。我们可以使用Object.keys和Object.values方法进行迭代。

创建测试数据，

欢迎大家来到IT世界,在知识的湖畔探索吧!let obj1 = { val1: "test", stream: { prop1: false, prop2: true } }; let obj2 = { val1: "test", stream: { prop1: true, prop2: true } }; interface Data { stream: { [key: string]: boolean }; }

创建函数：

function objFilter(objA: Data, objB: Data): Data { let out: Data = { stream: {} }; Object.keys(objA.stream).filter((value, idx) => Object.values(objA.stream)[idx] === Object.values(objB.stream)[idx] ? (out.stream[value] = Object.values(objA.stream)[idx]) : false ); return out; } console.log(JSON.stringify(objFilter(obj1, obj2))); //prop2 //{"stream":{"prop2":true}}

另外，再送小礼，推荐下StackBlitz，它是一款主要面向 Web 开发者的在线 IDE，移植了很多 VS Code 的特性与功能，非常的方便易用。

相关链接：
https://stackblitz.com/edit/compare-objects-javascript