しびら

技術ネタのメモとか。

lodash.jsを使ってjavascriptで関数型っぽい書き方をする

   

1a5aab66-8eaf-1684-01f1-923f07c3f971

コードについて

コードの実行はChromeの開発者コンソールで確認します。Chromeブラウザ上でF12キーを押下して「Console」タブから実行結果を確認します。

サンプルコードでは省略していますが、以下のHTMLコードのscriptタグ内に記述します。

 

each

eachは配列をループする処理です。forでも記述できますが、配列を意識しなくて済みます。

結果は以下

 

map

mapは配列の各要素に対して処理を行い、結果を配列として返すことです。関数型の特徴である非破壊的メソッドとなっており、元の配列の値は変わっていません。

結果、それぞれの要素が3倍されています。

 

reduce

reduceは配列の各要素に関数を適用し、単一の値にします。

結果、各配列の合計が表示されました。

findとfilter

findは要素にある値の中から、条件に一致する要素を一つ返します。検索結果が複数ある場合、一番先頭の要素を返します。filterは条件に一致する要素をすべて返します。

結果、findの場合先頭の一つ、filterの場合該当する条件全てを取得できました。

includes

ある値が要素の中に含まれているかを判定します。

結果、5は要素に含まれているのでtrue、6は含まれていないのでfalseになります。loadshのv3まではcontainsという関数がincludesにエイリアスされており、本メソッドと同じ処理をしていましたが、v4からエイリアスが廃止されたようです。古い記事だとcontainsが使われている事があるので注意ですね。

その他の変更はこちらで参照できます。

https://github.com/lodash/lodash/wiki/Changelog#compatibility-warnings

javascriptでdeparcatedなメソッドを警告してくれるような仕組みてあるんでしょうかね・・。

uniq

配列の重複を削除します。

結果

map

該当するプロパティの要素を抽出します。こちらも以前は「pluck」というメソッド名がエイリアスされていましたが、v4で廃止されました。

結果

keys と values

オブジェクトのキーとプロパティを抽出して配列として取得します。

結果

has

オブジェクトのプロパティが存在するかを判定します。

結果

 

 

 - Javascript ,