はじめに
JavaScriptでオブジェクトの配列同士の比較で詰まったので、備忘録として残します。
ベストな方法ではないかもしれませんが、1つのやり方として誰かの参考になればとも思います。
やりたいこと
以下の二つの配列があったと仮定する。
「expense1」と「expense2」で重複するデータだけ抽出したい。
main.js
const expense1 = [
{ name: '住居費', const: 50000 },
{ name: '水道光熱費', cost: 10000 },
{ name: '保険料', cost: 20000 },
{ name: '通信費', cost: 12000 },
{ name: '美容費', cost: 8000 },
];
const expense2 = [
{ name: '住居費', const: 50000 },
{ name: '教育費', cost: 15000 },
{ name: '水道光熱費', cost: 10000 },
{ name: '交際費', cost: 9000 },
{ name: '雑費', cost: 3000 },
];
使用するメソッド
-
filterメソッド
配列から条件に一致した要素のみを抽出し新しく配列を作成。 -
findメソッド
配列から条件に一致した"最初の値"を返す。
複数ある場合は最初にマッチした要素を返す。
重複したデータのみ抽出
main.js
const arrayComparison = (expense1, expense2) => {
const duplication = expense1.filter((cost1) => {
console.log(cost1) //expenseItem1の中身を1つずつ取り出す
//{name: '住居費', cost: 50000}
//{name: '水道光熱費', cost: 10000}...etc
return expense2.find((cost2) => {
console.log(cost2) //expenseItem2の中身を1つずつ取り出す
//{name: '住居費', cost: 50000}
//{name: '教育費', cost: 15000}...etc
return cost2.name === cost1.name; //nameが同一の最初の要素を返す
});
});
return duplication;
};
結果↓
main.js
[
{ name: '住居費', const: 50000 },
{ name: '水道光熱費', cost: 10000 },
];
ちなみに、省略して記述する方法は下記の通り
main.js
const arrayComparison = (expense1, expense2) => {
const duplication = expense1.filter((cost1) =>
expense2.find((cost2) => cost2.name === cost1.name)
);
//結果は上記の通り
};
);
差分データのみ抽出
上記を応用して差分データのみを抽出する方法
追加で使用するメソッド
-
mapメソッド
配列のデータを加工して新たな配列を作成。 -
includesメソッド
配列や文字列の中から特定の要素、文字列が含まれているかチェック。
差分を抽出する関数
main.js
const arrayComparison = (expense1, expense2) => {
const duplication = expense1.filter((cost1) =>
expense2.find((cost2) => cost2.name === cost1.name)
);
const duplicationName = duplication.map((cost) => {
return cost.name;
}); //duplicationからnameデータだけ抽出した配列を作成
//['住居費', '水道光熱費']
const expenseDiff = expense1.filter((cost) => {
return !duplicationName.includes(cost.name);
});
// expense1内にduplicationNameが含まれていないデータのみを抽出
return expenseDiff;
};
結果↓
main.js
[
{name: '保険料', cost: 20000}
{name: '通信費', cost: 12000}
{name: '美容費', cost: 8000}
];