ライブラリlodash よく使うものをまとめておく （バンドルサイズ抑える記述方法も）

#ユーティリティライブラリlodash
lodash公式サイト
javascriptで配列・オブジェクトの操作をするときに使うライブラリlodashを使用することが多いので、まとめておく。

cdnも用意されているみたいですので、気軽に使うことができます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

webpack環境が整っているのであればimportするのも良いです。

npm install lodash

lodashすべての関数を使う時

import _ from 'lodash';

lodashライブラリーは高機能のため、ライブラリすべてを読み込むとコンパイル時にバンドルサイズが肥大化してしまうことが懸念されます。ですので、使いたい機能のみを抜粋する記述も下記に示します。

lodash一部の関数を使う時

import _delay from 'lodash/delay';

本題に戻り、以降はよく使用する機能を紹介していきます。

##._reduce
####使用例

• 　配列の中のある要素で一番大きいものはどれかを検索する

var lists= [
{id:'1',name:'高田',age:35},
{id:'2',name:'山下',age:73},
{id:'3',name:'垣田',age:77},
{id:'4',name:'前島',age:15},
{id:'5',name:'杉嶋',age:25},
];

var aaa = _.reduce(lists,function(a,b){
	return (a > b.age)? a:b.age;
},0);

console.log(aaa);
//オブジェクト{id:'3',name:'垣田',age:77}を返す

####使用例

• 　配列の中のある要素の合計値を計算する

var lists= [
{id:'1',name:'高田',age:35},
{id:'2',name:'山下',age:73},
{id:'3',name:'垣田',age:77},
{id:'4',name:'前島',age:15},
{id:'5',name:'杉嶋',age:25},
];

var aaa2 = _.reduce(lists,function(result, value){
	return result + value.age;
},0);

console.log(aaa2);
//225を返す

##_.orderBy
####使用例

• 　配列の中のある要素を降順、昇順に設定する。

var lists= [
{id:'1',name:'高田',age:35},
{id:'2',name:'会田',age:77},
{id:'3',name:'垣田',age:77},
{id:'4',name:'前島',age:15},
{id:'5',name:'杉嶋',age:25},
];

var ord = _.orderBy(lists,'age','desc');
console.log(ord);
//ageで降順に並べ替えられた配列

####使用例

• 　要素を2つ選択して降順、昇順に設定する。

var lists= [
{id:1,name:'高田',age:35},
{id:2,name:'山下',age:77},
{id:3,name:'垣田',age:77},
{id:4,name:'前島',age:15},
{id:5,name:'杉嶋',age:25},
];
var ord2 = _.orderBy(lists, ['age', 'id'], ['desc', 'desc']);
console.log(ord2);

##_.delay
####使用例

• 　◯◯秒間遅らせて、実行をする

console.log("何もしないで実行");

_.delay(function() {
    console.log("lodashで実行を遅らせる");
}, 3000, 'later');
//秒数は好きな時間を記述できる