1. 首頁 > 生活百科 > >

你說你會用ES6，那趕緊用上??！

小知識it知識

本篇文章給大家分享一位leader的十點關于ES6的吐槽， 并對應補充一些相關知識， 希望對大家有所幫助！

你說你會用ES6，那趕緊用上啊！

文章插圖

“你會用ES6， 那倒是用啊！”：這是一位leader在一次代碼評審會對小組成員發出的“怒吼”， 原因是在代碼評審中發現很多地方還是采用ES5的寫法， 也不是說用ES5寫法不行， 會有BUG， 只是造成代碼量增多， 可讀性變差而已 。
恰好， 這位leader有代碼潔癖， 面對3~5年經驗的成員， 還寫這種水平的代碼， 極為不滿， 不斷對代碼進行吐槽 。 不過對于他的吐槽， 我感覺還是有很大收獲的， 故就把leader的吐槽記錄下來， 分享給掘友們， 覺得有收獲點個贊， 有錯誤的或者更好的寫法， 非常歡迎在評論中留言 。 【相關推薦：javascript學習教程】
ps：ES5之后的JS語法統稱ES6?。。?
一、關于取值的吐槽
取值在程序中非常常見， 比如從對象obj中取值 。
const obj = { a:1, b:2, c:3, d:4, e:5,}吐槽：
const a = obj.a;const b = obj.b;const c = obj.c;const d = obj.d;const e = obj.e;或者
const f = obj.a + obj.d;const g = obj.c + obj.e;吐槽：“不會用ES6的解構賦值來取值嗎？5行代碼用1行代碼搞定不香嗎？直接用對象名加屬性名去取值， 要是對象名短還好， 很長呢？搞得代碼中到處都是這個對象名 。 ”
改進：
const {a,b,c,d,e} = obj;const f = a + d;const g = c + e;反駁
不是不用ES6的解構賦值， 而是服務端返回的數據對象中的屬性名不是我想要的， 這樣取值， 不是還得重新創建個遍歷賦值 。
吐槽
看來你對ES6的解構賦值掌握的還是不夠徹底 。 如果想創建的變量名和對象的屬性名不一致， 可以這么寫：
const {a:a1} = obj;console.log(a1);// 1補充
ES6的解構賦值雖然好用 。 但是要注意解構的對象不能為undefined、null 。 否則會報錯， 故要給被解構的對象一個默認值 。
const {a,b,c,d,e} = obj || {};二、關于合并數據的吐槽
比如合并兩個數組， 合并兩個對象 。
const a = [1,2,3];const b = [1,5,6];const c = a.concat(b);//[1,2,3,1,5,6]const obj1 = { a:1,}const obj2 = { b:1,}const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}吐槽
ES6的擴展運算符是不是忘記了， 還有數組的合并不考慮去重嗎？
改進
const a = [1,2,3];const b = [1,5,6];const c = [...new Set([...a,...b])];//[1,2,3,5,6]const obj1 = { a:1,}const obj2 = { b:1,}const obj = {...obj1,...obj2};//{a:1,b:1}三、關于拼接字符串的吐槽
const name = '小明';const score = 59;let result = '';if(score > 60){ result = `${name}的考試成績及格`; }else{ result = `${name}的考試成績不及格`; }吐槽
像你們這樣用ES6字符串模板， 還不如不用， 你們根本不清楚在${}中可以做什么操作 。 在${}中可以放入任意的JavaScript表達式， 可以進行運算， 以及引用對象屬性 。
改進
【你說你會用ES6，那趕緊用上??！】const name = '小明';const score = 59;const result = `${name}${score > 60?'的考試成績及格':'的考試成績不及格'}`;四、關于if中判斷條件的吐槽
if( type == 1 || type == 2 || type == 3 || type == 4 ||){ //...}吐槽
ES6中數組實例方法includes會不會使用呢？
改進
const condition = [1,2,3,4];if( condition.includes(type) ){ //...}五、關于列表搜索的吐槽
在項目中， 一些沒分頁的列表的搜索功能由前端來實現， 搜索一般分為精確搜索和模糊搜索 。 搜索也要叫過濾， 一般用filter來實現 。
const a = [1,2,3,4,5];const result = a.filter( item =>{ return item === 3 })吐槽
如果是精確搜索不會用ES6中的find嗎？性能優化懂么， find方法中找到符合條件的項， 就不會繼續遍歷數組 。
改進
const a = [1,2,3,4,5];const result = a.find( item =>{ return item === 3 })六、關于扁平化數組的吐槽
一個部門JSON數據中， 屬性名是部門id， 屬性值是個部門成員id數組集合， 現在要把有部門的成員id都提取到一個數組集合中 。
const deps = {'采購部':[1,2,3],'人事部':[5,8,12],'行政部':[5,14,79],'運輸部':[3,64,105],}let member = [];for (let item in deps){ const value = https://www.52zixue.com/zhanzhang/webqd/js/04/13/69691/deps[item]; if(Array.isArray(value)){ member = [...member,...value] }}member = [...new Set(member)]

推薦閱讀