使用ES6來代替lodash

aokihu發表於2018-10-17

lodash是一個很強大的第三方庫,但是缺點也是很明顯的,就是太tm的大了,就算能夠部分引用,但是如果js本身就能提供這些方法不是更快更小嗎?那麼一起來看看那些方法現在可以用ES6來代替了吧。

Map

map這個應該是用的最多的方法了吧,因為我們幾乎在任何應用中都要做遍歷處理,lodash和ES6的使用方式差不多

Lodash 的map使用

_.map([1,2,3,4,5], it => it * 2);
複製程式碼

ES6的map使用

[1,2,3,4,5].map(it => it * 2);
複製程式碼

你看使用起來是不是一樣啊,非常方便吧,對了這裡忘記了Lodashmap是可以處理Object型別的,那麼ES6map一樣可以嗎?答案是否定的,ES6map只能處理陣列型別,那是不是說明ES6就不行了呢?嘿!我們還是有有辦法的哦

ES6的map處理Object型別

const obj = {a:1, b:2, c:3};
Object.values(obj).map(it => it*2);
複製程式碼

你瞧,通過結合ES6的新特性,我們一樣實現了對物件的遍歷,功能上完全不輸於Lodash

Flat

Lodash中這個方法是對有多層巢狀的陣列做平展處理,看下面一個栗子你就會知道了

Lodash的flatten

_.flatten([1,2,[3,4,[5,6]]])
// output [1,2,3,4,5,6]
複製程式碼

使用ES6的話一樣簡單

ES6 的 flat

[1,2,[3,4,[5,6]]].flat();
// outpu [1,2,3,4,5,6]
複製程式碼

而且ES6的flat()方法是指定深度的,再來看個栗子

ES6 的 flat

[1,2,[3,4,[5,6]]].flat(1);
// output [1,2,3,4,[5,6]]
複製程式碼

當然Lodash也能實現,但是方法的名稱是flattenDepth,這就是為什麼會說Lodash的的體積大了,明明一個函式就能搞定的,他非要在另外弄一個出來,也不知道是演算法不同還是怎麼樣的,至少這樣會增加我們的程式碼體積好不好。

... To Be Continued

相關文章