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工具库中cloneDeep深拷贝的使用
在vue向数据库提交数据的过程中,可能需要处理某些数据,比如有以下要求:传递的参数必须是以逗号分隔的分类列表 但此时如果vue组件中的数据却是数组形式的这个时候需要用到数组的 join 方法对数据进行 ...
- 前端MVC Vue2学习总结(六)——axios与跨域HTTP请求、Lodash工具库
一.axios Vue更新到2.0之后宣告不再对vue-resource更新,推荐使用axios,axios是一个用于客户端与服务器通信的组件,axios 是一个基于Promise 用于浏览器和 no ...
- 4.npm模块安装和使用(axios异步请求,lodash工具库)
建立package.json npm init 下载包 npm install axios npm install lodash 下载包,并加到package里面 npm install axios ...
- Lo-Dash – 替代 Underscore 的优秀 JS 工具库
前端开发人员大都喜欢 Underscore,它的工具函数很实用,用法简单.这里给大家推荐另外一个功能更全面的 JavaScript 工具——Lo-Dash,帮助你更好的开发网站和 Web 应用程序. ...
- JS工具库之Lodash
破狼 JavaScript工具库之Lodash 2015-04-11 16:08 by 破狼, 235 阅读, 2 评论, 收藏, 编辑 你还在为JavaScript中的数据转换.匹配.查找等烦恼吗? ...
- js工具库---Lodash
Lodash是一个一致性.模块化.高性能的 JavaScript 实用工具库 为什么选择 Lodash ? Lodash 通过降低 array.number.objects.string 等等的使用难 ...
- Lodash JavaScript 实用工具库
地址:https://www.lodashjs.com/ Lodash 是一个一致性.模块化.高性能的 JavaScript 实用工具库.
- 非常好用的JavaScript 工具库--lodash
一.什么是lodash? lodash库是一个具有一致接口.模块化.高性能等特性的 JavaScript 工具库. lodash是一个javascript库,也是Node JS的常用模块,它内部封装了 ...
- 2018年你需要知道的13个JavaScript工具库
译者按: 你可能已经用到Underscore或者Lodash.本文列举了13个常用的JavaScript工具库来提高开发效率. 原文: 11 Javascript Utility Libraries ...
随机推荐
- Selenium2+python自动化65-js定位几种方法总结【转载】
前言 本篇总结了几种js常用的定位元素方法,并用js点击按钮,对input输入框输入文本 一.以下总结了5种js定位的方法 除了id是定位到的是单个element元素对象,其它的都是elements返 ...
- Activiti 6.0 入门篇
从Activiti网站下载Activiti UI WAR文件(或百度云) 将下载的activiti-app.war复制到Tomcat的webapps目录. 启动Tomcat 打开浏览器并转到 http ...
- ionic3 cordova ionic-native插件
ionic-native插件 cordova安装插件 以及 ionic-native插件使用过程以及步骤 cordova plugin add cordova-plugin-插件名称. //安装插件 ...
- [loj#115] 无源汇有上下界可行流 网络流
#115. 无源汇有上下界可行流 内存限制:256 MiB时间限制:1000 ms标准输入输出 题目类型:传统评测方式:Special Judge 上传者: 匿名 提交提交记录统计讨论测试数据 题 ...
- 最小生成树的Prim算法
构造最小生成树的Prim算法 假设G=(V,E)为一连通网,其中V为网中所有顶点的集合,E为网中所有带权边的集合.设置两个新的集合U和T,其中集合U用于存放G的最小生成树的顶点,集合T用于 ...
- Hystrix熔断器(六)
一.分布式面临的问题 复杂的分布式体系结构中的应用程序有数十个依赖关系,每个依赖关系在某些时候将不可避免地失败雪崩效应多个微服务之间调用的时候,假设服务A调用微服务B和微服务C, 微服务B和微服务C又 ...
- 前端设计师必须知道的10个重要的CSS技巧
对于一个初入门的前端设计师,在设计修改网站前端的时候,我们需要编写一些CSS.JS的内容达到界面效果.今天分享10个对于前端设计师来说重要的CSS技巧,这也是我在给许多客户做网站的过程当中总结出来的. ...
- Eclipse导入idea 项目
学校做的项目老师会导入到Eclipse下查看. 使用idea做的项目直接导入eclipse会发生问题(file-Export to Eclipse) 让Eclipse兼容idea项目,或者直接导入id ...
- 某道我xjb想的题
Function 时限:5s 空限:256M (都是单点) Discription 现在你有一个函数: inline int f(int x){ int tot=0,alr=0,now; while( ...
- 【动态规划】【记忆化搜索】1017 乘积最大 2000年NOIP全国联赛普及组NOIP全国联赛提高组
跟CODEVS 3415没有什么区别,也不用高精度. http://www.cnblogs.com/autsky-jadek/p/4055184.html #include<cstdio> ...