Lodash的学习笔记(一)有意思的API

发布时间:2019-08-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Lodash的学习笔记(一)有意思的API脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

最近在学习JS函数式编程相关的内容,于是详细的翻看了Lodash的文档,感到别有洞天。这里把自己对一些API的使用和看法做个笔记记录下。

Array

_.head/_.last

例子:

@H_406_17@_.head([1, 2, 3]); // → 1 _.last([1, 2, 3]); // → 3

分别可以抽取数组第一个元素的值和最后一个元素的值。咋看之下觉得很无聊。但是跟下面两个结合起来就厉害。

_.tail/_.inITial

例子:

_.tail([1, 2, 3]);
// → [2, 3]

_.initial([1, 2, 3]);
// → [1, 2]

也如字面描述一般容易理解的函数。但是结合上面的两个函数就产生很大能量。

首先看一个针对数组尾部特殊化处理的例子:

let names=['fred', 'barney', 'pebbles'];

_.initial(names).join(', ') +
(_.size(names) > 1 ? ', & ' : '') + _.last(names);

// → 'fred, barney, & pebbles'

怎么样比简单的写for+if else优雅很多吧。接着我们来看看递归求和:

function sum(arr){
    return _.head(arr) ? 
    ( _.head(arr) + sum( _.tail(arr) ) ) :
    0;
}

Tips

1)其实好像数组都可以表现为

[a, [b, [c .....]]]

然后再将其扁平化的结果。 是不是?所以结合这四个函数,很多数组遍历的操作都可以改写成递归的方式。虽然性能可能略差,但是可读性反而更强了(并非所有的递归都一定损耗性能,详细可以去了解JIT优化)。

2)但是在ES6中,更推荐优先使用数组的解构。

_.zip

例子:

_.zip(['fred', 'barney'], [30, 40]);
// → [['fred', 30], ['barney', 40]]

_.zip(*array) 将几个数组按照位置组成新的数组,返回数组列表。这个方法就有点像SQL里面select两个列的情况。对重组数据结构非常有帮助。

_.unzip

既然lodash是个函数库,那有zip肯定也有他的逆运算unzip。这里就不举例了。unzip其实可以看作对ES6数组解构的补充,应用的场景也是十分相似的。

Collection

_.map/_.reduce/_.filter

这三个函数其实早就名声在外,就不举例了。列出来只是为了提醒,遍历集合可不仅仅只有_.each。任何时候都优先考虑这些函数。

_.every/_.some

例子:

let users = [
  { 'user': 'barney', 'active': true },
  { 'user': 'fred',   'active': false }
];

_.every(users, { 'user': 'barney', 'active': false });
//false

_.some(users, ['active', false]);
//true

什么?看不懂?

_.every => && 
_.some => ||

懂了吧。其实同样也算是对_.each的扩充。还有他们都有条件短路的优化哦。

Function

_.curry

是函数柯里化的函数。不要问我为什么不是库里化。什么是柯里化自行百度
例子:

let abc = function(a, b, c) {
  return [a, b, c];
};

let curried = _.curry(abc);

curried(1)(2)(3);
// → [1, 2, 3]

curried(1, 2)(3);
// → [1, 2, 3]

curried(1, 2, 3);
// → [1, 2, 3]

// Curried with placeholders.
curried(1)(_, 3)(2);
// → [1, 2, 3]

柯里化有3个常见作用:1. 参数复用;2. 构建高阶函数;3. 延迟计算。
参数复用的例子:

let parse = function(data, config){
    ……
    return ……;
};

let config = {};
let parseByConfig = _.curryRight(parse)(config);

如代码所示,这是一个数据解析函数,通过某些配置按照一定的规则去解析数据。如果在某个场景下参数配置都一样。那可以用柯里化先引入一个参数。然后再接收不同的数据。这样就不用在每次调用时都引入同样的config参数。

剩下两个特性一个等会讲,一个不在本文讨论范围内。

_.partial

部分函数,我习惯这么叫他,还是先看例子。

let greet = function(greeting, name) {
  return greeting + ' ' + name;
};

let sayHelloTo = _.partial(greet, 'hello');
sayHelloTo('fred');
// → 'hello fred'

// Partially applied with placeholders.
let greetFred = _.partial(greet, _, 'fred');
greetFred('hi');
// → 'hi fred'
let greet = function(greeting, name) {
  return greeting + ' ' + name;
};

let sayHelloTo = _.partial(greet, 'hello');
sayHelloTo('fred');
// → 'hello fred'

// Partially applied with placeholders.
let greetFred = _.partial(greet, _, 'fred');
greetFred('hi');
// → 'hi fred'

好像跟柯里化很像。是的,它其实就是柯里化的具体应用——构建高阶函数。_.curry会把一个函数转化成可以柯里化函数,而当这个柯里化函数接受了一定的参数后,它就变成了一个部分应用函数了。

Seq

_.chain

这个是我认为的lodash中最有意思的方法。

$('div').css('color','red')
    .on('click', function(){})
    .fadein();

作为一个合格的前端攻城狮,你对这个一定不陌生。它一定给你带来过很多美好的记忆。那我们如何让这样一段优雅的代码应用到非DOM对象上呢。用_.chain就行了。

_.head(
   _.map(
    _.sortBy('users', 'age'),
     function(o) {
       return `${o.user} is ${o.age}`;
     }
   )
 )

 _.chain(users)
  .sortBy('age')
  .map(function(o) {
    return o.user + ' is ' + o.age;
  })
  .head()
  .value();  

两段代码在做一样的事情。你更喜欢哪个呢。不过要注意_.chain最后的value。因为_.chain用一个容器包装了你的对象,最后需要通过value返回出真正的值。如果不能理解,联想一下下面这段代码:

$('div')[0].classList

jQuery选择器筛选到的是jQuery对象,而如果要调用真正的DOM对象的属性的话,还要用索引去调用它。

Util

_.flow

function square(n) {
  return n * n;
}

VAR addSquare = _.flow(_.add, square);
addSquare(1, 2);
// → 9

这同样是用来组合高阶函数的一个方法。如果用数学的角度去思考的话,就有点像, 把函数 f(), g(), 和h() 组合起来可以得到复合函数 f( g( h() ) )。

脚本宝典总结

以上是脚本宝典为你收集整理的Lodash的学习笔记(一)有意思的API全部内容,希望文章能够帮你解决Lodash的学习笔记(一)有意思的API所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。