JSのfilterをそろそろ使いこなしたい

そろそろ使いこなすために、メモしておく

map編はこちら

JSのmapをそろそろ使いこなしたい

理解はしているつもりだが、ついついifやfor、forEachで書いてしまう(もちろんダメなわけではないが) そろそろ使いこなすために、メモしておく mapの基礎 例えば、こんな感じで使います 例）配列のデータをそれぞれ3倍する var a...

t-salad.com

2020.10.22

filterの基礎

Array.prototype.filter() - JavaScript | MDN

filter() は Array インスタンスのメソッドで、指定された配列の中から指定された関数で実装されているテストに合格した要素だけを抽出したシャローコピーを作成します。

developer.mozilla.org

例えば、こんな感じで使います
今回は、初めからコールバック関数使っていきます

例）配列から10以上のデータだけ抽出する

var array = [3, 15, 22, 9, 66];
var filtered = array.filter(function (value, index, array) {
return (value >= 10);
});
console.log(filtered); // [15, 22, 66]

• valueは、配列の値
• indexは、インデックス番号
• arrayは、現在処理している配列

Sample1: 偶数だけを抽出する

上の例題と同じ使い方
それぞれの要素に対して、偶数かどうかの比較を行う

var items = [2, 3, 8, 13, 26];
var result = items.filter(function(value) {
return value % 2 === 0;
});
console.log(result); // [2, 8, 26]

Sample2: 配列の重複を除外する

indexOfを使用して、配列に格納されている数値のインデックス番号を取得しています
その後、コールバック関数の引数であるindexと比較すると重複データはfalseとなります

var items = [2,2,3,4,5,5,5,6,7,8,8,9];
var result = items.filter(function (value, index, array) {
return array.indexOf( value ) === index;
})
console.log(result); //  [2, 3, 4, 5, 6, 7, 8, 9]

Sample3: あるオブジェクト配列の要素のうち、別の配列に存在する要素のみを抽出する

ちょっとややこしくしてるけど、簡単に言うと2つの配列に重複するデータのみを抽出するということ

const users = [
{id: '101', name: 'Taro'},
{id: '102', name: 'Jiro'},
{id: '103', name: 'Saburo'},
];
const adminUsers = ['101', '103'];
const activeUsers = users.filter((x) => adminUsers.includes(x.id));
console.log(activeUsers);
// [ { id: '101', name: 'Taro' }, { id: '103', name: 'Saburo' } ]