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

16.偏应用

let  add=(a,b)=>a+b

Lodash

let  add1=_.partial(add,1)

ES6

add1=b=>add(1,b)

17.Curry

Lodash

let  curriedAdd=_.curry(add)

let  add1=curriedAdd(1)

ES6

curriedAdd=a=>b=>a+b

add1=curriedAdd(1)

 

 

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注