Lodash那些“多余”和讓人眼前一亮的 API

作者：JS強(qiáng)迫癥患者

https://juejin.im/post/5ed3cd366fb9a047f129c39a

本文初衷是想列舉一些比較“多余”的API以及對應(yīng)原生JS寫法；后面發(fā)現(xiàn)API過多，精力有限，慢慢的變成記錄那些有助于提高開發(fā)效率的API，希望對您有所幫助。對于那些，根據(jù)名字或者描述便能知道其實(shí)際用途的API，筆者未做Demo演示。各位看官可以查看對應(yīng)官方文檔便能快速應(yīng)用于實(shí)際開發(fā)，Lodash中文API 上有詳細(xì)介紹。

一、收獲

1. lodash那些功能強(qiáng)大的API
2. lodash那些“多余”的API及原生JS對應(yīng)寫法

二、 Lodash

Lodash 是一個一致性、模塊化、高性能的 JavaScript 實(shí)用工具庫。采用函數(shù)類API，多數(shù)API都不修改傳入的參數(shù)；

Lodash功能強(qiáng)大，涵蓋了前端開發(fā)中能遇到的大部分邏輯功能點(diǎn)，使用Lodash能大大提高我們的開發(fā)效率。但這也有一個弊端：便利往往會使我們變"懶"。仁者見仁智者見智，Lodash帶來便利同時，我們應(yīng)該時刻記住：JavaScript才是我們的根本；

Lodash中“多余”的API并不多余，API內(nèi)部處理了很多開發(fā)者常常忽略的異常情況，使代碼更加安全；

對于大部分Lodash API對比手寫JS對應(yīng)邏輯功能點(diǎn)，并不會提高性能；

Lodash，gitHub star數(shù)為45K。同時是一個學(xué)習(xí)教材，通過閱讀源碼能幫助我們夯實(shí)JavaScript基礎(chǔ)。函數(shù)式API讓每個邏輯功能點(diǎn)代碼量不大，比較容易理解。基礎(chǔ)差的同學(xué)可以通過閱讀源碼，手寫源碼的方式來夯實(shí)JavaScript，比如手寫：柯里化，防抖，節(jié)流，bind，字符串template等。

三、數(shù)組 Array

“多余”指數(shù)：☆☆

1. compact（過濾假值）

   lodash.compact([0, 1, false, 2, '', 3])
   [0, 1, false, 2, '', 3].filter(_ => _)
// [1, 2, 3]

1. concat（數(shù)組拼接）

   lodash.concat([1], [2, 3, 4], [5, 6])
   [1, ...[2, 3, 4], ...[5, 6]]
// [1, 2, 3, 4, 5, 6]

1. fill（填充）

   lodash.fill([1,2,3],'a')
   [1,2,3].fill('a'))
// ['a', 'a', 'a']

   lodash.fill(Array(3),'b')
Array(3).fill('b')
// ['b', 'b', 'b']

1. head（獲取第一個元素）

   const first1 = lodash.head([1, 2, 3])
const [first2] = [1, 2, 3]
// 1

1. flatten（降1個維度）

   lodash.flatten([1, [2, [3, [4]], 5]]))
   [1, [2, [3, [4]], 5]].flat(1))
// [1, 2, [3, [4]], 5]

1. flattenDeep | flattenDepth（降為一維數(shù)組）

   lodash.flattenDeep([1, [2, [3, [4]], 5]])
   lodash.flattenDepth([1, [2, [3, [4]], 5]], 3)
   [1, [2, [3, [4]], 5]].flat(Infinity)
// [1, 2, 3, 4, 5]

1. fromPairs（entries類型數(shù)組轉(zhuǎn)換為對象）

   lodash.fromPairs([['fred', 30], ['barney', 40]])
Object.fromEntries([['fred', 30], ['barney', 40]])
// {fred: 30, barney: 40}

1. pull（移除指定元素）

   lodash.pull([1, 2, 3, 1, 2, 3], 2, 3)
   [1, 2, 3, 1, 2, 3].filter(item => ![2, 3].includes(item))
// [1, 1]

1. Array自帶的reverse （數(shù)組翻轉(zhuǎn)）、slice（切割）、join（字符串拼接）、indexOf | lastIndexOf（匹配索引）等

“多余”指數(shù)：☆

