Lodash的學(xué)習(xí)筆記（一）有意思的API

BingqiChen 發(fā)布于2019-08-19 18:15 / 2257人閱讀

摘要：是函數(shù)柯里化的函數(shù)。例子柯里化有個(gè)常見作用參數(shù)復(fù)用構(gòu)建高階函數(shù)延遲計(jì)算。是的，它其實(shí)就是柯里化的具體應(yīng)用構(gòu)建高階函數(shù)。這個(gè)是我認(rèn)為的中最有意思的方法。不過要注意最后的。這同樣是用來組合高階函數(shù)的一個(gè)方法。

最近在學(xué)習(xí)JS函數(shù)式編程相關(guān)的內(nèi)容，于是詳細(xì)的翻看了Lodash的文檔，感到別有洞天。這里把自己對一些API的使用和看法做個(gè)筆記記錄下。

Array _.head/_.last

例子：

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

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

分別可以抽取數(shù)組第一個(gè)元素的值和最后一個(gè)元素的值。咋看之下覺得很無聊。但是跟下面兩個(gè)結(jié)合起來就厲害。

_.tail/_.initial

例子：

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

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

也如字面描述一般容易理解的函數(shù)。但是結(jié)合上面的兩個(gè)函數(shù)就產(chǎn)生很大能量。

首先看一個(gè)針對數(shù)組尾部特殊化處理的例子：

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

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

// → "fred, barney, & pebbles"

怎么樣比簡單的寫for+if else優(yōu)雅很多吧。接著我們來看看遞歸求和：

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

Tips

1）其實(shí)好像數(shù)組都可以表現(xiàn)為

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

然后再將其扁平化的結(jié)果。是不是？所以結(jié)合這四個(gè)函數(shù)，很多數(shù)組遍歷的操作都可以改寫成遞歸的方式。雖然性能可能略差，但是可讀性反而更強(qiáng)了(并非所有的遞歸都一定損耗性能，詳細(xì)可以去了解下JIT優(yōu)化)。

2）但是在ES6中，更推薦優(yōu)先使用數(shù)組的解構(gòu)。

_.zip

例子：

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

_.zip(*array) 將幾個(gè)數(shù)組按照位置組成新的數(shù)組，返回?cái)?shù)組列表。這個(gè)方法就有點(diǎn)像SQL里面select兩個(gè)列的情況。對重組數(shù)據(jù)結(jié)構(gòu)非常有幫助。

_.unzip

既然lodash是個(gè)函數(shù)庫，那有zip肯定也有他的逆運(yùn)算unzip。這里就不舉例了。unzip其實(shí)可以看作對ES6數(shù)組解構(gòu)的補(bǔ)充，應(yīng)用的場景也是十分相似的。

Collection _.map/_.reduce/_.filter

這三個(gè)函數(shù)其實(shí)早就名聲在外，就不舉例了。列出來只是為了提醒，遍歷集合可不僅僅只有_.each。任何時(shí)候都優(yōu)先考慮這些函數(shù)。

_.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 => ||

懂了吧。其實(shí)同樣也算是對_.each的擴(kuò)充。還有他們都有條件短路的優(yōu)化哦。

Function _.curry

是函數(shù)柯里化的函數(shù)。不要問我為什么不是庫里化。什么是柯里化自行百度。
例子：

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個(gè)常見作用：1. 參數(shù)復(fù)用；2. 構(gòu)建高階函數(shù)；3. 延遲計(jì)算。
參數(shù)復(fù)用的例子：

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

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

如代碼所示，這是一個(gè)數(shù)據(jù)解析函數(shù)，通過某些配置按照一定的規(guī)則去解析數(shù)據(jù)。如果在某個(gè)場景下參數(shù)配置都一樣。那可以用柯里化先引入一個(gè)參數(shù)。然后再接收不同的數(shù)據(jù)。這樣就不用在每次調(diào)用時(shí)都引入同樣的config參數(shù)。

剩下兩個(gè)特性一個(gè)等會講，一個(gè)不在本文討論范圍內(nèi)。

_.partial

部分函數(shù)，我習(xí)慣這么叫他，還是先看例子。

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"

