Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

lodash

More than 1 year has passed since last update.

デモ:https://codepen.io/mo4_9/pen/vZLdbq

並び替え

sortBy

ageで昇順

users = _.sortBy(users, 'age');

orderBy

'asc','desc'で昇順/降順が選べる

users = _.orderBy(users, 'age', 'desc');

reverse

ageで降順(メソッドチェーン)

users = _(users)
  .sortBy('age')
  .reverse()
  .value(); // 配列でなく1つのオブジェクトを返す場合は不要

shuffle

シャッフル

users = _.shuffle(users);

sample

ランダムに1つだけ取得

user = _.sample(users)

絞り込み

take

前から5つだけ取得

users = _.take(users, 5)

後ろから取得する場合はtakeRight

filter

age > 35 で絞り込む

users = _.filter(users, (obj) => {
  return obj.age > 35;
});

find

プロパティ、条件で絞り込む
複数該当するものがあったら最初に該当したものだけを取得

user = _.find(users, {user: 'fred', active: true})

includes

名前に'b'が含まれるユーザーを絞り込む

userContainB = _.filter(users, (obj) => {
  return _.includes(obj.user, 'b');
});

判定

inRange

'月'は1~12、'日'は1~31を取得したいとき

_.inRange(month, 1, 12 + 1);
_.inRange(today, 1, 31 + 1);

整形

padStart

ゼロ埋め
時間表示に使える

const hour = _.padStart(9,2,0);
const minute = _.padStart(5,2,0);
const second = _.padStart(3,2,0);
console.log(`${hour}:${minute}:${second}`); // 09:05:03

nth

たとえば http://sample.com/room/1/chat/2 の地点から roomId=1 を取得する

const roomId = _(location.href.split('/')).compact().nth(-3);

compact()はfalsyな値を削除

ループ

each

ObjectもNodeListもまわせるので便利。
古いiOSでNodeListにforEachが使えないなどのバグもよしなに吸収してくれるので、each処理はデフォルトでlodashを使うべき。

// NodeList
_.each(document.querySelectorAll('.item'), (elm,index) => {
  console.log(elm,index);
})
// Object
_.each({one: 1, two: 2, three: 3}, (value,key) => {
  console.log(key,value);
})

間引く

throttle

一定間隔以内での関数の再実行を禁止する

function throttle() {
  $('.throttle').append('throttle ');
}
$('#inputThrottle').on('click', _.throttle(throttle,1000))

debounce

処理が終了して、一定間隔経過したら関数の実行
再度処理が始まった場合はキャンセル

function debounce() {
  $('.debounce').append('debounce ');
}
$('#inputDebounce').on('click', _.debounce(debounce,1000))

参考
http://matsukaz.hatenablog.com/entry/2014/04/09/082410

mczkzk
読ませる記事よりも公開メモやスニペットの投稿が多め。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away