配列から特定の要素を乗り除く (例. [a, b, X, d] -> [a, b, d]) 方法を複数紹介する。
一覧
- Array.filter (ES2016)
- Array.indexOf + Array.splice
詳細
Array.filter (ES2016)
EcmaScript2016で新登場した、Array.filterメソッドを利用する方法.
// ary配列から3を除去する. let ary = [1,2,3,4,5]; let filtered = ary.filter((element) => element!==3); console.log(filtered) // [1,2,4,5]
filterメソッドは関数を引数に取る.
関数は配列の要素を引数にとり、trueまたはfalseを返す関数.
trueを返した要素のみによる配列をfilterメソッドは返す.
例では、
function (element){ return (element!==3) } // の省略表記である (element) => element!==3
をfilterメソッドの引数に渡した.
elemnt!==3 は、elementが3ではないときにtrueと評価されるため、3がfilterで除かれた.
ポイント1: filterメソッドは元の配列を変化させないよ
filter は呼び出された配列を変化させません。MDN
ポイント2: 要素がオブジェクトでも、うまいことfilterできるよ
let ary = [ {name:Panda, year:20}, {name:Usagi, year:30}, {name:Gorira, year:40} ] //オブジェクトの配列 let filtered = ary.filter((obj) => obj.year < 40); console.log(filtered); // [ {name:Panda, year:20}, {name:Usagi, year:30} ] 年寄りゴリラが弾かれた
filterの引数が関数であるため、柔軟性がすごい.
filterメソッドでうまくfilterできないことはないんじゃないかな?
Array.indexOf + Array.splice
ES2016がなくても動く、昔ながらのやり口.
数年したら、不要なやり方になると思う、filterほど柔軟でもないし(完全一致を求められる).
Array.indexOf(): 引数と一致する要素が何番目か(index)を教えてくれる
Array.splice(): 配列をほどいて繋ぎなおす(スプライス)する関数. 除去する要素のindexを指定し、そこを除いて残りをつなぎなおす
まとめ
Array.prototype.filterを積極的に使おう!