龙陌的博客

外观

按需加载 ​

高阶函数: 支持下载单个方法的，eg：npm i -D lodash.debounce

lodash数组常用方法 ​

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

var array = [1, 2, 3, 1, 2, 3];

_.pull(array, 2, 3);
console.log(array);
// => [1, 1]

**注意：**和_.without 方法不同，这个方法会改变数组。使用_.remove从一个数组中移除元素。

_.without 移除数组array中所有和给定值相等的元素 但不会修改原数组 ​

_.difference 数组求差集 ​

difference：计算两个数组的差集，返回在第一个数组中出现但不在第二个数组中出现的元素。

同样可以使用Lodash库中的方法来实现更语义化的表达。对于这一行代码：

javascript
newCheckedKeys = newCheckedKeys.filter(item => !affectedInjectKeys.includes(item));

可以使用_.difference()方法替换，以获取newCheckedKeys中不在affectedInjectKeys中的元素。优化后的代码如下：

javascript
import _ from 'lodash';

// ...

if (!isChecked) {
  // 根据isChecked更新newCheckedKeys
  newCheckedKeys = _.difference(newCheckedKeys, affectedInjectKeys);
}

// ...

这里，_.difference(newCheckedKeys, affectedInjectKeys)返回一个新数组，包含所有在newCheckedKeys 中但不在affectedInjectKeys中的元素，效果等同于原代码中的filter()操作。这种方法名更直观地表达了“求差集”的意图。

differenceBy：根据某个字段计算差集。 ​

differenceWith：根据某个条件函数计算差集。 ​

_.intersection 数组求交集 ​

intersection：返回一个包含所有传入数组交集元素的新数组。

对于这一行代码：

javascript
const list = allChannelKeys.filter(item => newCheckedKeys.includes(item));

可以使用Lodash的_.intersection()方法来替换，以获取两个数组之间的交集。优化后的代码如下：

javascript
import _ from 'lodash';

// ...

const list = _.intersection(allChannelKeys, newCheckedKeys);

// ...

这里，_.intersection(allChannelKeys, newCheckedKeys)返回一个新的数组，包含所有同时出现在allChannelKeys 和newCheckedKeys中的元素，效果等同于原代码中的filter()操作。使用intersection方法使得代码更具可读性，明确表达了计算交集的意图。

intersectionBy：根据某个字段来进行计算交集。 ​

intersectionWith：根据某个条件函数来计算交集，比如使用isEqual。 ​

js
const objects = [{ x: 1, y: 2 }, { x: 2, y: 1 }];
const others = [{ x: 1, y: 1 }, { x: 1, y: 2 }];

_.intersectionWith(objects, others, _.isEqual);
// => [{ 'x': 1, 'y': 2 }]

求合集 union：返回一个新的联合数组 ​

unionBy：根据某个字段来计算合集。 ​

unionWith：根据某个条件函数来计算合集。 ​

_.map()是原生JS中的数组方法的升级版，我们可以通过一个字符串而不是回调函数来浏览深度嵌套的对象属性 ​

    var arr = [{
        "name": "张三",
        "phone": [{"name": "MI"}, {"name": "iphone"}]
    }, {
        "name": "李四",
        "phone": [{"name": "HUAWEI"}, {"name": "honor"}]
    }];
    var jsMap = arr.map(function (owner) {
        return owner.phone[0].name;
    });
    var lodashMap = _.map(arr, 'phone[0].name');
    console.log(lodashMap);    // MI  HUAWEI

_.chunk(array, [size=1])按照size的大小来拆分array数组 ​

将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。

如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。

返回一个包含拆分区块的新数组（注：相当于一个二维数组）。

var chunk1 = _.chunk(['a', 'b', 'c', 'd'], 2);
 console.log(chunk1);      // [['a', 'b'], ['c', 'd']]
var chunk2 = _.chunk(['a', 'b', 'c', 'd'], 3);
 console.log(chunk2);      // [['a', 'b', 'c'], ['d']]

求总和 sum：返回总和。 ​

sumBy：根据某个字段计算并返回总和。 ​

js
const objects = [{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }];

_.sumBy(objects, (o) => {
  return o.n;
});
// => 20

_.sumBy(objects, 'n');
// => 20

根据条件排序 sortBy：返回排序后的数组。 ​

默认升序排序

js
const users = [
  { user: 'fred', age: 48 },
  { user: 'barney', age: 36 },
  { user: 'fred', age: 40 },
  { user: 'barney', age: 34 },
];
// 按年龄排序
console.log(_.sortBy(users, (o) => {
  return o.age;
}));
js

import sortby from 'lodash.sortby';

const users = [
  { user: 'fred', age: 43 },
  { user: 'barney', age: 36 },
  { user: 'faed', age: 47 },
  { user: 'barney', age: 34 },
];

