使用ES6來代替lodash

2021-09-11 12:48:54 字數 1449 閱讀 1592

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 = ;

object.values(obj).map(it => it*2);

複製**

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

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

Vue js使用es6語法來實現元件

鑑於官方的文件是es5的,但是使用vue cli生成的 模板是es6的,而且es6的模組化等也非常方便,以後肯定是主流。1 定義簡單元件 itemtemplate.vue li template export default script 2 使用元件 test hello h1 介紹 text v...

ES6 使用總結

es6 全稱ecmascript 2015 字串模板 es5字串的拼接是用 完成的,es6是 拼接,其中變數引用為 擴充套件運算子 兩者有相同的物件屬性,後者值覆蓋前者 obj 箭頭函式 更改this的指向問題 變數提公升 let與const 注釋 const雖然為不可變更的常量,但是當其定義為物件...

ES6 基本使用

let i 1 不可重複宣告,不變數提公升 const j 100 唯讀var k 20 console.log i,j,k let person let peson2 object.assign person console.log person,peson2 person.id 10 淺複製,會...