大廠技術??高級前端??Node進階

點擊上方?程序員成長指北，關注公眾號

回復1，加入高級Node交流群

原文：https://juejin.cn/post/7016520448204603423
作者：紅塵煉心

前言

不是標題黨，這是一位leader在一次代碼評審會對小組成員發(fā)出的“怒吼”，原因是在代碼評審中發(fā)現很多地方還是采用ES5的寫法，也不是說用ES5寫法不行，會有BUG，只是造成代碼量增多，可讀性變差而已。

恰好，這位leader有代碼潔癖，面對3~5年經驗的成員，還寫這種水平的代碼，極為不滿，不斷對代碼進行吐槽。不過對于他的吐槽，我感覺還是有很大收獲的，故就把leader的吐槽記錄下來，分享給掘友們，覺得有收獲點個贊，有錯誤的或者更好的寫法，非常歡迎在評論中留言。

ps：ES5之后的JS語法統(tǒng)稱ES6?。。?/strong>

一、關于取值的吐槽

取值在程序中非常常見，比如從對象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行代碼搞定不香嗎？直接用對象名加屬性名去取值，要是對象名短還好，很長呢？搞得代碼中到處都是這個對象名?！?/p>

改進：

const?{a,b,c,d,e}?=?obj;
const?f?=?a?+?d;
const?g?=?c?+?e;
復制代碼

反駁

不是不用ES6的解構賦值，而是服務端返回的數據對象中的屬性名不是我想要的，這樣取值，不是還得重新創(chuàng)建個遍歷賦值。

吐槽

看來你對ES6的解構賦值掌握的還是不夠徹底。如果想創(chuàng)建的變量名和對象的屬性名不一致，可以這么寫：

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表達式，可以進行運算，以及引用對象屬性。

改進

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嗎？性能優(yōu)化懂么，find方法中找到符合條件的項，就不會繼續(xù)遍歷數組。

改進

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?=?deps[item];
????if(Array.isArray(value)){
????????member?=?[...member,...value]
????}
}
member?=?[...new?Set(member)]
復制代碼

吐槽

獲取對象的全部屬性值還要遍歷嗎？Object.values忘記了嗎？還有涉及到數組的扁平化處理，為啥不用ES6提供的flat方法呢，還好這次的數組的深度最多只到2維，還要是遇到4維、5維深度的數組，是不是得循環(huán)嵌套循環(huán)來扁平化？

改進

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;
復制代碼

八、關于添加對象屬性的吐槽

當給對象添加屬性時，如果屬性名是動態(tài)變化的，該怎么處理。

let?obj?=?{};
let?index?=?1;
let?key?=?`topic${index}`;
obj[key]?=?'話題內容';
復制代碼

吐槽

為何要額外創(chuàng)建一個變量。不知道ES6中的對象屬性名是可以用表達式嗎？

改進

let?obj?=?{};
let?index?=?1;
obj[`topic${index}`]?=?'話題內容';
復制代碼

九、關于輸入框非空的判斷

在處理輸入框相關業(yè)務時，往往會判斷輸入框未輸入值的場景。

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
}
復制代碼

補充

但是要做并發(fā)請求時，還是要用到Promise.all()。

const?fn?=?()?=>{
???Promise.all([fn1(),fn2()]).then(res?=>{
???????console.log(res);//?[1,2]
???})?
}
復制代碼

如果并發(fā)請求時，只要其中一個異步函數處理完成，就返回結果，要用到Promise.race()。

結語

歡迎來對以上十點leader的吐槽進行反駁，你的反駁如果有道理的，下次代碼評審會上，我替你反駁。

此外以上的整理內容有誤的地方，歡迎在評論中指正，萬分感謝。

如果你還有其它想吐槽的，也非常歡迎在評論中留下你的吐槽。

讀完有幫助，不妨關注一下，點個贊支持一下。

Node 社群

我組建了一個氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學習感興趣的話（后續(xù)有計劃也可以），我們可以一起進行Node.js相關的交流、學習、共建。下方加 考拉 好友回復「Node」即可。

???“分享、點贊、在看” 支持一波??