1. difference

   lodash.difference([3, 2, 1], [4, 2])
   [3, 2, 1].filter(item => ![4, 2].includes(item))

1. tail（返回不包含第一個元素的數(shù)組）

   var other = lodash.tail([1, 2, 3])
var [, ...other] = [1, 2, 3] // 可擴(kuò)展不包含前第n個元素

1. take （0 - n的元素），如果用于刪除數(shù)組元素有點(diǎn)"多余"

   let arr1 = [1, 2, 3, 4, 5]
   arr1 = lodash.take(arr1, 2) // 做賦值，刪除元素
const arr2 = [1, 2, 3, 4, 5]
   arr2.length = 2 // 修改長度，直接刪除后面元素，可用于清空數(shù)組
// [1, 2]

眼前一亮的API

1. pullAt （根據(jù)下標(biāo)選擇元素，分到兩個數(shù)組）

2. takeRight （ 返回從結(jié)尾元素開始n個元素的數(shù)組切片 ）

   // 倒數(shù)解構(gòu)
const [beforeLast, last] = lodash.takeRight([1, 2, 3, 4], 2)
console.log(beforeLast, last) // 3 4

1. zipObject

   lodash.zipObject(['a', 'b'], [1, 2]);
// => { 'a': 1, 'b': 2 }

1. zipObjectDeep

   lodash.zipObjectDeep(['a.b[0].c', 'a.b[1].d'], [1, 2]);
// => { 'a': { 'b': [{ 'c': 1 }, { 'd': 2 }] } }

1. xor（ 創(chuàng)建一個給定數(shù)組唯一值的數(shù)組 ）

眼前二亮的API

1. remove（元素篩選，分到兩個數(shù)組）

2. sortedUniq （去重，排序）

3. takeRightWhile （ 從array數(shù)組的最后一個元素開始提取元素，直到?predicate?返回假值 ）

4. uniqBy （去重，排序）

四、集合 Collection

Collection很多API都能讓人眼前一亮，在實(shí)際開發(fā)中都能得到應(yīng)用。

1. forEach（遍歷數(shù)組或?qū)ο螅?| forEachRight（反序遍歷數(shù)組或?qū)ο螅?/li>

   // 遍歷數(shù)組有點(diǎn)多余
   lodash([1, 2]).forEach((val) => {
console.log(val)
   })
// 遍歷對象就
   lodash({ a: 1, b: 2 }).forEach((val, key) => {
console.log(val, key)
   })
// 原生js寫法                      **** 注意數(shù)組解構(gòu)順序
Object.entries({ a: 1, b: 2 }).forEach(([key, val]) => {
console.log(val, key)
   })

1. every（每個元素都符合條件）| some（某個元素符合條件）| filter（過濾）| find（查找第一個）| findLast（查找最后一個）| includes（抱哈某個元素）。亮點(diǎn)：可以傳入一個對象進(jìn)行匹配

   console.log(lodash([true, 1, null, 'yes']).every(Boolean)) // false
// 等效于
console.log([true, 1, null, 'yes'].every(Boolean)) // false

const users = [
       { user: 'barney', age: 40, active: false },
       { user: 'fred', age: 40, active: false },
   ]

// *******眼前一亮的用法********
console.log(lodash(users).every({ active: false, age: 40 })) // true
// 等效于
console.log(users.every((item) => item.active === false && item.age === 40)) // true

console.log(lodash.find(users, { user: 'fred' }) === users[1]) // true
console.log(lodash.filter(users, { user: 'fred' })) // object for ['fred']
console.log(lodash.some(users, { user: 'fred' })) // true

1. groupBy（分組）

   const users = [
       { id: 'a', age: 40, height: 1 },
       { id: 'b', age: 39, height: 2 },
       { id: 'c', age: 38, height: 2 },
       { id: 'd', age: 40, height: 2 },
   ]
console.log(lodash.groupBy(users, 'age'))
// 按age分組:{38:obj for ['a'], 39:obj for ['b'], 40:obj for ['c', 'd']}
console.log(lodash.groupBy(users, ({ age, height }) => age + height))
// 按age+height結(jié)果分組:{40:obj for ['c'], 41:obj for ['a', 'b'], 42:obj for ['d']}

1. invokeMap （分解item：循環(huán)調(diào)用方法，方法返回值替換集合item）

2. keyBy （ 生成對象：組成聚合的對象 ；key值來源于回調(diào)，回調(diào)參數(shù)為對應(yīng)集合item；value為item）

