【応用自在】filterとfindIndexで柔軟な重複処理
JavaScriptの配列オブジェクトから重複を削除する方法
Setオブジェクトを使う
Setオブジェクトは、重複のない要素の集合を保持するデータ構造です。オブジェクトの配列から重複を削除する最も簡単な方法は、Setオブジェクトを使うことです。
const objects = [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 1, name: 'りんご' }, { id: 3, name: 'みかん' }];
const uniqueObjects = new Set(objects);
console.log(uniqueObjects); // Set { { id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 3, name: 'みかん' } }
const uniqueObjectArray = [...uniqueObjects];
console.log(uniqueObjectArray); // [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 3, name: 'みかん' }]
Setオブジェクトを使う方法は、以下の利点があります。
- コードが簡潔で分かりやすい
- 処理速度が速い
- オブジェクトの順序が保持されない
- オブジェクトのプロパティに変更を加えることはできない
filterとfindIndexを使う
filterとfindIndexを使って、オブジェクトの配列から重複を削除する方法もあります。
const objects = [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 1, name: 'りんご' }, { id: 3, name: 'みかん' }];
const uniqueObjects = objects.filter((obj, index, array) => {
const foundIndex = array.findIndex(otherObj => otherObj.id === obj.id && index !== array.indexOf(otherObj));
return foundIndex === -1;
});
console.log(uniqueObjects); // [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 3, name: 'みかん' }]
- コードがSetオブジェクトを使う方法よりも複雑になる
Mapを使う
Mapオブジェクトは、キーと値のペアの集合を保持するデータ構造です。Mapオブジェクトを使って、オブジェクトの配列から重複を削除する方法もあります。
const objects = [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 1, name: 'りんご' }, { id: 3, name: 'みかん' }];
const uniqueObjectMap = new Map();
for (const obj of objects) {
uniqueObjectMap.set(obj.id, obj);
}
const uniqueObjects = [...uniqueObjectMap.values()];
console.log(uniqueObjects); // [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 3, name: 'みかん' }]
その他の方法
上記以外にも、オブジェクトの配列から重複を削除する方法があります。例えば、reduce関数を使って、オブジェクトを1つのオブジェクトにまとめる方法もあります。
どの方法を使うかは、状況によって異なります。Setオブジェクトを使う方法は、最も簡単で処理速度も速いため、多くの場合でおすすめです。ただし、オブジェクトの順序を保持したい場合や、オブジェクトのプロパティに変更を加えたい場合は、filterとfindIndexやMapを使う必要があります。
JavaScriptでオブジェクトの配列から重複を削除するには、Setオブジェクト、filter
JavaScriptでオブジェクトの配列から重複を削除するサンプルコード
Setオブジェクトを使う
const objects = [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 1, name: 'りんご' }, { id: 3, name: 'みかん' }];
const uniqueObjects = new Set(objects);
console.log(uniqueObjects); // Set { { id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 3, name: 'みかん' } }
const uniqueObjectArray = [...uniqueObjects];
console.log(uniqueObjectArray); // [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 3, name: 'みかん' }]
このコードでは、まず objects 配列を Set オブジェクトに変換します。Set オブジェクトは、重複のない要素の集合を保持するデータ構造です。その後、Set オブジェクトをスプレッド構文を使って配列に戻します。
filterとfindIndexを使う
const objects = [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 1, name: 'りんご' }, { id: 3, name: 'みかん' }];
const uniqueObjects = objects.filter((obj, index, array) => {
const foundIndex = array.findIndex(otherObj => otherObj.id === obj.id && index !== array.indexOf(otherObj));
return foundIndex === -1;
});
console.log(uniqueObjects); // [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 3, name: 'みかん' }]
このコードでは、filter 関数を使って、重複していないオブジェクトのみを新しい配列に格納します。filter 関数の引数として渡されるコールバック関数は、配列の各要素に対して呼び出されます。コールバック関数は、以下の条件を満たす場合に true を返し、そうでない場合は false を返します。
- オブジェクトの
idプロパティが、これまでに処理された他のオブジェクトのidプロパティと一致しない - オブジェクトのインデックスが、最初に処理されたオブジェクトのインデックスと一致しない
Mapを使う
const objects = [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 1, name: 'りんご' }, { id: 3, name: 'みかん' }];
const uniqueObjectMap = new Map();
for (const obj of objects) {
uniqueObjectMap.set(obj.id, obj);
}
const uniqueObjects = [...uniqueObjectMap.values()];
console.log(uniqueObjects); // [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 3, name: 'みかん' }]
このコードでは、Map オブジェクトを使って、オブジェクトの id プロパティをキーとして、オブジェクトを値として格納します。Map オブジェクトは、キーと値のペアの集合を保持するデータ構造です。その後、Map オブジェクトの values() メソッドを使って、値の配列を取得します。
JavaScriptでオブジェクトの配列から重複を削除するその他の方法
reduce 関数を使って、オブジェクトの配列を1つのオブジェクトにまとめ、そのオブジェクトのプロパティをキーとして、オブジェクトを値として格納することができます。その後、そのオブジェクトの値の配列を取得することで、重複を削除することができます。
const objects = [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 1, name: 'りんご' }, { id: 3, name: 'みかん' }];
const uniqueObjects = objects.reduce((acc, obj) => {
acc[obj.id] = obj;
return acc;
}, {});
const uniqueObjectArray = Object.values(uniqueObjects);
console.log(uniqueObjectArray); // [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 3, name: 'みかん' }]
forEachとindexOfを使う
forEach ループと indexOf メソッドを使って、オブジェクトの配列を反復処理し、重複しているオブジェクトを削除することができます。
const objects = [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 1, name: 'りんご' }, { id: 3, name: 'みかん' }];
const uniqueObjects = [];
objects.forEach(obj => {
if (uniqueObjects.indexOf(obj) === -1) {
uniqueObjects.push(obj);
}
});
console.log(uniqueObjects); // [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 3, name: 'みかん' }]
ライブラリを使う
JavaScriptには、オブジェクトの配列から重複を削除するためのライブラリがいくつかあります。例えば、lodash: https://lodash.com/ や Underscore: https://underscorejs.org/ などのライブラリを使うことができます。
const _ = require('lodash');
const objects = [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 1, name: 'りんご' }, { id: 3, name: 'みかん' }];
const uniqueObjects = _.uniq(objects);
console.log(uniqueObjects); // [{ id: 1, name: 'りんご' }, { id: 2, name: 'ぶどう' }, { id: 3, name: 'みかん' }]
自分に合った方法を見つけて、ぜひ試してみてください。
javascript arrays object
