学习lodash的几个常用方法

y191024

发布于 2023-12-26 12:07:57

41800

代码可运行

文章被收录于专栏：睡不着所以学编程

运行总次数：0

代码可运行

前几天主管和我说学一下lodash,今天就来学一下怎么使用,还有归纳一些常用的方法。

首先安装一下。

npm i --save lodash

在使用的时候引入一下，一般就是这样的↓

import_from'lodash';

然后我浏览了一下公司的项目,看他们平时都用哪些方法,下面是我找到的,接下来我们看看这些方法主要是怎么用的,在哪些场景会用。

find

遍历 collection（集合）元素，返回 predicate（断言函数）第一个返回真值的第一个元素。predicate（断言函数）调用3个参数： (value, index|key, collection)。

研究了一下,这个除了写法上和JS原生的find区别不大,就是兼容性更好一点。


    var users = [
      { user: "barney", active: true },
      { user: "fred", active: false },
      { user: "pebbles", active: true },
    ];
    
    console.log(_.find(users, (i) => i.active === true));
    console.log(users.find((i) => i.active === true));

map

创建一个数组， value（值）是 iteratee（迭代函数）遍历 collection（集合）中的每个元素后返回的结果。iteratee（迭代函数）调用3个参数： (value, index|key, collection).

参数
`collection` (Array|Object): 用来迭代的集合。
`[iteratee=_.identity]`(Array|Function|Object|string): 每次迭代调用的函数。

它和原生JS不同, 原生JS中map是只适用于数组的方法,但是在lodash中,也可以适用于对象。

    const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    const obj = { x: 10, y: 20 };

    console.log(_.map(arr, (i) => i * 2)); // [2, 4, 6, 8, 10, 12, 14, 16, 18]
    console.log(_.map(obj, (i) => i * 2)); // [20, 40]

使用场景:

 .then((res = []) => {
        const request = _.map(res, ({ id, name }) =>
          this.getArticleDetail(id).then((content) => {
            return { title: name, key: id, content };
          })
        );
      })

这是公司的真实代码。首先id和name就是我们在res中解构出来的属性,他们的值就是遍历res后每一条数据中的id和name的值，然后调了一个接口，每次调用使用参数的就是刚刚解构出来的id，在得到返回的数据后，对数据结果进行了处理，不仅返回content，还返回title和key两个字段。应该是模板中要v-for渲染的，title应该是要展示的内容。

pick

对象方法

创建一个从 object 中选中的属性的对象。第二个参数如果有多个的话就使用数组

const obj = { name: "yfty", age: 26, id: 666 };
console.log(_.pick(obj, ["name", "age"])); // {name: 'yfty', age: 26}

chunk

将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。

其实简单来说,就是将一个数组转为一个每个拥有size个元素的二维数组。这个size由我们自己传值。

constarr = [1,2,3,4,5,6,7,8,9];
console.log(_.chunk(arr,2));

结果:

他会变成每两个一组的二维数组。

使用场景：

说一下我自己遇到的吧，我要在轮播图组件上展示数组，一共有8条，每一页展示4条，我主管告诉我可以用lodash的chunk生成一个二维数组,真的很妙,更何况这个还可以分组!

get

根据 object对象的path路径获取值。如果解析 value 是 undefined 会以 defaultValue 取代

参数:
`object` (Object): 要检索的对象。
`path` (Array|string): 要获取属性的路径。
`[defaultValue]` ()*: 如果解析值是 `undefined` ，这值会被返回。

    const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    const obj = {
      info: {
        personal: {
          name: "yft",
          grade: { math: 100 },
        },
      },
    };
    console.log(_.get(obj, "info[personal].grade.math", undefined));

我来解释一下这样写的好处吧, 我看到公司的代码中一般是调接口以后获取数据里的某个属性的时候会用到这个方法, 一开始觉得没什么用, 感觉和三元运算符没什么区别, 但是我发现如果对象嵌套的深的话, 前面的某一层属性只要没有值, 那么就会报错undefined,我们总不能每一层属性都去判断吧, 所以用这个get方法会非常的方便, 只要前面的某一个属性是不存在的,那么整个返回值就会替换成第三个参数的值。就比如说我上面的代码中，只要我的info，personal，grade，math任意一个没有值，结果就会返回undefined。

nth

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

    var array = ["a", "b", "c", "d"];
    console.log(array[-2]); //undefined
    console.log(_.nth(array, -2)); // c

upperFirst

它与原生JS的toUpperCase的区别就是原生方法是将所有字母转成大写, 而upperFirst只将首字母转为大写的。

concat

创建一个新数组，将array与任何数组或值连接在一起。

他和普通的concat方法的区别就是普通的concat必须两个都是数组才能拼接（前面一句错了，划掉），但是lodash的concat可以将任何值拼接在一起。

constarr = [1,2,3,4,5,6,7,8,9];
console.log(_.concat(arr, [1],1,"1", {id:1}));

orderBy

