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 工具库的更多相关文章

  1. Lodash工具库中cloneDeep深拷贝的使用

    在vue向数据库提交数据的过程中,可能需要处理某些数据,比如有以下要求:传递的参数必须是以逗号分隔的分类列表 但此时如果vue组件中的数据却是数组形式的这个时候需要用到数组的 join 方法对数据进行 ...

  2. 前端MVC Vue2学习总结(六)——axios与跨域HTTP请求、Lodash工具库

    一.axios Vue更新到2.0之后宣告不再对vue-resource更新,推荐使用axios,axios是一个用于客户端与服务器通信的组件,axios 是一个基于Promise 用于浏览器和 no ...

  3. 4.npm模块安装和使用(axios异步请求,lodash工具库)

    建立package.json npm init 下载包 npm install axios npm install lodash 下载包,并加到package里面 npm install axios ...

  4. Lo-Dash – 替代 Underscore 的优秀 JS 工具库

    前端开发人员大都喜欢 Underscore,它的工具函数很实用,用法简单.这里给大家推荐另外一个功能更全面的 JavaScript 工具——Lo-Dash,帮助你更好的开发网站和 Web 应用程序. ...

  5. JS工具库之Lodash

    破狼 JavaScript工具库之Lodash 2015-04-11 16:08 by 破狼, 235 阅读, 2 评论, 收藏, 编辑 你还在为JavaScript中的数据转换.匹配.查找等烦恼吗? ...

  6. js工具库---Lodash

    Lodash是一个一致性.模块化.高性能的 JavaScript 实用工具库 为什么选择 Lodash ? Lodash 通过降低 array.number.objects.string 等等的使用难 ...

  7. Lodash JavaScript 实用工具库

    地址:https://www.lodashjs.com/ Lodash 是一个一致性.模块化.高性能的 JavaScript 实用工具库.

  8. 非常好用的JavaScript 工具库--lodash

    一.什么是lodash? lodash库是一个具有一致接口.模块化.高性能等特性的 JavaScript 工具库. lodash是一个javascript库,也是Node JS的常用模块,它内部封装了 ...

  9. 2018年你需要知道的13个JavaScript工具库

    译者按: 你可能已经用到Underscore或者Lodash.本文列举了13个常用的JavaScript工具库来提高开发效率. 原文: 11 Javascript Utility Libraries ...

随机推荐

  1. C# 连接SQL数据库以及操作数据库

    1.概述 ado.net提供了丰富的数据库操作,这些操作可以分为三个步骤: 第一,使用SqlConnection对象连接数据库: 第二,建立SqlCommand对象,负责SQL语句的执行和存储过程的调 ...

  2. POJ 3087 Shuffle'm Up【模拟/map/string】

    Shuffle'm Up Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14471 Accepted: 6633 Descrip ...

  3. Dijkstra算法解决单源最短路径

    单源最短路径问题:给定一个带权有向图 G = (V, E), 其中每条边的权是一个实数.另外,还给定 V 中的一个顶点,称为源.现在要计算从源到其他所有各顶点的最短路径长度.这里的长度是指路上各边权之 ...

  4. ActiveMQ学习总结

    一.消息中间件的产生的背景 1.在网络通讯中,Http请求默认采用同步请求方式,基于请求与响应模式 2.在客户端与服务器进行通讯时,客户端调用服务端接口后,必须等待服务端完成处理后返回结果给客户端才能 ...

  5. 遇见requestAnimationFrame

    今天,在读javascript异步编程的js事件深入理解部分的时候,了解到了requestAnimationFrame 这个api,在这里记录一下. 原文: setTimeout 和 setInter ...

  6. Android技巧:查看当前界面对应的活动

    常常接手别人的android代码,非常头疼不知道界面所对应的活动是哪一个.下面所说的方法可以完美解决. 新建一个BaseActivity类,继承自AppCompatActivity,并重写onCrea ...

  7. [BZOJ 3144] 切糕

    Link: BZOJ 3144 传送门 Solution: 发现要把点集分成不连通的两部分,最小割的模型还是很明显的 首先我们将原图转化为$R+1$层,从而将点权化为边权 关键还是在于建图是怎么保证$ ...

  8. POJ 3177 Redundant Paths(边双连通分量)

    [题目链接] http://poj.org/problem?id=3177 [题目大意] 给出一张图,问增加几条边,使得整张图构成双连通分量 [题解] 首先我们对图进行双连通分量缩点, 那么问题就转化 ...

  9. 【记忆化搜索】bzoj1048 [HAOI2007]分割矩阵

    标准差=√(Σ(xi-xba)2/n)=Σ(xi)2+xba*n-2*xba*sum.只需最小化每个分割出来的矩阵的平方和即可. #include<cstdio> #include< ...

  10. Android App升级Intent

    点击“更新检查”,自动下载最新版本安装包,然后开始安装,进入安装界面后很快闪退. 在这两天的适配中,发现这样一个问题,即:在升级覆盖安装软件时,程序能进入安装的界面,但会很快闪退.经过多次尝试,终于找 ...