APIをつかっていると特定のデータ配列を特定のデータ配列で絞り込みたいことがたたあるので方法をまとめておく
目次
1. 基本構造
|
1 2 3 4 5 6 |
const filteredArray = targetArray.filter(target => filterArray.some(filter => // フィルタ条件をここに記述 ) ); |
2. 例: 条件に一致するキーと値のペアでフィルタリング
シナリオ:
targetArray: フィルターを適用する対象の配列。filterArray: フィルター条件が入った配列。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const targetArray = [ { id: 1, name: 'Alice', age: 25 }, { id: 2, name: 'Bob', age: 30 }, { id: 3, name: 'Charlie', age: 35 }, ]; const filterArray = [ { id: 1 }, // idが1のものをフィルタ条件とする { id: 3 }, // idが3のものをフィルタ条件とする ]; // idを基準にフィルタリング const filteredArray = targetArray.filter(target => filterArray.some(filter => target.id === filter.id) ); console.log(filteredArray); // 結果: [{ id: 1, name: 'Alice', age: 25 }, { id: 3, name: 'Charlie', age: 35 }] |
3. 複数のキーでフィルタリング
シナリオ:
フィルター条件が複数のキーを持っている場合。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const targetArray = [ { id: 1, name: 'Alice', age: 25 }, { id: 2, name: 'Bob', age: 30 }, { id: 3, name: 'Charlie', age: 35 }, { id: 4, name: 'Alice', age: 30 }, ]; const filterArray = [ { name: 'Alice', age: 25 }, // nameがAliceかつageが25 { name: 'Charlie', age: 35 }, // nameがCharlieかつageが35 ]; // 複数キーでフィルタリング const filteredArray = targetArray.filter(target => filterArray.some(filter => Object.keys(filter).every(key => target[key] === filter[key]) ) ); console.log(filteredArray); // 結果: [{ id: 1, name: 'Alice', age: 25 }, { id: 3, name: 'Charlie', age: 35 }] |
4. 条件が部分一致（部分的にマッチするか）
シナリオ:
- フィルター条件が部分的にマッチすればOK（例: 一部のキーだけ一致）。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
const targetArray = [ { id: 1, name: 'Alice', age: 25 }, { id: 2, name: 'Bob', age: 30 }, { id: 3, name: 'Charlie', age: 35 }, { id: 4, name: 'Alice', age: 30 }, ]; const filterArray = [ { name: 'Alice' }, // nameがAliceに一致するもの { age: 35 }, // ageが35に一致するもの ]; // 部分一致でフィルタリング const filteredArray = targetArray.filter(target => filterArray.some(filter => Object.keys(filter).some(key => target[key] === filter[key]) ) ); console.log(filteredArray); // 結果: [ // { id: 1, name: 'Alice', age: 25 }, // { id: 3, name: 'Charlie', age: 35 }, // { id: 4, name: 'Alice', age: 30 } // ] |
5. パフォーマンスの最適化（Setを使う）
対象配列が非常に大きい場合、Setを使ってフィルター条件を高速にチェックできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const targetArray = [ { id: 1, name: 'Alice', age: 25 }, { id: 2, name: 'Bob', age: 30 }, { id: 3, name: 'Charlie', age: 35 }, { id: 4, name: 'Alice', age: 30 }, ]; const filterArray = [ { id: 1 }, { id: 3 }, ]; // Setでidを高速にチェック const filterSet = new Set(filterArray.map(filter => filter.id)); const filteredArray = targetArray.filter(target => filterSet.has(target.id)); console.log(filteredArray); // 結果: [{ id: 1, name: 'Alice', age: 25 }, { id: 3, name: 'Charlie', age: 35 }] |
まとめ
- シンプルなキーでの一致:
filter+some - 複数キー:
everyで完全一致チェック - 部分一致:
someで一部の条件を許容 - 高速化: フィルター条件が単一キーの場合、
Setで効率的に処理
コメント