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

2016/03/05

コードについて

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

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

<!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>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

(function() {

//ここにコードを記述する

})()

</script>

</body>

</html>

each

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

        var array = [10, 20, 30];
        _.each(array, function(element, index, array) {
            console.log(index + '->' + element);
        });

var array = [10, 20, 30];

_.each(array, function(element, index, array) {

console.log(index + '->' + element);

});

結果は以下

0->10
1->20
2->30

0->10

1->20

2->30

map

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

        var array = [1, 2, 3];
        var result = _.map(array, function(element, index, array) {
            return element * 3;
        });
        console.log(result);

var array = [1, 2, 3];

var result = _.map(array, function(element, index, array) {

return element * 3;

});

console.log(result);

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

[3, 6, 9]

[3, 6, 9]

reduce

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

        var array = [1, 2, 3];
        var sum = _.reduce(array, function(result, value, index) {
            result += value;
            return result;
        }, 0);
        console.log(sum);

var array = [1, 2, 3];

var sum = _.reduce(array, function(result, value, index) {

result += value;

return result;

}, 0);

console.log(sum);

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

6

findとfilter

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

        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);

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
[1, 3, 5]

1 2	1 [1, 3, 5]

includes

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

        var array = [1, 2, 3, 4, 5];
        console.log(_.includes(array, 5));
        console.log(_.includes(array, 6));

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

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

        var array = [10, 20, 30, 10, 20, 30];
        console.log(_.uniq(array));

1 2	var array = [10, 20, 30, 10, 20, 30]; console.log(_.uniq(array));

結果

[10, 20, 30]

1	[10, 20, 30]

map

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

        var array = [{
            type: 'hoge',
            number: 1
        }, {
            type: 'fuga',
            number: 18
        }, {
            type: 'piyo',
            number: 15
        }];
        console.log(_.pluck(array, 'type'));
        console.log(_.pluck(array, 'number'));

var array = [{

type: 'hoge',

number: 1

}, {

type: 'fuga',

number: 18

}, {

type: 'piyo',

number: 15

}];

console.log(_.pluck(array, 'type'));

console.log(_.pluck(array, 'number'));

結果

["hoge", "fuga", "piyo"]
[1, 18, 15]

1 2	["hoge", "fuga", "piyo"] [1, 18, 15]

keys と values

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

        var object = {
            a: 1,
            b: 2,
            c: 3
        };
        console.log(_.keys(object));
        console.log(_.values(object));

var object = {

a: 1,

b: 2,

c: 3

};

console.log(_.keys(object));

console.log(_.values(object));

結果

["a", "b", "c"]
[1, 2, 3]

1 2	["a", "b", "c"] [1, 2, 3]

has

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

        var object = {
            a: 1,
            b: 2,
            c: 3
        };
        console.log(_.has(object, 'a'));
        console.log(_.has(object, 'd'));