3. orderBy | sortBy（排序：可指定多個排序字段，有優(yōu)先級；可控制升序和反序）

4. partition （站隊：根據(jù)回調(diào)返回值，返回 [ 返回值為true的item數(shù)組 , 返回值為false的item數(shù)組]）

5. reject （找茬：找出不符合條件的item集合，類似！filter）

6. sample （抽簽：集合中隨機(jī)取一個）

7. sampleSize （抽簽：集合隨機(jī)抽取n個）

8. shuffle （打亂）

五、函數(shù) Function

下面列舉的是實(shí)際開發(fā)中應(yīng)用場景較多的API，具體的用法就不做demo了，具體可參看官網(wǎng)API。

1. after(n, func) ?：調(diào)用執(zhí)行n次后才能執(zhí)行func
2. before(n, func)：調(diào)用n次后不再執(zhí)行func，n次后的返回值為第n次返回值
3. curry ?| ?curryRight ：柯里化
4. debounce ：防抖
5. defer ：推遲調(diào)用func，直到當(dāng)前堆棧清理完畢
6. throttle ：節(jié)流
7. unary ：創(chuàng)建一個最多接受一個參數(shù)的函數(shù)，忽略多余的參數(shù)

六、Lang

Lang下多為判斷類型的API，常規(guī)的isXxx判斷類型API就不做過多的介紹。下面介紹一些好用的API。

1. 克隆系列：clone、cloneDeep、cloneWith、cloneDeepWith
2. eq ：判斷相等，能判斷NaN
3. isEqual ：判斷兩個對象可枚舉value相等，注意不能用于對比DOM對象
4. isEqualWith：定制isEqual比較
5. isMatch ：判斷兩個對象部分可枚舉value相等
6. isMatchWith ：定制isMatch比較

七、數(shù)學(xué) Math

maxBy（最大值） | minBy（最小值）| ?meanBy （求平局值）| ?sumBy （求和）

const users = [
    { id: 'b', age: 39, height: 2 },
    { id: 'a', age: 40, height: 1 },
    { id: 'c', age: 38, height: 2 },
    { id: 'd', age: 40, height: 2 },
]
console.log(lodash.maxBy(users, 'age'))
// obj for 'a'
console.log(lodash.maxBy(users, ({ age, height }) => age + height))
// obj for 'd'

八、數(shù)字 Number

1. inRange：判斷大于等于且小于等于。改進(jìn)實(shí)現(xiàn)isInRange

   /**
    * 判斷數(shù)字是否在某個區(qū)間
    * @param string 范圍
    * demo：
    * const ten = 10
    * ten.isInRange('[1,10]') // true
    * ten.isInRange('[1,10)') // false
    */
Number.prototype.isInRange = function (range = '[1,10]') {
// 1. 應(yīng)該對range進(jìn)行正則校驗(yàn)
const val = this.valueOf()
const isStartEqual = range.startsWith('[')
const isEndEqual = range.endsWith(']')

let [start, end] = range
       .slice(1, range.length - 1) // 去頭尾符號 '1,10'
       .split(',') // 切割字符串 ['1', '10']
       .map(Number) // 轉(zhuǎn)換數(shù)字 [1, 10]

     start > end && ([start, end] = [end, start]) // 保證start < end

const isGt = isStartEqual ? val >= start : val > start // >start
const isLt = isEndEqual ? val <= end : val < end // 
return isGt && isLt
   }
const ten = 10
console.log(ten.isInRange('[1,10]')) // true
console.log(ten.isInRange('[1,10)')) // false

九、對象 Object

下面只記錄讓人眼前一亮的API

1. at ?| ?get ：字符串key鏈路取值

   const object = { a: [{ b: { c: 3 } }, 4] }
console.log(lodash.at(object, ['a[0].b.c', 'a[1]']))
// [3, 4]
console.log(lodash.at(object, 'a[0].b.c'))
// [3]
console.log(lodash.get(object, 'a[0].b.c'))
// 3

1. defaultsDeep ：深層設(shè)置默認(rèn)值

   const defaultData = { a: { b: 1, c: 3 } } // 默認(rèn)值
const settingData = { a: { b: 2 } } // 設(shè)置的值

