天天看點
傳回

8種JavaScript比較數組的方法

8種JavaScript比較數組的方法

英文 | 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}}
對象數組 數組 json
上一篇: Vulkan Cascade Shadow Map的故事
下一篇: Vulkan Barriers

繼續閱讀