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

プログラミング

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

map編はこちら

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

filterの基礎

Array.prototype.filter()
filter() メソッドは、与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成します。

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

例)配列から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' } ]

コメント

タイトルとURLをコピーしました