8種JavaScript比較陣列的方法

1、比較兩個物件陣列，刪除重複項，根據屬性合併物件

我們確實需要比較兩個不同的物件陣列，並希望在兩個物件匹配特定屬性值的情況下合併這兩個物件。可以使用filter()方法來實現。該filter()方法建立一個新陣列，其中所有元素都通過了由提供的功能實現的測試。

讓我們建立測試資料:

let array1 = [
{ id: "50", value: 10 },
{ id: "51", value: 11 }
];
let array2 = [
{ id: "53", value: 10 },
{ id: "51", value: 11 },
{ id: "52", 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","value":10},{"id":"51","value":11}]
 

2、比較兩個物件陣列，合併和更新值（假設陣列3,4共享相同的ID）

有時我們確實會有這樣的需求，將兩個不同的屬性與新的屬性值合併。我們可以使用map()建立一組新的物件陣列，並且可以使用find()方法在更新新值之前匹配特定屬性。
1、該map()方法建立一個新陣列，其中填充了在呼叫陣列中每個元素上呼叫提供的函式的結果。
2、該find()方法返回提供的陣列中滿足提供的測試功能的第一個元素的值。如果沒有值滿足測試功能，undefined則返回。

讓我們建立測試資料:

let array3 = [
{ id: "50",  value: 12 },
{ id: "51",  value: 15 }
];
let array4 = [
{ id: "50",  value: 10 },
{ id: "51", value: 11 },
{ id: "52", value: 13 }
];
// 建立函式
let arr = array3.map(id =>
    return {
        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 = [
{ key: 1, value: 12 },
{ key: 2, value: 15 }
];
const array6 = [
{ key: 1, value: 12 },
{ key: 2, value: 15 },
{ key: 3, value: 13 }
];
//  建立函式
const ids = array5.map(e => e.key);
let filtered = array6.filter(e => ids.includes(e.key));
console.log("3", JSON.stringify(filtered));
//[{"key":"1","value":12},{"key":"2","value":15}]
 

4、根據匹配的值比較和更新屬性

當我們要比較兩個物件陣列並根據匹配的值更新特定的屬性時，可以使用這些函式。

讓我們建立測試資料:

const array7 = [
{ id: "50", value: 12 },
{ id: "51",  value: 15 }
];
const array8 = [{ id: "50",  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", "value":"0"},{"id":"51","value":15}]

5、比較兩個陣列物件並獲得差異

當我們要比較兩個不同的物件陣列並得到它們之間的差異時，可以使用這些函式。

讓我們建立測試資料:

let a = [
{ id: "50",  sysNo: 10 },
{ id: "51", sysNo: 11 }
];
let b = [
{ id: "50",  sysNo: 10 },
{ id: "51", sysNo: 11 },
{ id: "52", sysNo: 13 }
];
// 建立函式
let valuesArray1 = a.reduce(function(a, c) {
    a[c.sysNo] = c.sysNo;
    return a;
}, {}); // valuesArray1: {10: 10, 11: 11}
let valuesArray2 = b.reduce(function(a, c) {
    a[c.sysNo] = c.sysNo;
    return a;
}, {}); // valuesArray2: {10: 10, 11: 11, 13: 13}
var result = a
    .filter(function(c) {
        return !valuesArray2[c.sysNo];
    }) // []
    .concat(
        b.filter(function(c) {
            return !valuesArray1[c.sysNo];
        }) // [{id: "52", sysNo: 13}]
    );
console.log("5", result);
//[{"id":"52","sysNo":13}]
//shorthand
let ab = b.filter(o => !a.find(o2 => o.id === o2.id));
console.log("6", ab);

6、比較物件的兩個數組合並，並刪除重複項

如果我們有要求比較兩個物件陣列並從它們中刪除重複項併合並兩個陣列，則可以使用此方法。

讓我們建立測試資料:

let arr1 = [
{ id: "1",  value: 10 },
{ id: "2",  value: 11 }
];
let arr2 = [
{ id: "1", value: 10 },
{ id: "2", value: 11 },
{ id: "3", 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":"1","value":10},{"id":"2","value":11},{"id":"3","value":13}]

7、Lodash

Lodash支援_differenceBy和 _differenceWith查詢兩個陣列之間差異的方法。

let lodashtest1 = [{ key: "1" }, { key: "2" }];
let lodashtest2 = [{ key: "1" }, { key: "2" }, { key: "3" }];
let lodashresult = _.differenceBy(lodashtest2, lodashtest1, "key");
console.log("7", JSON.stringify(lodashresult));
//[{"key":"3"}]
let dif = _.differenceWith(lodashtest2, lodashtest1, _.isEqual);
console.log("8",JSON.stringify(dif));
//[{"key":"3"}]

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