好像跟柯里化很像。是的，它其實(shí)就是柯里化的具體應(yīng)用——構(gòu)建高階函數(shù)。_.curry會把一個(gè)函數(shù)轉(zhuǎn)化成可以柯里化函數(shù)，而當(dāng)這個(gè)柯里化函數(shù)接受了一定的參數(shù)后，它就變成了一個(gè)部分應(yīng)用函數(shù)了。

Seq _.chain

這個(gè)是我認(rèn)為的lodash中最有意思的方法。

$("div").css("color","red")
    .on("click", function(){})
    .fadeIn();

作為一個(gè)合格的前端攻城獅，你對這個(gè)一定不陌生。它一定給你帶來過很多美好的記憶。那我們?nèi)绾巫屵@樣一段優(yōu)雅的代碼應(yīng)用到非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();

兩段代碼在做一樣的事情。你更喜歡哪個(gè)呢。不過要注意_.chain最后的value。因?yàn)?b>_.chain用一個(gè)容器包裝了你的對象，最后需要通過value返回出真正的值。如果不能理解，聯(lián)想一下下面這段代碼：

$("div")[0].classList

用jQuery選擇器篩選到的是jQuery對象，而如果要調(diào)用真正的DOM對象的屬性的話，還要用索引去調(diào)用它。

Util _.flow

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

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

這同樣是用來組合高階函數(shù)的一個(gè)方法。如果用數(shù)學(xué)的角度去思考的話，就有點(diǎn)像, 把函數(shù) f(), g(), 和h() 組合起來可以得到復(fù)合函數(shù) f( g( h() ) )。

云服務(wù)器 GPU云服務(wù)器學(xué)習(xí)筆記一服務(wù)器在國外的云筆記學(xué)習(xí)筆記基礎(chǔ)學(xué)習(xí)筆記

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/79387.html

發(fā)表評論

登陸后可評論

0條評論

BingqiChen

男|高級講師

我要關(guān)注我要私信

TA的文章

jsp代碼實(shí)例第97課

閱讀 811·2021-11-23 09:51
RAKsmart：全場VPS主機(jī)5折,香港/日本/圣何塞VPS月付2.63美元起

閱讀 2523·2021-10-11 11:10
splunk安裝介紹

閱讀 1395·2021-09-23 11:21
MSP430單片機(jī)，OLED，獨(dú)立按鍵，DS18B20溫度傳感器，繼電器，抽風(fēng)機(jī)，LED燈構(gòu)成的電子

閱讀 1179·2021-09-10 10:50
純css實(shí)現(xiàn)漂亮又健壯的tooltip

閱讀 950·2019-08-30 15:54
【零基礎(chǔ)入門】css學(xué)習(xí)筆記（6）清除浮動(dòng)

閱讀 3389·2019-08-30 15:53
flex布局demo

閱讀 3348·2019-08-30 15:53
輸入U(xiǎn)RL到瀏覽器顯示頁面的過程，搜集各方面資料總結(jié)一下

閱讀 3261·2019-08-29 17:23

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Lodash的學(xué)習(xí)筆記（一）有意思的API

相關(guān)文章

**webpack入門學(xué)習(xí)手記（二）**

Lodash常用API筆記

Lodash學(xué)習(xí)筆記 - slice函數(shù)

Lodash學(xué)習(xí)筆記 - chunk函數(shù)

Lodash學(xué)習(xí)筆記 - compact函數(shù)

發(fā)表評論

0條評論

BingqiChen

男|高級講師

TA的文章

jsp代碼實(shí)例第97課

RAKsmart：全場VPS主機(jī)5折,香港/日本/圣何塞VPS月付2.63美元起

splunk安裝介紹

MSP430單片機(jī)，OLED，獨(dú)立按鍵，DS18B20溫度傳感器，繼電器，抽風(fēng)機(jī)，LED燈構(gòu)成的電子

純css實(shí)現(xiàn)漂亮又健壯的tooltip

【零基礎(chǔ)入門】css學(xué)習(xí)筆記（6）清除浮動(dòng)

flex布局demo

輸入U(xiǎn)RL到瀏覽器顯示頁面的過程，搜集各方面資料總結(jié)一下

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Lodash的學(xué)習(xí)筆記（一）有意思的API

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！