英文 | https://javascript.plainenglish.io/7-methods-for-comparing-arrays-in-javascript-88f10c071897

翻译 | web前端开法公众号

我一直喜欢报纸之类的东西，可以在较短的时间内提供足够的信息。在这里，我为前端开发列了一个比较数组的方法清单。介绍一些基于“属性”值对数组进行排序的方法。

我们可能会遇到一些其他方式来比较两个对象数组并发现它们的差异，或者比较和删除重复项，或者比较两个对象数组并更新对象数组的属性，或者在比较两个对象之后创建具有唯一数据的新数组的方法对象数组。让我们看看比较对象和执行操作的不同方法是什么。

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

我们确实需要比较两个不同的对象数组，并希望在两个对象匹配特定属性值的情况下合并这两个对象。可以使用filter()方法来实现。

该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 }
];

让我们创建函数:

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则返回。

让我们创建测试数据:

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 }
];

让我们创建函数:

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、比较对象数组并找到唯一的对象

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

让我们创建测试数据:

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 }
];

让我们创建函数:

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 }];

让我们创建函数:

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 }
];

让我们创建函数:

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 }
];

让我们创建函数:

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、比较对象并找到唯一值

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

让我们创建测试数据：

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}}

总结

以上就是8种JavaScript比较数组的方法，希望对你有所帮助，最后，感谢阅读，祝编程愉快！

学习更多技能

请点击下方公众号