lodash(+ES6)超入門その1

上司により、しれっとlodashとかいうのライブラリを使われていた。

しかも、ES6も使ってくるもんだからjquery+レガシーなjsで生きてきた私には読めなさすぎた。

適当にコピペして使うだろうと見当つけられてるのが分かりすぎて悲しいので、importしている奴だけでも使い方をチェックします。

_.clone

クローンを作ってくれる。

クローンとは、直接代入してコピーすると参照渡しになってしまうところを、値渡しにしてくれる素敵機能。

const obj = { 'first': 1 ,  'second': 2 };

const copyObj = obj;
const cloneObj = _.clone(obj);

obj.first = 0;
console.log(copyObj); // {first: 0, second: 2}
console.log(cloneObj); // {first: 1, second: 2}

_.each -> _.forEach

公式ドキュメント4.12.0にはなくて焦りましたが、forEachになったようです。

Aliasとして_eachも扱えるようです。

コレクションをくるくる回してくれます。

おそらく、↓にもあるようなオブジェクトもすっきりループしたいという伝統的な悩みを解決してくれた嬉しい機能。

参考:[JavaScript] オブジェクトをループでまわす

const obj = { 'a' : 'aDayo', 'b' : 'bDayo' };
const newObj = {};

_.each(obj, (item, key) => {
    newObj[item] = key;
});
console.log(newObj); // {aDayo: "a", bDayo: "b"}

_.filter

コレクションから条件に一致した値を全て配列で返してくれます。

var charactors = [
  { 'name': 'Banagher Links',  'age': 16,   'ms': {'model':'RX-0'}},
  { 'name': 'Riddhe Marcenas', 'age': 23,   'ms': {'model':'RX-0'}},
  { 'name': 'Marida Cruz',     'age': null, 'ms': {'model':'NZ-666'}},
  { 'name': 'Full Frontal',    'age': null, 'ms': {'model':'MSN-06S'}}
];
console.log(_.filter(charactors, { 'ms': { model: 'RX-0'}}));
// [{ 'name': 'Banagher Links',  'age': 16,   'ms': {'model':'RX-0'}},
//  { 'name': 'Riddhe Marcenas', 'age': 23,   'ms': {'model':'RX-0'}}]

_.find

_.filterは全て返しますが、こちらは最初の1件のみ返します。

var charactors = [
  { 'name': 'Banagher Links',  'age': 16,   'ms': {'model':'RX-0'}},
  { 'name': 'Riddhe Marcenas', 'age': 23,   'ms': {'model':'RX-0'}},
  { 'name': 'Marida Cruz',     'age': null, 'ms': {'model':'NZ-666'}},
  { 'name': 'Full Frontal',    'age': null, 'ms': {'model':'MSN-06S'}}
];
console.log(_.filter(charactors, { 'ms': { model: 'RX-0'}}));
// { 'name': 'Banagher Links',  'age': 16,   'ms': {'model':'RX-0'}}
// リディは返らない!

_.last

配列の中で最後の要素を返す。

const array = [
  'ユニコーンの日',
  '赤い彗星',
  'ラプラスの亡霊',
  '重力の井戸の底で',
  '黒いユニコーン',
  '宇宙(そら)と地球(ほし)と',
  '虹の彼方に'
];

console.log(_.last(array)); // 虹の彼方に

_.isArray

配列かどうかチェックしてくれる。

ES6ではisArray関数があり、同様のチェックをしてくれるらしいです。

ただIE8はES6未対応なので、多分その辺りをカバーするための機能。

babelが入っているのでどっちにしても関係なさそうですが、IEが手元に無いのでchromeしか確認はしていません。

 // cheomeではArray.isArray()も_.isArrayも同じ
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray([])); // true
console.log(Array.isArray({})); // オブジェクトはfalse
console.log(Array.isArray([{a: 'aDayo'}])); // 配列に入ったオブジェクトは勿論true

console.log(_.isArray([1, 2, 3])); // true
console.log(_.isArray([])); // true
console.log(_.isArray({})); // オブジェクトはfalse
console.log(_.isArray([{a: 'aDayo'}])); // オブジェクトはfalse勿論true

_.uniq

配列の中に重複がある場合、重複を除いて結果を返してくれる。
sqlのdistinct。

  const array = (['マーセナス', 'マーセナス', 'ビスト', 'ビスト', 'ビスト', 'リンクス', 'ザビ' ]);
  console.log(_.uniq(array));
  // ["マーセナス", "ビスト", "リンクス", "ザビ"]

  // オブジェクトは中身が同じでもチェックしてくれません。
  const arrayObj = ([{'ビスト': 'カーディアス' }, {'ビスト': 'マーサ'}, {'ビスト': 'マーサ'}, {'ビスト': 'アルベルト'}]);
  console.log(_.uniq(arrayObj));
  // [{'ビスト': 'カーディアス' }, {'ビスト': 'マーサ'}, {'ビスト': 'マーサ'}, {'ビスト': 'アルベルト'}]

例を作っていると意外と息切れしたので分けます。ごめんなさい。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク