好多 lodash 的方法現(xiàn)在都可以直接用原生 JavaScript 來實現(xiàn)了

以前當(dāng)我們還在寫 ES3 代碼的時候梢夯, underscore 以及后來的 lodash 簡直是利器吃溅,提供了很多非常實用的方法湃缎。這兩個從功能角度來說類似岁忘,都對 JavaScript 原生的數(shù)組、對象深员、日期等提供了很多非常實用的擴展方法负蠕,但是至于為什么 underscore 后面還會有 lodash,小編已經(jīng)不大記得確切的原因了倦畅,只記得當(dāng)時好像是 lodash 提供了更好的性能遮糖,而且還專門為每個方法單獨作為一個包來發(fā)布,目的就像讓你能夠根據(jù)自己的需要去加載叠赐,而不需要將整個 lodash 都記載進來止吁。至今,lodash 依然是 npm 最佳被依賴模塊榜(小編自己壞壞的翻譯燎悍,哈哈)的榜首,來看 npm 官網(wǎng)的統(tǒng)計結(jié)果:

lodash 占據(jù)最佳被依賴模塊榜榜首

不過盼理,現(xiàn)如今隨著 ECMAScript 標(biāo)準(zhǔn)的不斷更新谈山,很多 lodash 提供的方法其實用原生的 JavaScript 就可以實現(xiàn)了,今天小編就來列舉一些 lodash 中常用的方法是如何使用原生的 JavaScript 來實現(xiàn)的(主要覆蓋 ES5 + ES6 的特性 , 其中代碼例子來自:https://www.sitepoint.com/lodash-features-replace-es6/)宏怔。

_.map

Map 方法就是基于一個數(shù)組根據(jù)一定的規(guī)則轉(zhuǎn)化為另外一個數(shù)組奏路,來個 lodash 的例子

_.map([1, 2, 3], function(n) { return n * 3; });
// [3,6,9]

原生的話就可以結(jié)合數(shù)組的 Map 方法和箭頭函數(shù)來實現(xiàn)

[1, 2, 3].map(n => n * 3);

_.reduce

reduce 就是將數(shù)組中每一個元素經(jīng)過一個指定的累加器從而產(chǎn)生一個全新的元素,來看 lodash 的例子

_.reduce([1, 2, 3], function(total, n) { return total + n; }, 0);
// 6

上述就是一個數(shù)組元素求和的作用臊诊,原生的話也可以直接使用數(shù)組的 reduce 和箭頭函數(shù)來實現(xiàn)

[1, 2, 3].reduce((total, n) => total + n);

當(dāng)然了鸽粉,_.reduceRight 一樣也可以用原生的實現(xiàn),這里就不贅述了抓艳。

此類數(shù)據(jù)上的方法還有 **_.filter触机、_.some、_.find 以及 _.every **等等都可以用原生的來實現(xiàn)。

_.head 和 _.tail

_.head 這個方法的作用就是找到數(shù)組的第一個元素儡首,而 tail 的作用就是找到除了第一個元素之外所有剩下的元素片任, 像這樣:

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

這兩個方法可以用「解構(gòu)賦值」語法來實現(xiàn)

const [head, ...tail] = [1, 2, 3];

_.rest

這個方法其實主要目的就是自動將函數(shù)的多個參數(shù)變成一個數(shù)組,比如像這個例子:

var say = _.rest(function(what, names) {
  var last = _.last(names);
  var initial = _.initial(names);
  var finalSeparator = (_.size(names) > 1 ? ' & ' : '');
  return what + ' ' + initial.join(', ') +
    finalSeparator + last;
});

say('hello', 'fred', 'barney', 'pebbles');
// "hello fred, barney & pebbles"

上述例子很簡單蔬胯,其中 names 數(shù)組就將 say 函數(shù)中后面三個參數(shù)變成了一個數(shù)組对供,而這個可以很容易的通過原生來實現(xiàn),就像這樣:

const say = (what, ...names) => {
  const [last, ...initial] = names.reverse();
  initial.reverse();
  const finalSeparator = (names.length > 1 ? ' &' : '');
  return `${what} ${initial.join(', ')} ${finalSeparator} ${last}`;
};

say('hello', 'fred', 'barney', 'pebbles');
// "hello fred, barney & pebbles"

Paths

在 lodash 中有大量支持使用 path 的方法氛濒,比如 _.at产场,就是創(chuàng)建一個包含對象中指定 path 的值的數(shù)組,來看個例子:

var object = { 'a': [{ 'b': { 'c': 3 } }, 4] };

_.at(object, ['a[0].b.c', 'a[1]']);
// [3, 4]
_.at(['a', 'b', 'c'], 0, 2);
// ['a', 'c']

原生的寫法如下:

[
  obj => obj.a[0].b.c,
  obj => obj.a[1]
].map(path => path(object));

[
  arr => arr[0],
  arr => arr[2]
].map(path => path(['a', 'b', 'c']));

_.pick

_pick 方法作用是可以對一個對象進行「挑選」舞竿,只獲取指定的部分京景,比如像這樣:

var object = { 'a': 1, 'b': '2', 'c': 3 };

_.pick(object, ['a', 'c']);
// { a: 1, c: 3 }

原生的寫法如下:

const { a, c } = { a: 1, b: 2, c: 3 };

以上就是一些比較實用的可以用原生的 JavaScript 代碼來實現(xiàn)的 lodash 提供的方法,當(dāng)然了炬灭,還有很多 lodash 提供的方法都可以用原生的方式來實現(xiàn)醋粟。小編之所以給大家分享這個,一方面是帶著大家一起再熟悉下 ES6 中的一些特性重归,另外一方面也是提醒大家隨著 ECMAScript 標(biāo)準(zhǔn)的不斷更新米愿,很多新特性被加進來,總有一天我們會不再需要 lodash 這樣的庫鼻吮。

如果你對 ES6 和 ECMAScript 這些概念以及關(guān)系還不清楚育苟,可以關(guān)注「jscourse」微信公眾號 - 回復(fù)「es6」來獲取一個將這些概念講解清楚的課程——《JavaScript、ECMAScript椎木、ES6违柏、ES2015、TC39 這些你都搞清楚了嗎香椎?》

好了漱竖,本期就到這里了,我們下期再見咯畜伐!

關(guān)注「jscourse」微信公眾號獲取更多 JavaScript 相關(guān)的課程和學(xué)習(xí)資源馍惹!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市玛界,隨后出現(xiàn)的幾起案子万矾,更是在濱河造成了極大的恐慌,老刑警劉巖慎框,帶你破解...
    沈念sama閱讀 222,000評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件良狈,死亡現(xiàn)場離奇詭異,居然都是意外死亡笨枯,警方通過查閱死者的電腦和手機薪丁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,745評論 3 399
  • 文/潘曉璐 我一進店門遇西,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人窥突,你說我怎么就攤上這事努溃。” “怎么了阻问?”我有些...
    開封第一講書人閱讀 168,561評論 0 360
  • 文/不壞的土叔 我叫張陵梧税,是天一觀的道長。 經(jīng)常有香客問我称近,道長第队,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,782評論 1 298
  • 正文 為了忘掉前任刨秆,我火速辦了婚禮凳谦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘衡未。我一直安慰自己尸执,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 68,798評論 6 397
  • 文/花漫 我一把揭開白布缓醋。 她就那樣靜靜地躺著如失,像睡著了一般。 火紅的嫁衣襯著肌膚如雪送粱。 梳的紋絲不亂的頭發(fā)上褪贵,一...
    開封第一講書人閱讀 52,394評論 1 310
  • 那天,我揣著相機與錄音抗俄,去河邊找鬼脆丁。 笑死,一個胖子當(dāng)著我的面吹牛动雹,可吹牛的內(nèi)容都是我干的槽卫。 我是一名探鬼主播,決...
    沈念sama閱讀 40,952評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼胰蝠,長吁一口氣:“原來是場噩夢啊……” “哼晒夹!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起姊氓,我...
    開封第一講書人閱讀 39,852評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎喷好,沒想到半個月后翔横,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,409評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡梗搅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,483評論 3 341
  • 正文 我和宋清朗相戀三年禾唁,在試婚紗的時候發(fā)現(xiàn)自己被綠了效览。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,615評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡荡短,死狀恐怖丐枉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情掘托,我是刑警寧澤瘦锹,帶...
    沈念sama閱讀 36,303評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站闪盔,受9級特大地震影響弯院,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜泪掀,卻給世界環(huán)境...
    茶點故事閱讀 41,979評論 3 334
  • 文/蒙蒙 一听绳、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧异赫,春花似錦椅挣、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,470評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蝙斜,卻和暖如春名惩,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背孕荠。 一陣腳步聲響...
    開封第一講書人閱讀 33,571評論 1 272
  • 我被黑心中介騙來泰國打工娩鹉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人稚伍。 一個月前我還...
    沈念sama閱讀 49,041評論 3 377
  • 正文 我出身青樓弯予,卻偏偏與公主長得像,于是被迫代替她去往敵國和親个曙。 傳聞我的和親對象是個殘疾皇子锈嫩,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,630評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line),也就是一...
    悟名先生閱讀 4,151評論 0 13
  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,238評論 0 4
  • 寒假已經(jīng)過去不少時間了对雪,今年的寒假是一個懷舊年,各大童年神劇重播放送米绕。其中湖南衛(wèi)視的《還珠格格》剛開始播出觀看量就...
    計里閱讀 651評論 0 50
  • 01 好的自我意識是 Ask WHAT, not WHY. ——Tasha Eurich 02 要自我提升瑟捣,是要知...
    Morel_l閱讀 246評論 4 2
  • 鷹擊長空馋艺,麻雀不屑。 龍游四海迈套,井蛙自大捐祠。 以知識分子自命,必每天問桑李、聽踱蛀、說、讀芙扎、寫星岗、作。
    誅八界閱讀 251評論 0 0