markdown lodash.md

Posted 2021-05-05

https://lodash.com/

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

# 並び替え

## sortBy

ageで昇順

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

## orderBy

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

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

## reverse

ageで降順（メソッドチェーン）

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

## shuffle

シャッフル

```javascript
users = _.shuffle(users);
```

## sample

ランダムに1つだけ取得

```javascript
user = _.sample(users)
```


# 絞り込み

## take

前から5つだけ取得

```javascript
users = _.take(users, 5)
```

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

## filter

age > 35 で絞り込む

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

## find

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

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

## includes

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

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


# 判定

## inRange

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

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



# 整形

## padStart

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

```javascript
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` を取得する

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

`compact()`はfalsyな値を削除


# ループ

## each

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

```javascript
// 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

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

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

## debounce

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

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


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