【JavaScript】【for文駆逐作戦】filterメソッドの使い方

8547 ワード
初心者 es6 JavaScript ゆるふわ JavaScript テキストリンク

この記事の内容

  • javaScriptの「filter」の使い方について
  • for文は駆逐していく方針

なぜ駆逐するのか

  • 読みづらいし、ナウくないから。
  • 単純にfilterって書かれてたら、「フィルタかけてんだな」って他の人が気付きやすい（可読性UP↑）

さっそく書き方

いつもの「for文」


var products = [
  {name: 'PS4', type: 'SONY', quantity: 1, price:30000},
  {name: 'Switch', type: 'NINTENDO', quantity: 1, price:32000},
  {name: 'DreamCast', type: 'SEGA', quantity: 1, price:40000},
  {name: 'ゲームボーイカラー', type: 'NINTENDO', quantity: 2, price:42000},
];

var resultProducts = [];

  for (var i = 0;  i < products.length;  i++ ) {
    if (products[i].type === 'NINTENDO') {
      resultProducts.push(products[i]);
    }
  }
console.log(resultProducts);
//[{name: 'Switch', type: 'NINTENDO', quantity: 1, price:32000},{name: 'ゲームボーイカラー', type: 'NINTENDO', quantity: 2, price:42000}]
  • for文の中でif文で条件判定し、空の配列に格納している
  • ↑ってみると本当はただフィルタリングしたいだけなのに、、大層なことやってるでって感じがする😇

最新の「filter文」


var products = [
  {name: 'PS4', type: 'SONY', quantity: 1, price:30000},
  {name: 'Switch', type: 'NINTENDO', quantity: 1, price:32000},
  {name: 'DreamCast', type: 'SEGA', quantity: 1, price:40000},
  {name: 'ゲームボーイカラー', type: 'NINTENDO', quantity: 2, price:42000},
];

// typeがNINTENDOでpriceが40000以上のものをフィルターしたい！

var result = products.filter(function(product){
  return product.type === 'NINTENDO' &&
    product.price > 40000;
});

console.log(result); 
//  {name: 'ゲームボーイカラー', type: 'NINTENDO', quantity: 2, price:42000}

補足　（filterの特徴）

  • コールバック関数の戻り値は、「true」か「false」を返す
  • 「true」だった場合、要素が配列に入る！（フィルタリングしてる）
  • そもそも「return」を忘れてはいけない

まとめ

  • もはやfor文で表現する方が面倒臭くなってきた
  • 役割によって、メソッドを使い分けた方が断然いい気がしてきました。
  • そしてプロパティの取り出しを自由自在にすることが、真のJavaScripterになるということと悟りました。
Android実戦テクニックの四十三:スレッドの終了による