const a = sortby(users, (o) => {
  return o.user;
});
/**
 a数组中基于user来排序，如果user相同，则返回原顺序
 0: {user: "barney", age: 36}
 1: {user: "barney", age: 34}
 2: {user: "faed", age: 47}
 3: {user: "fred", age: 43}
 */

const b = sortby(users, ['user', 'age']);
/**
 b数组先按照user排序，user相同的情况下在按照age排序
 0: {user: "barney", age: 34}
 1: {user: "barney", age: 36}
 2: {user: "faed", age: 47}
 3: {user: "fred", age: 43}

 */
const c = sortby(users, 'user', (o) => {
  return Math.floor(o.age / 10);
});

/**
 c数组先按照user排序，然后按照Math.floor(o.age / 10)的结果排序
 0: {user: "barney", age: 36}
 1: {user: "barney", age: 34}
 2: {user: "faed", age: 47}
 3: {user: "fred", age: 43}

 */
console.log('a', a);
console.log('b', b);
console.log('c', c);
export default {
  name: 'Form4',
  title: '测试',
};

sort() 方法就地对数组的元素进行排序，并返回对相同数组的引用。 默认排序是将元素转换为字符串，然后按照它们的 UTF-16 码元值 升序排序。

这是 sort 的返回值对应的顺序，也就是如果小于 0，就是正序，原因也简单， [1,2,3] 这种 1 - 2 = -1, 2 - 3 = -1

compareFn(a, b) 返回值 排序顺序

0 a 在 b 后，如 [b, a] < 0 a 在 b 前，如 [a, b] === 0 保持 a 和 b 原来的顺序

reject ​

_.reject(collection,[predicate]) 函数用于从集合中排除符合给定条件 predicate 的元素，并返回一个新的数组。

collection：要被遍历的集合，可以是数组、对象或字符串。 predicate：一个函数或对象，用于判断元素是否应该被排除。如果传递一个对象，则会使用 _.matches 进行浅层相等比较。 通过使用 _.reject 函数，你可以轻松地根据自定义条件排除集合中的元素，得到一个符合要求的新数组。

text
const users = [
	{ name: 'Alice', age: 25 },
	{ name: 'Bob', age: 30 },
	{ name: 'Charlie', age: 20 }
];

const result = _.reject(users, { age: 30 });
console.log(result);
// [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 20 }]

const numbers = [1, 2, 3, 4, 5];
const result = _.reject(numbers, (num) => num % 2 === 0);
console.log(result); //[1,5]

filter ​

_.filter(collection,[predicate]) 函数用于过滤出集合中符合给定条件 predicate 的元素，并返回一个新的数组。

collection：要被遍历的集合，可以是数组、对象或字符串。 predicate： 一个函数或对象，用于判断元素是否应该被保留。（断言函数）调用三个参数： (value, index|key, collection) 。

text
// 1. 一个数字数组 `numbers`。我们想要筛选出其中的偶数。
const numbers = [1, 2, 3, 4, 5];

const result = _.filter(numbers, (num) => num % 2 === 0);
console.log(result);
// [2, 4]
// ------------------------------------------------------------------
//2.一个包含用户对象的数组`users`。我们想要筛选出年龄为`30`的用户对象。
const users = [
	{ name: 'Alice', age },
	{ name: 'Bob', age },
	{ name: 'Charlie', age }
];

const result = _.filter(users, { age: 30 });
console.log(result);
//{name: 'Bob', age:30}]

groupBy ​

_.groupBy(collection,[iteratee]) 函数根据指定的标准将集合进行分组，并返回一个包含分组结果的对象。

collection：要被分组的集合，可以是数组、对象或字符串。 iteratee：一个函数或属性名称，用作每个元素的分组标准。默认情况下，它使用自身作为键进行分组。 通过使用 _.groupBy 函数，你可以根据指定的标准轻松对集合进行分组，并得到一个包含分组结果的对象。

text
// 我们有一个包含用户对象的数组 `users`。我们想根据用户的名称对它们进行分组。通过调用 `_.groupBy` 函数，并传入 `'name'`作为分组标准，它会遍历整个集合并按照名称进行分组。
const users = [
	{ name: 'Alice', age: 25 },
	{ name: 'Bob', age: 30 },
	{ name: 'Charlie', age: 20 },
	{ name: 'Alice', age: 35 }
];

const result = _.groupBy(users, 'name');
console.log(result);
/*
{
	Alice: [
		{ name: 'Alice', age: 25 },
		{ name: 'Alice', age: 35 }
	],
	Bob: [
		{ name: 'Bob', age: 30 }
	],
	Charlie: [
		{ name: 'Charlie', age: 20 }
	]
}
*/

