lodash的使用

最新推荐文章于 2024-08-21 09:26:53 发布

memoryI

最新推荐文章于 2024-08-21 09:26:53 发布

阅读量3.4k

点赞数

文章标签： lodash

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

1.lodash的引用：

lodash的引用：

import_from '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()这是一个值，而不是一个函数

<code class="languange-javascript"> const arr=_.forEach(); </code>

这时候arr就是新的数组agent。而在常规的js数组遍历中，还需要考虑return的值和this的指向问题。

2.chunk，将数组进行切分

const arr=[1,2,3,4,5,6];

_.chunk(arr,2);

=>[[1,2],[3,4,],[5,6]]

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

3.compact,去除假值（将所有的空值，0，NaN过滤）

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

=>['1','2']

对应的还有一个数组去重函数

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

_.uniq([1,1,3])

=>[1,3]

5.filter和reject，过滤集合，传入匿名函数

_.fifter([1,2],x=>x=1)

=>[1]

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

=>[2]

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

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

=>[2,3]

7.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和现在改变的查询的值，再去请求后端的接口数据

8.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}

9.sortBy创建一个元素数组

_.sortBy(collection,[iteratess=[_.ideantity]])

以iteratee处理的结果升序排序。这个方法执行稳定排序，相同元素会保持原始排序。iteratees调用1个参数：（value）

var users=[

{'user':'fred','age':48},{'user':'barney','age':36},{'user':'fred','age':40},{'user':'barney','age':33}

];

_.sortBy(user,function(o){return o.user;});

=>objects for [['barney',36],['barney',33],['fred',48],['fred',40]]

_.sortBy(users,['user','age']);

=>object for [['barney',34],['barney',36],['fred',40],['fred',48]]

_.sortBy(users,'user',function(o){

return Math.floor(o.age/10);

})

=>object for [['barney',36],['barney',34],['fred',48],['fred',40]]

10.orderBy

_.orderBy(collection,[iteratess=[_.identity]],[orders])

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

var users=[

{'user':'fred','age':48},{'user':'barney','age':36},{'user':'fred','age':40},{'user':'barney','age':33}

];

以‘user’降序排序，再以‘age’降序排序

_.orderBy(users,['user','age'],['desc','desc']);

=>objects for [['fred',48],['fred',40],['barney',36],['barney',33]]

11._.map和Array#map

在处理集合对象时，_.map、_.reduce、_.filter、以及_.forEach使用频率很高

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

_.reduce([1,2,3],(sum,i)=>sum+i,0)

_.filter([1,2,3],(i)=>i>1)

_.forEach([1,2,3],(i)=>{console.log(i); })

使用ES6

[1,2,3].map((i)=>i+1)

[1,2,3].reduce((sum,i)=>sum+i,0)

[1,2,3].filter((i)=>i>1)

[1,2,3].forEach((i)=>{console.log(i);})

12.遍历对象类型

ES6遍历

for(let key in obj){console.log(obj[key])}

for(let key of Object.key(obj)){console.log(obj[key])}

Object.keys(obj).forEach((key)=>{console.log(obj[key])})

Lodash遍历有一个统一的方法

_.foeEach(obj,(value,key)=>{console.log(value)})

13.遍历和过滤的快捷方式

从一组对象中摘取出某个属性的值

let arr=[{n:1},{n:2}]

ES6

arr.map((obj)=>obj.n)

Lodash

_.map(arr,'n')

当对象类型的嵌套层级很多时，Lodash更实用

let arr=[

{a:[{n:1}]},{b:[{n:1}]}

]

ES6

arr.map((obj)=>obj.a[0].n) 属性‘ a’在arr[1]中未定义

Lodash

_.map(arr,'a[0].n') =>[1,undefined]

Lodash的快捷方式对null值做了容错处理，此外还有过滤快捷方式

let users=[

{'user':'barney','age':36,'active':true},{'user':'fred','age':40,'active':false}

]

ES6

users.filter((o)=>o.active)

Lodash

_.filter(users,'active')

_.filter(users,['active',true])

_.filter(users,{'active':true,'age':36})

14.链式调用和惰性求值

Lodash的链式调用，以WordCount实例

let lines=`an apple orange the grape banana an apple melon an orange banana apple`.split('\n')

_.chain(lines)

.flatMap(line=>line.split(/\s+/))

.filter(word=>word.length>3)

.groupBy(_.identity)

.mapValues(_.size)

.forEach((count,word)=>{console.log(word,count);})

// apple 3 orange 2 grape 1 banana 2 melon 1

15.解构赋值和箭头函数

Lodash

_.head([1,2,3]) =>1

_.tail([1,2,3]) =>[2,3]

ES6解构赋值

count [head,...tail]=[1,2,3]

Lodash

let say=_.rest((who,fruits)=>who+'likes'+fruits.join(','))

say('Jerry','apple','grape')

ES6

say=(who,...fruits)=>who+'likes'+fruits.join(',')

say('Mary','banana','orange')

Lodash

_.constant(1)() =>1

_.identity(2) =>2

ES6

(x=>(()=>x))(1)() =>1

(x=>x)(2) =>2