博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
lodash 工具库
阅读量:6970 次
发布时间:2019-06-27

本文共 1856 字,大约阅读时间需要 6 分钟。

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.filterreject,过滤集合,传入匿名函数。(二者放在一起讨论的原因是,两个函数类似但返回的值是相反。)

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

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

 

5.mapforEach,数组遍历。(相似)

如果不明白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 }

.

转载地址:http://jussl.baihongyu.com/

你可能感兴趣的文章
【下载】推荐一款免费的人脸识别SDK
查看>>
不定参数
查看>>
浏览器各种距离
查看>>
使用Python读取Google Spreadsheet的内容并写入到mangodb
查看>>
DOM操作和jQuery实现选项移动操作
查看>>
[emuch.net]MatrixComputations(1-6)
查看>>
ByteArrayOutputStream用法
查看>>
Floyed那些事~~~~~
查看>>
Python 学习笔记1 安装和IDE
查看>>
H5新增标签
查看>>
日志分析
查看>>
Extract Datasets
查看>>
递归加法运算
查看>>
蓝桥杯 倍数问题(dfs,枚举组合数)
查看>>
蓝桥杯 穿越雷区(bfs)
查看>>
SQL FORMAT() 函数实例
查看>>
iTerm 使用expect实现自动远程登录,登录跳板机
查看>>
JavaScript 面试:什么是纯函数?
查看>>
linux终端下查Dict.cn/WebsterOnline/Etymonline.com
查看>>
Hadoop(Pig)统计IP地理位置
查看>>