本文初衷是想列举一些比较“多余”的API以及对应原生JS写法；后面发现API过多，精力有限，慢慢的变成记录那些有助于提高开发效率的API，希望对您有所帮助。对于那些，根据名字或者描述便能知道其实际用途的API，笔者未做Demo演示。各位看官可以查看对应官方文档便能快速应用于实际开发，Lodash中文API上有详细介绍。

一、收获

  1. lodash那些功能强大的API

  2. lodash那些“多余”的API及原生JS对应写法

    二、 Lodash

    Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。采用函数类API，多数API都不修改传入的参数；
    Lodash功能强大，涵盖了前端开发中能遇到的大部分逻辑功能点，使用Lodash能大大提高我们的开发效率。但这也有一个弊端：便利往往会使我们变”懒”。仁者见仁智者见智，Lodash带来便利同时，我们应该时刻记住：JavaScript才是我们的根本；
    Lodash中“多余”的API并不多余，API内部处理了很多开发者常常忽略的异常情况，使代码更加安全；
    对于大部分Lodash API对比手写JS对应逻辑功能点，并不会提高性能；
    Lodash，gitHub star数为45K。同时是一个学习教材，通过阅读源码能帮助我们夯实JavaScript基础。函数式API让每个逻辑功能点代码量不大，比较容易理解。基础差的同学可以通过阅读源码，手写源码的方式来夯实JavaScript，比如手写：柯里化，防抖，节流，bind，字符串template等。

    三、数组 Array

    “多余”指数：☆☆

  3. compact（过滤假值）

    1. lodash.compact([0, 1, false, 2, '', 3])
    2. [0, 1, false, 2, '', 3].filter(_ => _)
    3. // [1, 2, 3]
    4. 复制代码

  4. concat（数组拼接）

    1. lodash.concat([1], [2, 3, 4], [5, 6])
    2. [1, ...[2, 3, 4], ...[5, 6]]
    3. // [1, 2, 3, 4, 5, 6]
    4. 复制代码

  5. fill（填充）

    1. lodash.fill([1,2,3],'a')
    2. [1,2,3].fill('a'))
    3. // ['a', 'a', 'a']
    5. lodash.fill(Array(3),'b')
    6. Array(3).fill('b')
    7. // ['b', 'b', 'b']
    8. 复制代码

  6. head（获取第一个元素）

    1. const first1 = lodash.head([1, 2, 3])
    2. const [first2] = [1, 2, 3]
    3. // 1
    4. 复制代码

  7. flatten（降1个维度）

    1. lodash.flatten([1, [2, [3, [4]], 5]]))
    2. [1, [2, [3, [4]], 5]].flat(1))
    3. // [1, 2, [3, [4]], 5]
    4. 复制代码

  8. flattenDeep | flattenDepth（降为一维数组）

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

  9. fromPairs（entries类型数组转换为对象）

    1. lodash.fromPairs([['fred', 30], ['barney', 40]])
    2. Object.fromEntries([['fred', 30], ['barney', 40]])
    3. // {fred: 30, barney: 40}
    4. 复制代码

  10. pull（移除指定元素）

    1. lodash.pull([1, 2, 3, 1, 2, 3], 2, 3)
    2. [1, 2, 3, 1, 2, 3].filter(item => ![2, 3].includes(item))
    3. // [1, 1]
    4. 复制代码

  11. Array自带的reverse （数组翻转）、slice（切割）、join（字符串拼接）、indexOf | lastIndexOf（匹配索引）等

    “多余”指数：☆

  12. difference

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

  13. tail（返回不包含第一个元素的数组）

    1. var other = lodash.tail([1, 2, 3])
    2. var [, ...other] = [1, 2, 3] // 可扩展不包含前第n个元素
    3. 复制代码

  14. take （0 - n的元素），如果用于删除数组元素有点”多余”

    1. let arr1 = [1, 2, 3, 4, 5]
    2. arr1 = lodash.take(arr1, 2) // 做赋值，删除元素
    3. const arr2 = [1, 2, 3, 4, 5]
    4. arr2.length = 2 // 修改长度，直接删除后面元素，可用于清空数组
    5. // [1, 2]
    6. 复制代码

    眼前一亮的API

  15. pullAt （根据下标选择元素，分到两个数组）

  16. takeRight （ 返回从结尾元素开始n个元素的数组切片 ）

    1. // 倒数解构
    2. const [beforeLast, last] = lodash.takeRight([1, 2, 3, 4], 2)
    3. console.log(beforeLast, last) // 3 4
    4. 复制代码

  17. zipObject

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

  18. zipObjectDeep

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

  19. xor（ 创建一个给定数组唯一值的数组 ）

    眼前二亮的API

  20. remove（元素筛选，分到两个数组）

  21. sortedUniq （去重，排序）
  22. takeRightWhile （ 从array数组的最后一个元素开始提取元素，直到 predicate 返回假值 ）

  23. uniqBy （去重，排序）

    四、集合 Collection

    Collection很多API都能让人眼前一亮，在实际开发中都能得到应用。

  24. forEach（遍历数组或对象） | forEachRight（反序遍历数组或对象）

    1. // 遍历数组有点多余
    2. lodash([1, 2]).forEach((val) => {
    3.   console.log(val)
    4. })
    5. // 遍历对象就
    6. lodash({ a: 1, b: 2 }).forEach((val, key) => {
    7.   console.log(val, key)
    8. })
    9. // 原生js写法                      **** 注意数组解构顺序
    10. Object.entries({ a: 1, b: 2 }).forEach(([key, val]) => {
    11.   console.log(val, key)
    12. })
    13. 复制代码

  25. every（每个元素都符合条件）| some（某个元素符合条件）| filter（过滤）| find（查找第一个）| findLast（查找最后一个）| includes（抱哈某个元素）。亮点：可以传入一个对象进行匹配

    1. console.log(lodash([true, 1, null, 'yes']).every(Boolean)) // false
    2. // 等效于
    3. console.log([true, 1, null, 'yes'].every(Boolean)) // false
    5. const users = [
    6.     { user: 'barney', age: 40, active: false },
    7.     { user: 'fred', age: 40, active: false },
    8. ]
    10. // *******眼前一亮的用法********
    11. console.log(lodash(users).every({ active: false, age: 40 })) // true
    12. // 等效于
    13. console.log(users.every((item) => item.active === false && item.age === 40)) // true
    15. console.log(lodash.find(users, { user: 'fred' }) === users[1]) // true
    16. console.log(lodash.filter(users, { user: 'fred' })) // object for ['fred']
    17. console.log(lodash.some(users, { user: 'fred' })) // true
    18. 复制代码

  26. groupBy（分组）

    1. const users = [
    2.     { id: 'a', age: 40, height: 1 },
    3.     { id: 'b', age: 39, height: 2 },
    4.     { id: 'c', age: 38, height: 2 },
    5.     { id: 'd', age: 40, height: 2 },
    6. ]
    7. console.log(lodash.groupBy(users, 'age'))
    8. // 按age分组:{38:obj for ['a'], 39:obj for ['b'], 40:obj for ['c', 'd']}
    9. console.log(lodash.groupBy(users, ({ age, height }) => age + height))
    10. // 按age+height结果分组:{40:obj for ['c'], 41:obj for ['a', 'b'], 42:obj for ['d']}
    11. 复制代码

  27. invokeMap （分解item：循环调用方法，方法返回值替换集合item）

  28. keyBy （ 生成对象：组成聚合的对象 ；key值来源于回调，回调参数为对应集合item；value为item）
  29. orderBy | sortBy（排序：可指定多个排序字段，有优先级；可控制升序和反序）
  30. partition （站队：根据回调返回值，返回 [ 返回值为true的item数组 , 返回值为false的item数组]）
  31. reject （找茬：找出不符合条件的item集合，类似！filter）
  32. sample （抽签：集合中随机取一个）
  33. sampleSize （抽签：集合随机抽取n个）

  34. shuffle （打乱）

    五、函数 Function

    下面列举的是实际开发中应用场景较多的API，具体的用法就不做demo了，具体可参看官网API。

  35. after(n, func) ：调用执行n次后才能执行func

  36. before(n, func)：调用n次后不再执行func，n次后的返回值为第n次返回值
  37. curry | curryRight ：柯里化
  38. debounce ：防抖
  39. defer ： 推迟调用func，直到当前堆栈清理完毕
  40. throttle ：节流

  41. unary ： 创建一个最多接受一个参数的函数，忽略多余的参数

    六、Lang

    Lang下多为判断类型的API，常规的isXxx判断类型API就不做过多的介绍。下面介绍一些好用的API。

  42. 克隆系列：clone、cloneDeep、cloneWith、cloneDeepWith

  43. eq ：判断相等，能判断NaN
  44. isEqual ：判断两个对象可枚举value相等，注意不能用于对比DOM对象
  45. isEqualWith：定制isEqual比较
  46. isMatch ：判断两个对象部分可枚举value相等

  47. isMatchWith ：定制isMatch比较

    七、数学 Math

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

    1. const users = [
    2.  { id: 'b', age: 39, height: 2 },
    3.  { id: 'a', age: 40, height: 1 },
    4.  { id: 'c', age: 38, height: 2 },
    5.  { id: 'd', age: 40, height: 2 },
    6. ]
    7. console.log(lodash.maxBy(users, 'age'))
    8. // obj for 'a'
    9. console.log(lodash.maxBy(users, ({ age, height }) => age + height))
    10. // obj for 'd'
    11. 复制代码

    八、数字 Number

  48. inRange：判断大于等于且小于等于。改进实现isInRange

    1. /**
    2.  * 判断数字是否在某个区间
    3.  * @param string 范围
    4.  * demo：
    5.  * const ten = 10
    6.  * ten.isInRange('[1,10]') // true
    7.  * ten.isInRange('[1,10)') // false
    8.  */
    9. Number.prototype.isInRange = function (range = '[1,10]') {
    10.   // 1. 应该对range进行正则校验
    11.   const val = this.valueOf()
    12.   const isStartEqual = range.startsWith('[')
    13.   const isEndEqual = range.endsWith(']')
    15.   let [start, end] = range
    16.     .slice(1, range.length - 1) // 去头尾符号 '1,10'
    17.     .split(',') // 切割字符串 ['1', '10']
    18.     .map(Number) // 转换数字 [1, 10]
    20.   start > end && ([start, end] = [end, start]) // 保证start < end
    22.   const isGt = isStartEqual ? val >= start : val > start // >start
    23.   const isLt = isEndEqual ? val <= end : val < end // <end
    24.   return isGt && isLt
    25. }
    26. const ten = 10
    27. console.log(ten.isInRange('[1,10]')) // true
    28. console.log(ten.isInRange('[1,10)')) // false
    29. 复制代码

    九、对象 Object

    下面只记录让人眼前一亮的API

  49. at | get ：字符串key链路取值

    1. const object = { a: [{ b: { c: 3 } }, 4] }
    2. console.log(lodash.at(object, ['a[0].b.c', 'a[1]']))
    3. // [3, 4]
    4. console.log(lodash.at(object, 'a[0].b.c'))
    5. // [3]
    6. console.log(lodash.get(object, 'a[0].b.c'))
    7. // 3
    8. 复制代码

  50. defaultsDeep ：深层设置默认值

    1. const defaultData = { a: { b: 1, c: 3 } } // 默认值
    2. const settingData = { a: { b: 2 } } // 设置的值
    4. // 当对象只有一层的时候对象结构还挺好用，类似于lodash.defaults
    5. // 当对象层级不止一层的时候，层级深的默认值就被冲刷掉了
    6. const mergeData = {
    7.     ...defaultData, // 默认值放在前面
    8.     ...settingData,
    9. }
    10. console.log(mergeData)
    11. // {a:{b:2}}
    13. // 会改变settingData,所以取副本
    14. const mergeDataGood = JSON.parse(JSON.stringify(settingData))
    15. lodash.defaultsDeep(mergeDataGood, defaultData) // 默认值在最后
    16. console.log(mergeDataGood)
    17. // {a:{b: 2, c: 3}}
    18. 复制代码

  51. has | hasIn ： 判断是否有属性链。有时候为了避免代码报错，需要进行串联取值：const dValue = a&&a.b&&a.b.c&&a.b.c.d。ES2020已定稿增加了操作符：?.来解决上述问题。上面等价写法为：const dValue = a?.b?.c?.d

    1. const obj = { a: { b: { c: { d: 'dValue' } } } }
    2. const obj2 = {}
    3. console.log(lodash.has(obj,'a.b.c.d')) // true
    4. console.log(lodash.has(obj2,'a.b.c.d')) // false
    5. 复制代码

  52. invert ： key-value反转，返回新对象，新对象为旧对象的value-key；

  53. invertBy ：类似invert，能对新对象的key进行处理；
  54. mapKeys ：处理对象的key，生成新对象；
  55. mapValues ：处理对象value，生成新对象；

  56. merge | mergeWith ：对象合并

    1. var object = {
    2.     a: [{ b: 2 }, { d: 4 }],
    3.     obj: { key1: 'value1', key2: 'value2' },
    4. }
    5. var other = {
    6.     a: [{ c: 3 }, { e: 5 }],
    7.     obj: { key1: 'valueOther1', key3: 'valueOther2' },
    8. }
    9. console.log(lodash.merge(object, other))
    10. /**
    11. {
    12.   a: [
    13.       { b: 2, c: 3 },
    14.       { d: 4, e: 5 },
    15.   ],
    16.   obj: { key1: 'valueOther1', key2: 'value2', key3: 'valueOther2' },
    17. }
    18. */
    19. 复制代码

  57. omit | omitBy ：剔除对象属性。用在抽取保存到后端数据，后端校验严格，不能有多余字段等场景。

    1. const model = {
    2.     key1: 'value1', // 需要发送到后端的数据
    3.     key2: 'value2',
    4.     key3: 'value3',
    5.     pageKey1: 'pageValue1', // 页面用到的字段
    6.     pageKey2: 'pageValue2',
    7.     pageKey3: 'pageValue3',
    8. }
    9. // 1. 原始写法
    10. const postData1 = {
    11.     key1: model.key1,
    12.     key2: model.key2,
    13.     key3: model.key3,
    14. }
    15. // omit
    16. const postData2 = lodash.omit(model, ['pageKey1', 'pageKey2', 'pageKey3'])
    18. // omitBy                                               // 剔除key包含page字段
    19. const postData3 = lodash.omitBy(model, (value, key) => key.includes('page'))
    21. console.log(lodash.isEqual(postData1, postData2)) // true
    22. console.log(lodash.isEqual(postData1, postData3)) // true
    23. 复制代码

  58. pick | pickBy：摘选对象属性，功能和omit | omitBy 相反。当要剔除的属性比保留属性多的时候采用pick

  59. set：字符串key链路设置值，和get对应

    十、Seq

    API过多，下面只记录Seq让人眼前一亮的API

  60. chain ：解决lodash不能链式调用

    1. var users = [
    2.     { user: 'barney', age: 36 },
    3.     { user: 'fred', age: 40 },
    4.     { user: 'pebbles', age: 1 },
    5. ]
    6. const first = lodash
    7.     .chain(users)
    8.     .sortBy('age')
    9.     .map(function (o) {
    10.         return o.user + ' is ' + o.age
    11.     })
    12.     .head()
    13.     .value() // 注意这里要运行.value()才运行，得到结果
    14. console.log(first) // pebbles is 1
    15. 复制代码

    十一、字符串 String

    lodash的String API多为转换不同值的API，如：首字母大写、驼峰式、html属性式、下划线连接式、全小写、首字母小写、编码、填充，去空格等API。
    唯一亮眼的API：template（字符串模板）。可应用于 动态国际化、拼接国际化较优实现

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