1. 首頁 > 生活百科 > >

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

小知識it知識

吐槽
獲取對象的全部屬性值還要遍歷嗎？Object.values忘記了嗎？還有涉及到數組的扁平化處理， 為啥不用ES6提供的flat方法呢， 還好這次的數組的深度最多只到2維， 還要是遇到4維、5維深度的數組， 是不是得循環嵌套循環來扁平化？
改進
const deps = { '采購部':[1,2,3], '人事部':[5,8,12], '行政部':[5,14,79], '運輸部':[3,64,105],}let member = Object.values(deps).flat(Infinity);其中使用Infinity作為flat的參數， 使得無需知道被扁平化的數組的維度 。
補充
flat方法不支持IE瀏覽器 。
七、關于獲取對象屬性值的吐槽
const name = obj && obj.name;吐槽
ES6中的可選鏈操作符會使用么？
改進
const name = obj?.name;八、關于添加對象屬性的吐槽
當給對象添加屬性時， 如果屬性名是動態變化的， 該怎么處理 。
let obj = {};let index = 1;let key = `topic${index}`;obj[key] = '話題內容';吐槽
為何要額外創建一個變量 。 不知道ES6中的對象屬性名是可以用表達式嗎？
改進
let obj = {};let index = 1;obj[`topic${index}`] = '話題內容';九、關于輸入框非空的判斷
在處理輸入框相關業務時， 往往會判斷輸入框未輸入值的場景 。
if(value !== null && value !== undefined && value !== ''){ //...}吐槽
ES6中新出的空值合并運算符了解過嗎， 要寫那么多條件嗎？
if((value??'') !== ''){ //...}十、關于異步函數的吐槽
異步函數很常見， 經常是用 Promise 來實現 。
const fn1 = () =>{ return new Promise((resolve, reject) => { setTimeout(() => { resolve(1); }, 300); });}const fn2 = () =>{ return new Promise((resolve, reject) => { setTimeout(() => { resolve(2); }, 600); });}const fn = () =>{ fn1().then(res1 =>{ console.log(res1);// 1 fn2().then(res2 =>{ console.log(res2) }) })}吐槽
如果這樣調用異步函數， 不怕形成地獄回調??！
改進
const fn = async () =>{ const res1 = await fn1(); const res2 = await fn2(); console.log(res1);// 1 console.log(res2);// 2}補充
但是要做并發請求時， 還是要用到Promise.all() 。
const fn = () =>{ Promise.all([fn1(),fn2()]).then(res =>{ console.log(res);// [1,2] }) }如果并發請求時， 只要其中一個異步函數處理完成， 就返回結果， 要用到Promise.race() 。
十一、后續
歡迎來對以上十點leader的吐槽進行反駁， 你的反駁如果有道理的， 下次代碼評審會上， 我替你反駁 。
此外以上的整理內容有誤的地方， 歡迎在評論中指正， 萬分感謝 。

本文轉載自：https://juejin.cn/post/7016520448204603423
作者：紅塵煉心
【相關視頻教程推薦：web前端】
以上就是你說你會用ES6， 那趕緊用上?。〉脑敿殐热?， 更多請關注電腦自學網其它相關文章！

推薦閱讀