lodash 工具库

lodash是一套工具库，内部封装了很多字符串、数组、对象等常见数据类型的处理函数。

1.lodash的引用

import _ from 'lodash'

用一个数组遍历来说明为什么要使用lodash

常规数组遍历

agent.forEach(function (n,key) {agent[key].agent_id = agent[key].agent_name;return agent;
})

使用lodash来遍历

_.forEach(agent,function(n,key) {agent[key].agent_id= agent[key].agent_name
})

这是一个常见的forEach的数组遍历，使用了lodash过后，_.forEach()这是一个值，而不是一个函数。就可以直接

const arr = _.forEach();

这时候arr就是新的数组agent。而在常规的js数组遍历中，还需要考虑return的值和this的指向问题。虽然这样看起来，二者相差不大，但是在实际的开发过程中，熟练的使用lodash能大大的提高开发的效率。

再来总结一些lodash常用函数（还是推荐大家能去官网把所有的函数看一遍增加一些印象）

1.chunk，将数组进行切分。（也是官网的第一个函数）

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

这个函数把数组按照一定的长度分开，返回新的数组。（片段化数组）

2.compact，去除假值。（将所有的空值，0，NaN过滤掉）

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

对应的还有一个数组去重函数，这在实际的开发中很有作用。

3.uniq，数组去重。（将数组中的对象去重，只能是数组去重，不能是对象去重。）

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

这跟介绍的第二个函数compact有很好的配合作用。（后端接口传来的数据很多是有重复或者空值的，这时候就可以使用两个函数来过滤数据。ladash只是最基础的库，其实可以将几个函数封装起来组件自己的库。）

4.filter和reject，过滤集合，传入匿名函数。（二者放在一起讨论的原因是，两个函数类似但返回的值是相反。）

_.filter([1,2],x => x = 1) // => [1]_.reject([1,2],x => x=1) // => [2]

这两个过滤器，第二个参数值是false的时候返回是reject的功能，相反是true的时候是filter。

5.map和forEach，数组遍历。（相似）

如果不明白map和forEach有什么相似的可以百度一下，简单说一下不同点就是，map的回调函数中是支持return返回值的。

不过二者都不改变原来的数组。

_.map([1,2],x => x+1) // => [2,3]

推荐使用map。

6.merge,参数合并。（merge函数像是Git的merge分支操作一样，将两个参数合并在一起。）

官网的解释是，递归的将源对象和继承的可枚举字符串监控属性合并到目标对象中。源对象从左到右引用，后续来源将覆盖以前来源的属性分配。

var object = {'a': [{ 'b': 2 }, { 'd': 4 }]
};var other = {'a': [{ 'c': 3 }, { 'e': 5 }]
};_.merge(object, other); // => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }

这里就像借用官网的代码来解释一下了。在实际开发中，前端在接口的请求可以merge一下之前的query和现在改变的查询的值，再去请求后端接口的数据。

7.extend，类似参数对象合并。

function Foo() {this.a = 1;
}function Bar() {this.c = 3;
}Foo.prototype.b = 2;
Bar.prototype.d = 4;_.assignIn({ 'a': 0 }, new Foo, new Bar); // => { 'a': 1, 'b': 2, 'c': 3, 'd': 4 }

lodash 工具库相关推荐

lodash工具库用法
lodash工具库用法一.引用二.用法首先要明白的是lodash的所有函数都不会在原有的数据上进行操作,而是复制出一个新的数据而不改变原有数据.类似immutable.js的理念去处理. 一.引 ...
Lodash.js：实用的工具库
Lodash.js:实用的工具库如官方所介绍的那样,Lodash是一个具有一致接口.模块化.高性能的JavaScript工具库.一开始Lodash只是Underscore.js的一个fork,之后再 ...
【JavaScript工具库】Lodash
JS使用工具库:Lodash 作用:高效处理array.number.objects.string等对象,降低JS操作难度特点:不会影响原实例对象,返回操作后的结果或新对象,语义化程度高例如: 数 ...
Licia：最全最实用的 JavaScript 工具库
前言在业务开发过程中,我们经常会重复使用日期格式化.cookie 操作.模板.浏览器判断.类型判断等功能.为了避免不同项目之间进行复制粘贴,可以将这些常用的函数封装到一起并发布 npm 包.在将近三 ...
写在2021: 值得关注/学习的前端框架和工具库
前言最近在知乎看到了这么个问题:学完Vue还有必要学习React和Node吗?[1], 有很奇妙的感觉,因为我在最开始入门前端时,也是以Vue入的门,在"学完"Vue之后, 我也 ...
10个常用的JS工具库
10个常用的JS工具库,80%的项目都在用! Avue Cloud 2022-01-26 09:46 图片高手区别于普通人的重要一点是,他们善于利用工具,把更多的时间留给了规划和思考.写代码也是同样 ...
当前最流行的 js 工具库
高手区别于普通人的重要一点是,他们善于利用工具,把更多的时间留给了规划和思考.写代码也是同样的道理,工具用好了,你就有更多的时间来规划架构和攻克难点.今天就给大家分享一下当前最流行的 js 工具库,如 ...
开发知识竞赛答题活动小程序过程中使用到的实用工具库介绍
前言我在做知识竞赛答题活动小程序经常需要处理一些比较基础的事情,比如时间.数组.数字.对象.字符串等处理,自己造轮子的话成本会比较高.这时候我们可以去找一些别人已经写好的开源模块或者开源库,我们直接 ...
VueUse——一个提升开发效率的Vue3工具库，让你早早下班
VueUse--一个大大提升开发效率的Vue3工具库,让你早下班关注微信公众号"前端大侦探"了解更多精彩内容! 前言 VueUse是一个基于 Composition API 实现 ...

lodash 工具库

lodash 工具库相关推荐

最新文章

热门文章