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

この記事の内容

• javaScriptのES６で正式採用された「find」の使い方について
• for文は駆逐していく方針

なぜ駆逐するのか

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

さっそく書き方

いつもの「for文」

var users = [
    { name : 'コーヒー' },
    { name : '紅茶', id : 1},
    { name : '緑茶' },
    { name : '紅茶', id : 10}
 ];

var user ;

for (var i = 0;  i < users.length; i++) {
  if ( users[i].name === '紅茶') {
    user = users[i];
    break;
  }
}

console.log(user); //{ name : '紅茶', id : 1}

• for文の中でif文で条件判定し、空の変数に格納している
• ↑ってみると本当はただ検索したいだけなのに、、大層なことやってるでって感じがする😇
• breakしてるけど、もし検索したいワードが配列の最後にあったら、、そこまでfor文を回さないといけない。（時間かかるよね）

最新の「find文」

var users = [
  	{ name : 'コーヒー' },
    { name : '紅茶', id : 1},
  	{ name : '緑茶' },
    { name : '紅茶', id : 10}
 ];

var result = users.find(function(user){
  return user.name === '紅茶'
});

console.log(result); //{"name":"紅茶", id = 1}

もういっこfind文（プチ応用）

var drinks = [
  	{ id : 1, name : 'コーヒー' },
    { id : 2, name : '紅茶'},
  	{ id : 3, name : '緑茶'},
    { id : 4, name : '水'}
 ];
 
var drinkTaste = {drinkId : 2, Taste : 'good'}

// DrinkInfoのfunctionを定義する
function DrinkInfo(drinks, drinkTaste){
	return drinks.find(function(drink){
  	  return drink.id === drinkTaste.drinkId;
  });
}

 console.log(DrinkInfo(drinks, drinkTaste));
 //{id: 2, name: "紅茶"}

2つのオブジェクトを比較して、findしてる。
こちらの方がちょっぴり実用的な感じがしますね。

補足　（findの特徴）

• コールバック関数の戻り値は、「true」か「false」を返す
• 「true」だった場合、要素が配列に入る！
• そもそも「return」を忘れてはいけない
• １番最初に見つかった時点で、検索を終了する。

まとめ

• 基本的にはfunctionの中で使うことが多そうです。
• そして複数のプロパティを比較して、取り出しを自由自在にすることが、真のJavaScripterになるということと悟りました。

独り言

• SPA(Single Page Application)でよく使われるってどこかで聞いたことがあります。
• ここら辺も覚えて記事にしていきたいですね。