除了它允许指定 iteratee（迭代函数）结果如何排序。如果没指定 orders（排序），所有值以升序排序。否则，指定为"desc" 降序，或者指定为 "asc" 升序，排序对应值。

    const dataList = [
      { name: "peter", score: "36" },
      { name: "amy", score: "66" },
      { name: "mary", score: "57" },
    ];
    console.log(_.orderBy(dataList, "score", "desc"));

用来展示数据的时候很有用。

filter

遍历 collection（集合）元素，返回 predicate（断言函数）返回真值的所有元素的数组。predicate（断言函数）调用三个参数：(value, index|key, collection)。

const arr = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false }
];
 
//跟js中的filter一样，支持函数
_.filter(arr, (o)=>!o.active );
 
// 通过对象过滤
_.filter(arr, { 'age': 36});// 结果是：{ 'user': 'barney', 'age': 36, 'active': true }
 
// 根据数组过滤 active===false
_.filter(arr, ['active', false]);//结果是：{ 'user': 'fred',   'age': 40, 'active': false }
 
// 根据字符串过滤
_.filter(arr, 'active');// =>结果是： { 'user': 'barney', 'age': 36, 'active': true }

findIndex

这个和原生的其实差别也不大，也是兼容性更好一些。

compact

创建一个新数组，包含原数组中所有的非假值元素。例如false, null,0, "", undefined, 和 NaN 都是被认为是“假值”。

let arr1 = [0, 1, 2, 3, "", undefined, {}, [], null, false, "1"];
console.log(_.compact(arr1)); // [1, 2, 3, {…}, Array(0), '1']

take

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

    const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    console.log(_.take(arr)); // [1]
    console.log(_.take(arr, 4)); // [1, 2, 3, 4]

使用场景:

可以获取到某一页的几条数据,比如说我们通过接口获取一组数据, 赋值给dataSource,现在我们每一页展示n条, 那么获取获取第page页的数据,就可以用这个方法了，用切片切出我们要的那一组数据。

const curPageData = _.take(dataSource, page*n）

reduce

压缩 collection（集合）为一个值，通过 iteratee（迭代函数）遍历 collection（集合）中的每个元素，每次返回的值会作为下一次迭代使用(注：作为iteratee（迭代函数）的第一个参数使用)。如果没有提供 accumulator，则 collection（集合）中的第一个元素作为初始值。(注：accumulator参数在第一次迭代的时候作为iteratee（迭代函数）第一个参数使用。) iteratee 调用4个参数： (accumulator, value, index|key, collection).

有点难以理解,来一段代码作为示范吧。

数组的话用起来和原生JS的区别不大。

console.log(_.reduce([1, 2, 3, 4], (sum, curr) => (sum += curr))); //10

但是对象也可以使用这个方法！但是看起来有点复杂

console.log(
      _.reduce(
        { a: 1, b: 2, c: 2, d: 1, e: 4 },
        (result, value, key) => {
          (result[value] || (result[value] = [])).push(key);
          return result;
        },
        {}
      )
    );

其中result就是初始值，其实就是把所以值都作为对象的键，将原本对象中值都相同的键放一起，作为这个新对象的键的值，反正key和value大家应该都能理解吧。有一点要注意的就是value和key的顺序不要搞反。

includes

检查 value(值) 是否在 collection(集合) 中。如果 collection(集合)是一个字符串，那么检查 value（值，子字符串）是否在字符串中，否则使用SameValueZero 做等值比较。如果指定 fromIndex 是负数，那么从 collection(集合) 的结尾开始检索。

参数
`collection` (Array|Object|string): 要检索的集合。
`value` ()*: 要检索的值。
`[fromIndex=0]` (number): 要检索的索引位置。

(boolean): 如果找到 value 返回 true，否则返回 false。

感觉要比原生的强大很多, 因为不止数组可以用,对象,数组,字符串都可以用。

console.log(_.includes([1, 2, 3], 3)); // true
console.log(_.includes([1, 2, 3], 2, 1)); // true 看索引值1的位置是否能检索到2
console.log(_.includes([1, 2, 3], 2, 2)); // false 看索引值1的位置是否能检索到2
console.log(_.includes({ name: "y", age: 20 }, 20)); // true
console.log(_.includes("helloworld", "hello")); // true

isEmpty

检查 value 是否为一个空对象，集合，映射或者set。判断的依据是除非是有枚举属性的对象，length 大于 0 的 arguments object, array, string 或类jquery选择器。

  const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    console.log(_.isEmpty(arr)); //false
    console.log(_.isEmpty([])); //true
    console.log(_.isEmpty({})); //true
    console.log(_.isEmpty(null)); //true
    console.log(_.isEmpty("")); //true
  </script>

使用场景:

可以用来给接口返回的值判空,也不用区分是数组还是对象,比较方便吧。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2023-12-19，如有侵权请联系 cloudcommunity@tencent.com 删除

lodash

本文分享自睡不着所以学编程微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度