8種JavaScript比較數(shù)組的方法
我們可能會(huì)遇到一些其他方式來比較兩個(gè)對(duì)象數(shù)組并發(fā)現(xiàn)它們的差異，或者比較和刪除重復(fù)項(xiàng)，或者比較兩個(gè)對(duì)象數(shù)組并更新對(duì)象數(shù)組的屬性，或者在比較兩個(gè)對(duì)象之后創(chuàng)建具有唯一數(shù)據(jù)的新數(shù)組的方法對(duì)象數(shù)組。讓我們看看比較對(duì)象和執(zhí)行操作的不同方法是什么。
1、比較兩個(gè)對(duì)象數(shù)組，刪除重復(fù)項(xiàng)，根據(jù)屬性合并對(duì)象
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 }];
讓我們創(chuàng)建函數(shù):
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、比較兩個(gè)對(duì)象數(shù)組，合并和更新值（假設(shè)數(shù)組3,4共享相同的ID）
有時(shí)我們確實(shí)會(huì)有這樣的需求，將兩個(gè)不同的屬性與新的屬性值合并。我們可以使用map()創(chuàng)建一組新的對(duì)象數(shù)組，并且可以使用find()方法在更新新值之前匹配特定屬性。
該map()方法創(chuàng)建一個(gè)新數(shù)組，其中填充了在調(diào)用數(shù)組中每個(gè)元素上調(diào)用提供的函數(shù)的結(jié)果。
該find()方法返回提供的數(shù)組中滿足提供的測(cè)試功能的第一個(gè)元素的值。如果沒有值滿足測(cè)試功能，undefined則返回。
讓我們創(chuàng)建測(cè)試數(shù)據(jù):
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 }];
讓我們創(chuàng)建函數(shù):
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、比較對(duì)象數(shù)組并找到唯一的對(duì)象
如果我們要比較兩個(gè)對(duì)象數(shù)組并檢查其中哪些是唯一對(duì)象，則可以使用filter()來實(shí)現(xiàn)這些功能。
讓我們創(chuàng)建測(cè)試數(shù)據(jù):
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 }];
讓我們創(chuàng)建函數(shù):
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、根據(jù)匹配的值比較和更新屬性
當(dāng)我們要比較兩個(gè)對(duì)象數(shù)組并根據(jù)匹配的值更新特定的屬性時(shí)，可以使用這些函數(shù)。
讓我們創(chuàng)建測(cè)試數(shù)據(jù):
const array7 = [{ id: "50", active: "a", value: 12 },{ id: "51", active: "a", value: 15 }];const array8 = [{ id: "50", active: "a", value: 12 }];
讓我們創(chuàng)建函數(shù):
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、比較兩個(gè)數(shù)組對(duì)象并獲得差異
當(dāng)我們要比較兩個(gè)不同的對(duì)象數(shù)組并得到它們之間的差異時(shí)，可以使用這些函數(shù)。
讓我們創(chuàng)建測(cè)試數(shù)據(jù):
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 }];
讓我們創(chuàng)建函數(shù):
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}]//shorthandlet ab = b.filter(o => !a.find(o2 => o.id === o2.id));console.log("6", ab);
6、比較對(duì)象的兩個(gè)數(shù)組合并，并刪除重復(fù)項(xiàng)
如果我們有要求比較兩個(gè)對(duì)象數(shù)組并從它們中刪除重復(fù)項(xiàng)并合并兩個(gè)數(shù)組，則可以使用此方法。
讓我們創(chuàng)建測(cè)試數(shù)據(jù):
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 }];
讓我們創(chuàng)建函數(shù):
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查找兩個(gè)數(shù)組之間差異的方法。
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、比較對(duì)象并找到唯一值
當(dāng)我們使用嵌套對(duì)象時(shí)，有時(shí)很難弄清楚我們?nèi)绾蔚捅容^兩個(gè)嵌套對(duì)象并在其中獲得一些唯一的對(duì)象。我們可以使用Object.keys和Object.values方法進(jìn)行迭代。
讓我們創(chuàng)建測(cè)試數(shù)據(jù)：
let obj1 = {val1: "test",stream: { prop1: false, prop2: true }};let obj2 = {val1: "test",stream: { prop1: true, prop2: true }};interface Data {stream: { [key: string]: boolean };}
讓我們創(chuàng)建函數(shù)：
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}}
總結(jié)
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