// 我们有一个数字数组 `numbers`。我们使用一个函数作为 `iteratee` 参数，判断元素是奇数还是偶数，并根据结果进行分组
const numbers = [1, 2, 3, 4, 5];
const result = _.groupBy(numbers, (num) => num % 2 === 0 ? 'even' : 'odd');
console.log(result);
/*
{
	odd:[1,3,5],
	even:[2,4]
}
*/

将数组按照某个属性进行分类显示，groupBy 与map合作

ts
import { groupBy } from 'lodash';

const userContent = stateSit.participants
  ? Object.values(groupBy(stateSit.participants, 'teamId'))
    .map((men, i) => `${men[0].team}：${men.map(({ employeeId, employeeName }, idx) => employeeName).join('，')}`)
    .join('；')
  : null;

image.png

lodash 对象常用方法 ​

pick / 创建选中属性的对象 ​

作用：从object中挑出对应的属性，返回一个新对象。

项目中的应用：从后端接口中，pick出对应你需要用的值，然后进行逻辑处理和页面渲染，或者pick对应的值，传给后端。

pickBy ​

addAct: async (params) => {
    await api.addApi(pickBy(params));
},

omit / 剔除对象某些属性 ​

作用：忽略掉某些属性后，剩下的属性组成一个新对象。

项目中的应用：代替delete obj.xx，剔除某些属性。

merge ​

lodash的一个公共函数merge,它表示递归合并来源对象自身和继承的可枚举属性到目标对象。后续的来源对象属性会覆盖之前同名的属性

let result = merge(recordData, values);

该方法类似_.assign， 除了它递归合并sources来源对象自身和继承的可枚举属性到object目标对象。

如果目标值存在，被解析为undefined的sources来源对象属性将被跳过。

数组和普通对象会递归合并，其他对象和值会被直接分配覆盖。

源对象从从左到右分配。

后续的来源对象属性会覆盖之前分配的属性。

在传递参数给后端时，若需要将多个对象组合，并且可能其中的某个对象为undefined,则可以使用该方法进行对象合并,省去了判断 undefined

isEmpty ​

isEmpty，当我传入的业务数据为空时，比如空数组[]、undefined、null时，都会被认为这是一个无数据的情况，这时候我们就展示一个空状态的组件，它可能由一张背景图构成

_.get(object, path, [defaultValue]) ​

作用：从对象中获取路径path的值，如果获取值为undefined，则用defaultValue代替。

使用示例：

js
const _ = require('lodash');
const object = { a: { b: [{ c: 1 }, null] }, d: 3 };

console.log(_.get(object, 'a.b[0].c'));
// 输出 1
console.log(_.get(object, ['a', 'b', 1], 4));
// 输出 null
console.log(_.get(object, 'e', 5));
// 输出 5

项目中的应用：这个是获取数据的神器，再也不用写出if(a && a.b && a.b.c)的这种代码了，直接用_.get(a, 'b.c')搞定，_ .get里面会帮你做判断，绝对省事！

_.set(object, path, value) ​

作用：给object上对应的path设置值，路径不存在会自动创建，索引创建成数组，其它创建为对象。

项目中的应用：给对象设置值，再也不用设置的时候一层层判断了。

_.unset(object, path) ​

作用：与_.set相反，删除object上对应的path上的值，删除成功返回true，否则返回false

项目中的应用：给对象删除值，替换delete a.b.c。 使用delete如果在访问a.b.c的时候，发现没有b属性就会报错，而_.unset不会报错，有更加好的容错处理。

其他实用函数 ​

_.isNil(value) ​

作用：某个值是null或者undefined

项目中的应用：有时候我们并不想用if(obj.xx)判断是否有值，因为0也是算有值的， 而且可能在后端定义中还有含义，但它转成boolean去判断却是false，所以我们用_.isNil去判断更为准确

_.isEmpty(value) ​

作用：判断一个对象/数组/map/set是否为空

项目中的应用：对传入的数据做非空校验。

7、_.flow([funcs]) ​

作用：传入一个函数数组，并返回一个新函数。_.flow内部从左到右依次调用数组中的函数，上一次函数的返回的结果，会作为下个函数调用的入参

使用示例：

js
const _ = require('lodash');

const add = (a, b) => a + b;
const multi = a => a * a;
const computerFn = _.flow([add, multi]);
console.log(computerFn(1, 2));
// 输出 9

项目中的应用：我们可以把各种工具方法进行抽离，然后用_.flow自由组装成新的工具函数，帮助我们流式处理数据，有点函数式编程那味儿了。

最新：Lodash 严重安全漏洞背后你不得不知道的 JavaScript 知识 ​

https://blog.csdn.net/bdfcfff77fa/article/details/135775798

Contributors ​

作者:Long Mo
字数统计:3.1k 字
阅读时长:11 分钟
Long Mo
文章作者：Long Mo
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Longmo Docs ！

Copyright © 2024-present Longmo