配列から特定の要素を取り除く ―ver. ES2016―

配列から特定の要素を乗り除く (例. [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を積極的に使おう！