// 當(dāng)對象只有一層的時候?qū)ο蠼Y(jié)構(gòu)還挺好用，類似于lodash.defaults
// 當(dāng)對象層級不止一層的時候，層級深的默認(rèn)值就被沖刷掉了
const mergeData = {
       ...defaultData, // 默認(rèn)值放在前面
       ...settingData,
   }
console.log(mergeData)
// {a:{b:2}}

// 會改變settingData,所以取副本
const mergeDataGood = JSON.parse(JSON.stringify(settingData))
   lodash.defaultsDeep(mergeDataGood, defaultData) // 默認(rèn)值在最后
console.log(mergeDataGood)
// {a:{b: 2, c: 3}}

1. has | ?hasIn ：判斷是否有屬性鏈。有時候?yàn)榱吮苊獯a報錯，需要進(jìn)行串聯(lián)取值：const dValue = a&&a.b&&a.b.c&&a.b.c.d。ES2020已定稿增加了操作符：?.來解決上述問題。上面等價寫法為：const dValue = a?.b?.c?.d

   const obj = { a: { b: { c: { d: 'dValue' } } } }
const obj2 = {}
console.log(lodash.has(obj,'a.b.c.d')) // true
console.log(lodash.has(obj2,'a.b.c.d')) // false

1. invert ：key-value反轉(zhuǎn)，返回新對象，新對象為舊對象的value-key；

2. invertBy ：類似invert，能對新對象的key進(jìn)行處理；

3. mapKeys ：處理對象的key，生成新對象；

4. mapValues ：處理對象value，生成新對象；

5. merge | ?mergeWith ：對象合并

   var object = {
a: [{ b: 2 }, { d: 4 }],
obj: { key1: 'value1', key2: 'value2' },
   }
var other = {
a: [{ c: 3 }, { e: 5 }],
obj: { key1: 'valueOther1', key3: 'valueOther2' },
   }
console.log(lodash.merge(object, other))
/**
   {
     a: [
         { b: 2, c: 3 },
         { d: 4, e: 5 },
     ],
     obj: { key1: 'valueOther1', key2: 'value2', key3: 'valueOther2' },
   }
   */

1. omit | ?omitBy ：剔除對象屬性。用在抽取保存到后端數(shù)據(jù)，后端校驗(yàn)嚴(yán)格，不能有多余字段等場景。

   const model = {
key1: 'value1', // 需要發(fā)送到后端的數(shù)據(jù)
key2: 'value2',
key3: 'value3',
pageKey1: 'pageValue1', // 頁面用到的字段
pageKey2: 'pageValue2',
pageKey3: 'pageValue3',
   }
// 1. 原始寫法
const postData1 = {
key1: model.key1,
key2: model.key2,
key3: model.key3,
   }
// omit
const postData2 = lodash.omit(model, ['pageKey1', 'pageKey2', 'pageKey3'])

// omitBy                                               // 剔除key包含page字段
const postData3 = lodash.omitBy(model, (value, key) => key.includes('page'))

console.log(lodash.isEqual(postData1, postData2)) // true
console.log(lodash.isEqual(postData1, postData3)) // true

1. pick | pickBy：摘選對象屬性，功能和omit | ?omitBy 相反。當(dāng)要剔除的屬性比保留屬性多的時候采用pick

2. set：字符串key鏈路設(shè)置值，和get對應(yīng)

十、Seq

API過多，下面只記錄Seq讓人眼前一亮的API

1. chain ：解決lodash不能鏈?zhǔn)秸{(diào)用

   var users = [
       { user: 'barney', age: 36 },
       { user: 'fred', age: 40 },
       { user: 'pebbles', age: 1 },
   ]
const first = lodash
       .chain(users)
       .sortBy('age')
       .map(function (o) {
return o.user + ' is ' + o.age
       })
       .head()
       .value() // 注意這里要運(yùn)行.value()才運(yùn)行，得到結(jié)果
console.log(first) // pebbles is 1

十一、字符串 String

lodash的String API多為轉(zhuǎn)換不同值的API，如：首字母大寫、駝峰式、html屬性式、下劃線連接式、全小寫、首字母小寫、編碼、填充，去空格等API。

唯一亮眼的API：template（字符串模板）。可應(yīng)用于 動態(tài)國際化、拼接國際化較優(yōu)實(shí)現(xiàn)

const compiled = lodash.template('hello <%= user.name %>!')
console.log(compiled({ user: { name: 'fred' } }))
// hello fred!