どうも！chuckです。
前回に引き続き、underscore.jsについて勉強していきます。
each, map
eachとmapはそれぞれ配列に対するメソッドになります。両方とも配列の要素に関与するのですが、戻り値が異なります。
each
このように、第一引数に配列を取り、第二引数に処理を書きます。今回はシンプルに配列の要素をconsole.logで表示させています。
ブラウザのコンソールで表示した結果がこちら。
きちんと要素が１コずつ表示されていますね！
map
eachが配列の要素を１コずつ出力するのに対して、配列をまるごと返すのがmapです
こんな感じ。今回は配列の要素に対して、数値を2倍にする処理を行いました。
ブラウザで確認した結果がこちら。
きちんと要素が2倍された配列が返ってきました。
JavaScriptで書いてみる
Underscoreのありがたさを実感するために、JavaScriptでも同様の処理を書いてみますｗ
eachがこちら。
for文のイテレータを使って配列の要素に順番にアクセスしています。
mapはこちら。
まあ上と同じような処理ですね。
うーん、まだJavaScriptで書けるっちゃあ書ける。
答え合わせ
せっかくなので、Underscoreのコードを見て答え合わせをしたいと思いますｗ
(underscore.js)
eachを定義している部分がこちら。
思ってたよりすごく長い！
いや、ホント、もっと簡潔だと思ってましたヽ(´Д`； これはちょっときちんとコードリーディングしなくては…。(次回やろう)
いづれにせよ、内部的にはやはり受け取ったオブジェクトをfor文で処理しているようです。
find, filter, contains
さて、each, map以外の関数も見ていきます！
find
findは配列の中から、条件に合うものを返します。
このように、findの第二引数である関数の中で、条件を書いています。この場合、5より大きい数字を返します。
ブラウザで確認するとこのとおり。
5より大きい数値である8が返ってきていますね！
filter
filterを使うと、条件に合うもののみを返してくれます。
ブラウザで確認するとこの通り。
元々の配列から5未満の数値を排除した配列が返ってきています。
contains
containsは配列の中に特定の要素があるかどうかを調べます。要素の有無に応じて、論理値を返してくれます。
ブラウザで確認するとこの通り。
aという配列には10という数値が無いので、falseが返ります。これめっちゃ便利ですね！
またJavaScriptで書いてみる
findはこんな感じでしょうか。
for文で配列を調べていき、条件に合うものを発見したら終了。
filterはこんな感じですかね！
配列に要素を追加するpushメソッドを使っているので、xを配列として再定義しました。
containsはこう！
もともと変数にfalseをセットしておいて、条件に合致すれば反転してtrueにしています。
まとめ
Underscore.jsの勉強をしました。今回は自分で書いてみたり、実装を確認してみました。まだまだ自分で書けるレベルではありますが、早くも便利さを実感しています。
プライベートではともかく、実務でいちいちこれらのロジックを書くのってちょっと面倒ですよね…。UnderScoreが使えたらコーディング速度がだいぶ向上しそうです。
書いたコード
