Lodash学习笔记

基本信息

官方网站：https://www.lodashjs.com
通过npm安装

npm install lodash

工程内配置

• 自动引入
  通过unplugin-auto-import引入

//vite.config.ts
plugins:[
	AutoImport({
		imports:[
			{
          		'lodash': [
            		['default', '_'],
          		],
        	},
		]
	})
]

1. 配置好了之后你会发现你的.ts和.vue(<setup>)文件内可以不用手动导入import _ from 'lodash'就可以使用_了。
2. 如果你的工程配置了eslint，你会发现eslint还不认识_符号，这里需要在.eslintrc文件内配置一下

// .eslintrc
globals:[
	"_":true
]

3. 如果你在<template>模板中使用_符号，你会发现如下报红错误
   类型“{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<…>, never>; … 10 more …; $watch<T extends string | ((…args: any) => any)>(source: T, cb: T extends (…args: any) => infer R ? (args_0: R, args_1: R) => any : (…ar…”上不存在属性“_”。
   这种情况暂时没有办法解决， 还是老老实实的手动导入吧。或者把方法挪到<script setup>中去定义

数组（Array）

1、chunk(array, size=1)

相当于转换为二维数组

_.chunk(['a', 'b', 'c', 'd', 'e'], 2)
// => [['a', 'b'], ['c', 'd'], ['e']]

2、compact(array)

把数组array中的假值过滤掉
假值包括：false，0，undefined，null，NaN，""

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

3、concat(array, …*)

把数组array和后面的值连起来

_.concat([1], 2, [3], [[4]])
// => [1, 2, 3, [4]]

4、difference(array, …Array) 去除交集

在array中排除掉给定的数组中的值(去除交集)

_.difference([3, 2, 1], [4, 2])
// => [3, 1]

5、differenceBy(array, …Array, iterator)

原数组和指定数组都执行一遍迭代器，然后把迭代后的新值作为比较的依据，然后做排除（类似4）。
注：得到的值是array中的，而非迭代后的新值

//建议使用function或者箭头函数，看齐直观.
_.defferenceBy([3.1, 2.2, 1.5], [2.4], (val)=>{
    return Math.floor(val)
})
// => [3.1, 1.5]

个人理解：把原数组[3.1, 2.2, 1.5]和指定数组[2.4]都做向下取整操作，原数组变为[3, 2, 1]，指定数组变为[2]，此时就相当于执行_.difference([3, 2, 1], [2])，就得到了[3, 1]，而3和1分别是由3.2和1.5向下取整得到的，所以把原值放到结果中，就得到了[3.1, 1.5]

6、differenceWith(array, […Array], comparator)

_.differenceWith([
    { name: 'Tom', role: 'user' },
    { name: 'Jerry', role: 'Admin' },
    { name: 'Zhang', role: 'Controller' },
  ],
  [
    { name: 'Zhang', role: 'user' },
  ], (arrVal, othVal)=>{
    return arrVal.role === othVal.role || arrVal.name === othVal.name
  })
  // => [ { "name": "Jerry", "role": "Admin" } ]

这里的[…Array]看似多个数组，其实就可以看做是一个大数组(concat)，执行次数就是俩数组length的积。
个人理解：把原数组array和指定数组[...Array]一一做比较(类似双层For循环)，结果是true的就去掉，反之保留。案例中把原数组中name为Zhang和role为user的对象过滤掉。

7、drop(array,n=1)

去掉数组的前n个元素

_.drop([1, 2, 3])
// => [2, 3]

8、dropRight(array,n=1)

去掉数组的后n个元素

_.drop([1, 2, 3])
// => [1, 2]

9、dropRightWhile(array,predicate)

去除array中从 predicate 返回假值开始到尾部的部分

_.dropRightWhile([
    { name: 'Spike', manager: false },
    { name: 'Tom', manager: true },
    { name: 'Jerry', manager: false },
  ], val=>{
    return val.manager != true
  })
  // => [ { "name": "Spike", "manager": false }, { "name": "Tom", "manager": true } ]

个人理解：从左开始往右删除，开始的地方就是断言方法返回假值（俗称false）的地方，案例中开始的地方就是manager为true的时候，所以Tom之后的对象就都移除了。

10、dropWhile(array, predicate)

去除array中从起点开始到 predicate 返回假值结束部分，与9相反

11、fill(array, value, start=0, end=array.length)

使用 value 值来填充（替换） array，从start位置开始, 到end位置结束（但不包含end位置）。

_.fill(['a', 'b', 'c'], 'Tom', 0, 1)
// => [ "Tom", "b", "c" ]

12、findIndex

这个就不解释了

13、findLastIndex

这个就不解释了

14、head(array) 取头

获取数组 array 的第一个元素。
和_.first相同

• head/first 获取数组中第一个元素（只要第一个）
• last获取数组中最后一个元素（只要最后一个）
• tail 获取数组中除了第一元素以外的其他元素（不要第一个）

_.head(['a', 'b', 'c'])
// => ['a']

15、flatten(array)

减少一级array嵌套深度。相当于flattenDepth(array, 1)

_.flatten(['a', ['b', ['c', ['d']]], 'e'])
// => [ "a", "b", [ "c", [ "d" ] ], "e" ]

16、flattenDeep(array)

将array递归为一维数组。

_.flatten(['a', ['b', ['c', ['d']]], 'e'])
// => [ "a", "b", "c", "d", "e" ]

17、flattenDepth(array, depth=1)

根据 depth 递归减少 array 的嵌套层级

_.flattenDepth(['a', ['b', ['c', ['d']]], 'e'], 2)
// => [ "a", "b", "c", [ "d" ], "e" ]

18、fromPairs(pairs)

这个方法返回一个由键值对pairs构成的对象。

_.fromPairs([['startDate', '2023-01-01', '00:00:00'], ['endDate', '2024-12-31', '23:59:59']])
// => { "startDate": "2023-01-01", "endDate": "2024-12-31" }

可以看到，例子中的时间部分00:00:00和23:59:49被忽略了，看源码可以得知，其实获取的就是pairs数组内的数组第一个和第二个元素

// 源码
function fromPairs(pairs) {
  var index = -1,
      length = pairs == null ? 0 : pairs.length,
      result = {};

  while (++index < length) {
    var pair = pairs[index];
    result[pair[0]] = pair[1];
  }
  return result;
}

19、initial(array) 去尾

去除数组array中的最后一个元素

_.initial(['a', 'b', 'c'])
// => [ "a", "b" ]

20、intersection(…Array)

获取给定数组的交集

_.intersection(['a', 'b'], ['b', 'c'], ['b', 'd'])
// => ['b']

21、intersectionBy(…Array, iterator)

通过iterator调用每一个arrays的每个值以产生一个值，通过产生的值进行了比较。结果值是从第一数组中选择

_.intersectionBy([2.3, 1.2], [4.9, 2.1], val=>{
  return Math.floor(val)
})
// =>[ 2.3 ]

22、intersectionWith(…Array, comparator)

通过 comparator 调用比较arrays中的元素，比较结果为真值则视为相交元素。

_.intersectionWith(
  [{ id: '100', name: 'Tom' }, { id: '101', name: 'Spike' }, { id: '102', name: 'Jerry' }], //模拟数据源
  ['101', '102'], //模拟被选择的数据
  (arrVal, othVal)=>{
    return arrVal.id === othVal
  })
  // => [ { "id": "101", "name": "Spike" }, { "id": "102", "name": "Jerry" } ]

23、join(array, separator=‘,’)

这个就不解释了

24、last(array)

获取array中的最后一个元素。

_.last(['辽宁', '吉林', '哈尔滨'])
// => 哈尔滨

25、lastIndexOf(array, value, fromIndex=array.length-1)

从右到左遍历array的元素，返回value的索引值

_.lastIndexOf(['a', 'b', 'c', 'b'], 'b')
// => 3  //因为是从右往左， 所以遇到了第一个'b'，就停止了，对应的索引值是3

_.lastIndexOf(['a', 'b', 'c', 'b'], 'b', 2)
// => 1

26、nth(array, n=0)

获取array数组的第n个元素。如果n为负数，则返回从数组结尾开始的第n个元素。

_.nth(['a', 'b', 'c'], 1)
// => b

_.nth(['a', 'b', 'c'], -2)
// => b

27、pull(array, …*)

移除数组array中所有和给定值相等的元素

_.pull(['a', 'b', 'a', 'c'], 'a')
// => [ "b", "c" ]

27、pullAll(array, Array)

这个方法类似_.pull，区别是这个方法接收一个要移除值的数组。
此方法会改变原数组array

_.pullAll(['a', 'b', 'a', 'c'], ['b', 'c'])
// => ['a', 'a']

28、pullAllBy(array, Array, iterator)

_.pullAllBy([
  { name: 'One', enable: false },
  { name: 'Two', enable: true }],
[{ name: 'Three', enable: true }],
(val)=>{
  return val.enable == true //把启用的都移除掉
})
// => [ { "name": "One", "enable": false } ]

29、 pullAllWith(array, Array, comparator)

这个方法类似于_.pullAll，区别是这个方法接受 comparator 调用array中的元素和values比较。comparator 会传入两个参数：(arrVal, othVal)。

_.pullAllWith([
  { name: 'Tom', age: 30 },
  { name: 'Spike', age: 33 },
  { name: 'Jerry', age: 30 },
],
[30, 31],//把原数组array中年龄和指定数组Array中的左比较，相同的就移除掉。
(arrVal, othArr)=>arrVal.age === othArr,
)
// => [ { "name": "Spike", "age": 33 } ]

30、pullAt(array, indexes)

根据索引 indexes，移除array中对应的元素，并返回被移除元素的数组。

const pullAtArr = ['a', 'b', 'c', 'd']
const pullAt = _.pullAt(pullAtArr, 1, 3)
// => pullAtArr:[ "a", "c" ]
// => pullAt:[ "b", "d" ]

31、remove(array, pridicate)

移除数组中predicate（断言）返回为真值的所有元素

//删除掉大等30岁的人
const remove = _.remove([
  { name: 'Jerry', age: 28 },
  { name: 'Tom', age: 35 },
  { name: 'Spike', age: 38 },
], item=>item.age<30)
// => [ { "name": "Jerry", "age": 28 } ]

32、reverse(array)

反转array

33、slice(array, start=0, end=array.length) 裁剪

裁剪数组array，从 start 位置开始到end结束，但不包括 end 本身的位置。

const slice = _.slice(['a', 'b', 'c', 'd'], 2, 4)
// => [ "c", "d" ]

34、sortedIndex(array, value)

使用二进制的方式检索来决定 value值 应该插入到数组中 尽可能小的索引位置，以保证array的排序。

• 这里的array必须是有序的。
• 类似：sortedLastIndex是最大位置

const sortedIndex = _.sortedIndex(['a', 'e', 'h'], 'g')
// => 2

理解：value应该在array的哪个最小位置

35、sortedIndexBy(array, value, iterator)

迭代器调用每一个数组（array）元素，返回结果和value 值比较来计算排序。

• 这里的array必须是有序的。
• 类似：sortedLastIndexBy是最大位置

const sortedIndexBy = _.sortedIndexBy([
  { name: 'Jerry', age: 28 },
  { name: 'Tom', age: 35 },
  { name: 'Spike', age: 38 },
], { name: 'Temp', age: 30 }, item=>{
  return item.age
})
// => 1

理解：根据迭代器的结果来判断value应该在array的哪个最小位置

36、sortedIndexOf(array, value)

它是在已经排序的数组array上执行二进制检索。

• 这里的array必须是有序的。
• 类似：sortedLastIndexOf是最大位置

const sortedIndexOf = _.sortedIndexOf(['a', 'd', 'e'], 'd')
// => 1

理解：d在数组中的哪个最小位置

37、sortedUniq(array) 有序数组去重

• 这里的array必须是有序的。

const sortedUniq = _.sortedUniq(['a', 'a', 'b', 'c', 'c'])
// => [ "a", "b", "c" ]

38、sortedUniqBy(array, iterator) 有序数组去重

• 这里的array必须是有序的。

const sortedUniqBy = _.sortedUniqBy([
  { x: 1.1, y: 2.1 },
  { x: 1.2, y: 2.6 },
  { x: 2.7, y: 1.6 },
  { x: 3.9, y: 1.6 },
], item=>Math.floor(item.x))
// => [ { "x": 1.1, "y": 2.1 }, { "x": 2.7, "y": 1.6 }, { "x": 3.9, "y": 1.6 } ]

理解：案例中{ x: 1.2, y: 2.6 }没了，说明通过x的向下取整后的新值与第一元素同为1所以被忽略了。

39、tail(array) 掐头

获取除了array数组第一个元素以外的全部元素。(除了第一个元素)

const tail = _.tail(['a', 'b', 'c'])
// => [ "b", "c" ]

40、take(array, n=1) 取片

创建一个数组切片，从array数组的起始元素开始提取n个元素。（获取从0到n个）

const take = _.take(['a', 'b', 'c'], 2)
// => [ "a", "b" ]

41、takeRight(array, n=1)

创建一个数组切片，从array数组的最后一个元素开始提取n个元素。(从右获取n个)

const takeRight = _.takeRight(['a', 'b', 'c'], 2)
// => [ "b", "c" ]

42、takeRightWhile(array, predicate)

从array数组的最后一个元素开始提取元素，直到 predicate 返回假值

const takeRightWhile = _.takeRightWhile([
  { name: 'Jerry', age: 28 },
  { name: 'Tom', age: 30 },
  { name: 'Spike', age: 35 },
], item=>item.age>30)
// => [ { "name": "Spike", "age": 35 } ]

从右往左选择，迭代器在第二个元素返回了假值

43、takeWhile(array, predicate)

从array数组的起始元素开始提取元素，，直到 predicate 返回假值。

const takeWhile = _.takeWhile([
  { name: 'Jerry', age: 28 },
  { name: 'Tom', age: 30 },
  { name: 'Spike', age: 35 },
], item=>item.age<30)
// => [ { "name": "Jerry", "age": 28 } ]

与42相反

44、union(…array) 并集

创建一个按顺序排列的唯一值的数组

const union = _.union(['a'], ['d', 'a'], ['c', 'd'])
// => [ "a", "d", "c" ]

做并集再去重，顺序按照数组顺序，后面的重复数据会被忽略

45、unionBy(…array, iterator)

调用每一个数组的每个元素以产生唯一性计算的标准。

const unionBy = _.unionBy([2.1], [1.2, 2.3], Math.floor);
// => [2.1, 1.2]

通过迭代函数把每一项都计算为一个值，通过这个值来做并集。

46、unionWith(…Array, comparator)

接受一个 comparator 调用比较arrays数组的每一个元素

const unionWith = _.unionWith(
  [{ name: 'Tom', age: 35 }, { name: 'Jerry', age: 30 }],
  [{ name: 'Tom', age: 45 }, { name: 'Spike', age: 38 }]
  , ( arrVal, othVal )=>{
    return arrVal.name == othVal.name
  })
// => [ { "name": "Tom", "age": 35 }, { "name": "Jerry", "age": 30 }, { "name": "Spike", "age": 38 } ]

理解：…Array做并集计算，通过比较函数来进行比较，如果相同（比较方法回访true），则认为是相同元素，后面的值被忽略。案例中，如果name相同，则视数组项为相同元素，后面的值{ name: 'Tom', age: 45 }被忽略了。

47、uniq(array) 去重

创建一个去重后的array数组副本

const uniq = _.uniq(['a', 'b', 'b', 'c'])
// => [ "a", "b", "c" ]

48、uniqBy(array, iterator)

它接受一个 iteratee （迭代函数），调用每一个数组（array）的每个元素以产生唯一性计算的标准

const uniqBy = _.uniqBy([1.2, 2.3, 1.9], Math.floor)
// => [ 1.2, 2.3 ]

49、uniqWith(array, comparator)

除了它接受一个 comparator 调用比较arrays数组的每一个元素。

const uniqWith = _.uniqWith([
  { x: '1', y: '2' },
  { x: '2', y: '3' },
  { x: '1', y: '2' },
], (arrVal, othVal)=>{
  return arrVal.x == othVal.x && arrVal.y == othVal.y
})
// => [ { "x": "1", "y": "2" }, { "x": "2", "y": "3" } ]

理解：

50、unzip(array) 一解多

与 zip 相反

var zipped = _.zip(['fred', 'barney'], [30, 40], [true, false]);
// => [['fred', 30, true], ['barney', 40, false]]
 
_.unzip(zipped);
// => [['fred', 'barney'], [30, 40], [true, false]]

理解：unzip是解压缩的意思， 所以这里就是把一个数组解压缩为多个数组

51、 unzipWith(array, iterator)

它接受一个iteratee指定重组值应该如何被组合

const unzipWith = _.unzipWith([
  [1, 10, 100],
  [2, 20, 200],
  [3, 30, 300],
], (...val)=>{
  return val[0]+val[1]+val[2]
})
// => [ 6, 60, 600 ]

理解：通过迭代函数返回值来重新分组

52、without(array, …*)

创建一个剔除所有给定值的新数组，剔除值的时候，使用SameValueZero做相等比较

const without = _.without(['a', 'b', 'd'], 'd', 'e')
// => [ "a", "b" ]

53、xor(…array) 去交

创建一个给定数组唯一值的数组，使用symmetric difference做等值比较

const xor = _.xor(['a', 'b'], ['b', 'c'])
// => [ "a", "c" ]

54、xorBy(…array, iterator)

它接受 iteratee（迭代器），这个迭代器 调用每一个 arrays（数组）的每一个值，以生成比较的新值。

const xorBy = _.xorBy(
  [
    { name: 'Tom', age: 35 },
    { name: 'Jerry', age: 34 },
  ],
  [
    { name: 'Tom', age: 35 },
    { name: 'Spike', age: 38 },
  ],
  item=>{
    return item.name
  },
)
// => [ { "name": "Jerry", "age": 34 }, { "name": "Spike", "age": 38 } ]

55、xorWith(…array, comparator)

它接受一个 comparator ，以调用比较数组的元素。

const xorWith = _.xorWith(
  [
    { name: 'Tom', age: 35 },
    { name: 'Jerry', age: 34 },
  ],
  [
    { name: 'Tom', age: 35 },
    { name: 'Spike', age: 38 },
  ],
  (arrVal, othVal)=>{
    return arrVal.name == othVal.name && arrVal.age == othVal.age
  });
//=> [ { "name": "Jerry", "age": 34 }, { "name": "Spike", "age": 38 } ]

56、zip(…array) 多压一

创建一个分组元素的数组，数组的第一个元素包含所有给定数组的第一个元素，数组的第二个元素包含所有给定数组的第二个元素，以此类推。

const zip = _.zip(['Tom', 'Spike'], [35, 38])
// => [ [ "Tom", 35 ], [ "Spike", 38 ] ]

理解：zip是压缩的意思， 所以这里就是把多个数组压为一个数组

57、zipObject(props=[], values=[])

它接受2个数组，第一个数组中的值作为属性标识符（属性名），第二个数组中的值作为相应的属性值。

const zipObject = _.zipObject(['name', 'age'], ['Tom', 35])
// => { "name": "Tom", "age": 35 }

理解：zip是压缩的意思，所以这里可以把两个数组的值对应的压缩为一个Object

58、zipObjectDeep([props=[]], [values=[]])

这个方法类似_.zipObject，除了它支持属性路径。

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

59、zipWith(…array, iterator)

它接受一个 iteratee（迭代函数），来 指定分组的值应该如何被组合。

const zipWith = _.zipWith([1, 2, 3], [10, 20, 30], (arrVal, othVal)=>{
  return arrVal + othVal
})
// => [ 11, 22, 33 ]