lodash.jsを使ってjavascriptで関数型っぽい書き方をする
コードについて
コードの実行はChromeの開発者コンソールで確認します。Chromeブラウザ上でF12キーを押下して「Console」タブから実行結果を確認します。
サンプルコードでは省略していますが、以下のHTMLコードのscriptタグ内に記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.js"></script> <script> (function() { //ここにコードを記述する })() </script> </body> </html> |
each
eachは配列をループする処理です。forでも記述できますが、配列を意識しなくて済みます。
|
1 2 3 4 |
var array = [10, 20, 30]; _.each(array, function(element, index, array) { console.log(index + '->' + element); }); |
結果は以下
|
1 2 3 |
0->10 1->20 2->30 |
map
mapは配列の各要素に対して処理を行い、結果を配列として返すことです。関数型の特徴である非破壊的メソッドとなっており、元の配列の値は変わっていません。
|
1 2 3 4 5 |
var array = [1, 2, 3]; var result = _.map(array, function(element, index, array) { return element * 3; }); console.log(result); |
結果、それぞれの要素が3倍されています。
|
1 |
[3, 6, 9] |
reduce
reduceは配列の各要素に関数を適用し、単一の値にします。
|
1 2 3 4 5 6 |
var array = [1, 2, 3]; var sum = _.reduce(array, function(result, value, index) { result += value; return result; }, 0); console.log(sum); |
結果、各配列の合計が表示されました。
|
1 |
6 |
findとfilter
findは要素にある値の中から、条件に一致する要素を一つ返します。検索結果が複数ある場合、一番先頭の要素を返します。filterは条件に一致する要素をすべて返します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var array = [1, 2, 3, 4, 5]; var findResult = _.find(array, function(element) { // 奇数を検索 return element % 2 === 1; }); console.log(findResult); var filterResult = _.filter(array, function(element) { // 奇数を検索 return element % 2 === 1; }); console.log(filterResult); |
結果、findの場合先頭の一つ、filterの場合該当する条件全てを取得できました。
|
1 2 |
1 [1, 3, 5] |
includes
ある値が要素の中に含まれているかを判定します。
|
1 2 3 |
var array = [1, 2, 3, 4, 5]; console.log(_.includes(array, 5)); console.log(_.includes(array, 6)); |
結果、5は要素に含まれているのでtrue、6は含まれていないのでfalseになります。loadshのv3まではcontainsという関数がincludesにエイリアスされており、本メソッドと同じ処理をしていましたが、v4からエイリアスが廃止されたようです。古い記事だとcontainsが使われている事があるので注意ですね。
その他の変更はこちらで参照できます。
https://github.com/lodash/lodash/wiki/Changelog#compatibility-warnings
javascriptでdeparcatedなメソッドを警告してくれるような仕組みてあるんでしょうかね・・。
uniq
配列の重複を削除します。
|
1 2 |
var array = [10, 20, 30, 10, 20, 30]; console.log(_.uniq(array)); |
結果
|
1 |
[10, 20, 30] |
map
該当するプロパティの要素を抽出します。こちらも以前は「pluck」というメソッド名がエイリアスされていましたが、v4で廃止されました。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var array = [{ type: 'hoge', number: 1 }, { type: 'fuga', number: 18 }, { type: 'piyo', number: 15 }]; console.log(_.pluck(array, 'type')); console.log(_.pluck(array, 'number')); |
結果
|
1 2 |
["hoge", "fuga", "piyo"] [1, 18, 15] |
keys と values
オブジェクトのキーとプロパティを抽出して配列として取得します。
|
1 2 3 4 5 6 7 |
var object = { a: 1, b: 2, c: 3 }; console.log(_.keys(object)); console.log(_.values(object)); |
結果
|
1 2 |
["a", "b", "c"] [1, 2, 3] |
has
オブジェクトのプロパティが存在するかを判定します。
|
1 2 3 4 5 6 7 |
var object = { a: 1, b: 2, c: 3 }; console.log(_.has(object, 'a')); console.log(_.has(object, 'd')); |
結果
|
1 2 |
true false |