你說(shuō)你會(huì)ES6？那你倒是用?。。。?/h1>
原文：https://juejin.cn/post/7016520448204603423
作者：紅塵煉心
前言
不是標(biāo)題黨，這是一位leader在一次代碼評(píng)審會(huì)對(duì)小組成員發(fā)出的“怒吼”，原因是在代碼評(píng)審中發(fā)現(xiàn)很多地方還是采用ES5的寫(xiě)法，也不是說(shuō)用ES5寫(xiě)法不行，會(huì)有BUG，只是造成代碼量增多，可讀性變差而已。
恰好，這位leader有代碼潔癖，面對(duì)3~5年經(jīng)驗(yàn)的成員，還寫(xiě)這種水平的代碼，極為不滿，不斷對(duì)代碼進(jìn)行吐槽。不過(guò)對(duì)于他的吐槽，我感覺(jué)還是有很大收獲的，故就把leader的吐槽記錄下來(lái)，分享給掘友們，覺(jué)得有收獲點(diǎn)個(gè)贊，有錯(cuò)誤的或者更好的寫(xiě)法，非常歡迎在評(píng)論中留言。
ps：ES5之后的JS語(yǔ)法統(tǒng)稱ES6?。?！
一、關(guān)于取值的吐槽
取值在程序中非常常見(jiàn)，比如從對(duì)象obj中取值。
const?obj?=?{
????a:1,
????b:2,
????c:3,
????d:4,
????e:5,
}
復(fù)制代碼
吐槽：
const?a?=?obj.a;
const?b?=?obj.b;
const?c?=?obj.c;
const?d?=?obj.d;
const?e?=?obj.e;
復(fù)制代碼
或者
const?f?=?obj.a?+?obj.d;
const?g?=?obj.c?+?obj.e;
復(fù)制代碼
吐槽：“不會(huì)用ES6的解構(gòu)賦值來(lái)取值嗎？5行代碼用1行代碼搞定不香嗎？直接用對(duì)象名加屬性名去取值，要是對(duì)象名短還好，很長(zhǎng)呢？搞得代碼中到處都是這個(gè)對(duì)象名?！?/p>
改進(jìn)：
const?{a,b,c,d,e}?=?obj;
const?f?=?a?+?d;
const?g?=?c?+?e;
復(fù)制代碼
反駁
不是不用ES6的解構(gòu)賦值，而是服務(wù)端返回的數(shù)據(jù)對(duì)象中的屬性名不是我想要的，這樣取值，不是還得重新創(chuàng)建個(gè)遍歷賦值。
吐槽
看來(lái)你對(duì)ES6的解構(gòu)賦值掌握的還是不夠徹底。如果想創(chuàng)建的變量名和對(duì)象的屬性名不一致，可以這么寫(xiě)：
const?{a:a1}?=?obj;
console.log(a1);//?1
復(fù)制代碼
補(bǔ)充
ES6的解構(gòu)賦值雖然好用。但是要注意解構(gòu)的對(duì)象不能為undefined、null。否則會(huì)報(bào)錯(cuò)，故要給被解構(gòu)的對(duì)象一個(gè)默認(rèn)值。
const?{a,b,c,d,e}?=?obj?||?{};
復(fù)制代碼
二、關(guān)于合并數(shù)據(jù)的吐槽
比如合并兩個(gè)數(shù)組，合并兩個(gè)對(duì)象。
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}
復(fù)制代碼
吐槽
ES6的擴(kuò)展運(yùn)算符是不是忘記了，還有數(shù)組的合并不考慮去重嗎？
改進(jìn)
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}
復(fù)制代碼
三、關(guān)于拼接字符串的吐槽
const?name?=?'小明';
const?score?=?59;
let?result?=?'';
if(score?>?60){
??result?=?`${name}的考試成績(jī)及格`;?
}else{
??result?=?`${name}的考試成績(jī)不及格`;?
}
復(fù)制代碼
吐槽
像你們這樣用ES6字符串模板，還不如不用，你們根本不清楚在${}中可以做什么操作。在${}中可以放入任意的JavaScript表達(dá)式，可以進(jìn)行運(yùn)算，以及引用對(duì)象屬性。
改進(jìn)
const?name?=?'小明';
const?score?=?59;
const?result?=?`${name}${score?>?60?'的考試成績(jī)及格':'的考試成績(jī)不及格'}`;
復(fù)制代碼
四、關(guān)于if中判斷條件的吐槽
if(
????type?==?1?||
????type?==?2?||
????type?==?3?||
????type?==?4?||
){
???//...
}
復(fù)制代碼
吐槽
ES6中數(shù)組實(shí)例方法includes會(huì)不會(huì)使用呢？
改進(jìn)
const?condition?=?[1,2,3,4];
if(?condition.includes(type)?){
???//...
}
復(fù)制代碼
五、關(guān)于列表搜索的吐槽
在項(xiàng)目中，一些沒(méi)分頁(yè)的列表的搜索功能由前端來(lái)實(shí)現(xiàn)，搜索一般分為精確搜索和模糊搜索。搜索也要叫過(guò)濾，一般用filter來(lái)實(shí)現(xiàn)。
const?a?=?[1,2,3,4,5];
const?result?=?a.filter(?
??item?=>{
????return?item?===?3
??}
)
復(fù)制代碼
吐槽
如果是精確搜索不會(huì)用ES6中的find嗎？性能優(yōu)化懂么，find方法中找到符合條件的項(xiàng)，就不會(huì)繼續(xù)遍歷數(shù)組。
改進(jìn)
const?a?=?[1,2,3,4,5];
const?result?=?a.find(?
??item?=>{
????return?item?===?3
??}
)
復(fù)制代碼
六、關(guān)于扁平化數(shù)組的吐槽
一個(gè)部門(mén)JSON數(shù)據(jù)中，屬性名是部門(mén)id，屬性值是個(gè)部門(mén)成員id數(shù)組集合，現(xiàn)在要把有部門(mén)的成員id都提取到一個(gè)數(shù)組集合中。
const?deps?=?{
'采購(gòu)部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'運(yùn)輸部':[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)]
復(fù)制代碼
吐槽
獲取對(duì)象的全部屬性值還要遍歷嗎？Object.values忘記了嗎？還有涉及到數(shù)組的扁平化處理，為啥不用ES6提供的flat方法呢，還好這次的數(shù)組的深度最多只到2維，還要是遇到4維、5維深度的數(shù)組，是不是得循環(huán)嵌套循環(huán)來(lái)扁平化？
改進(jìn)
const?deps?=?{
????'采購(gòu)部':[1,2,3],
????'人事部':[5,8,12],
????'行政部':[5,14,79],
????'運(yùn)輸部':[3,64,105],
}
let?member?=?Object.values(deps).flat(Infinity);
復(fù)制代碼
其中使用Infinity作為flat的參數(shù)，使得無(wú)需知道被扁平化的數(shù)組的維度。
補(bǔ)充
flat方法不支持IE瀏覽器。
七、關(guān)于獲取對(duì)象屬性值的吐槽
const?name?=?obj?&&?obj.name;
復(fù)制代碼
吐槽
ES6中的可選鏈操作符會(huì)使用么？
改進(jìn)
const?name?=?obj?.name;
復(fù)制代碼
八、關(guān)于添加對(duì)象屬性的吐槽
當(dāng)給對(duì)象添加屬性時(shí)，如果屬性名是動(dòng)態(tài)變化的，該怎么處理。
let?obj?=?{};
let?index?=?1;
let?key?=?`topic${index}`;
obj[key]?=?'話題內(nèi)容';
復(fù)制代碼
吐槽
為何要額外創(chuàng)建一個(gè)變量。不知道ES6中的對(duì)象屬性名是可以用表達(dá)式嗎？
改進(jìn)
let?obj?=?{};
let?index?=?1;
obj[`topic${index}`]?=?'話題內(nèi)容';
復(fù)制代碼
九、關(guān)于輸入框非空的判斷
在處理輸入框相關(guān)業(yè)務(wù)時(shí)，往往會(huì)判斷輸入框未輸入值的場(chǎng)景。
if(value?!==?null?&&?value?!==?undefined?&&?value?!==?''){
????//...
}
復(fù)制代碼
吐槽
ES6中新出的空值合并運(yùn)算符了解過(guò)嗎，要寫(xiě)那么多條件嗎？
if((value??'')?!==?''){
??//...
}
復(fù)制代碼
十、關(guān)于異步函數(shù)的吐槽
異步函數(shù)很常見(jiàn)，經(jīng)常是用 Promise 來(lái)實(shí)現(xiàn)。
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)
??????})
???})
}
復(fù)制代碼
吐槽
如果這樣調(diào)用異步函數(shù)，不怕形成地獄回調(diào)??！
改進(jìn)
const?fn?=?async?()?=>{
??const?res1?=?await?fn1();
??const?res2?=?await?fn2();
??console.log(res1);//?1
??console.log(res2);//?2
}
復(fù)制代碼
補(bǔ)充
但是要做并發(fā)請(qǐng)求時(shí)，還是要用到Promise.all()。
const?fn?=?()?=>{
???Promise.all([fn1(),fn2()]).then(res?=>{
???????console.log(res);//?[1,2]
???})?
}
復(fù)制代碼
如果并發(fā)請(qǐng)求時(shí)，只要其中一個(gè)異步函數(shù)處理完成，就返回結(jié)果，要用到Promise.race()。
結(jié)語(yǔ)
歡迎來(lái)對(duì)以上十點(diǎn)leader的吐槽進(jìn)行反駁，你的反駁如果有道理的，下次代碼評(píng)審會(huì)上，我替你反駁。
此外以上的整理內(nèi)容有誤的地方，歡迎在評(píng)論中指正，萬(wàn)分感謝。
如果你還有其它想吐槽的，也非常歡迎在評(píng)論中留下你的吐槽。
讀完有幫助，不妨關(guān)注一下，點(diǎn)個(gè)贊支持一下。
瀏覽
37
原文：https://juejin.cn/post/7016520448204603423
作者：紅塵煉心
前言
不是標(biāo)題黨，這是一位leader在一次代碼評(píng)審會(huì)對(duì)小組成員發(fā)出的“怒吼”，原因是在代碼評(píng)審中發(fā)現(xiàn)很多地方還是采用ES5的寫(xiě)法，也不是說(shuō)用ES5寫(xiě)法不行，會(huì)有BUG，只是造成代碼量增多，可讀性變差而已。
恰好，這位leader有代碼潔癖，面對(duì)3~5年經(jīng)驗(yàn)的成員，還寫(xiě)這種水平的代碼，極為不滿，不斷對(duì)代碼進(jìn)行吐槽。不過(guò)對(duì)于他的吐槽，我感覺(jué)還是有很大收獲的，故就把leader的吐槽記錄下來(lái)，分享給掘友們，覺(jué)得有收獲點(diǎn)個(gè)贊，有錯(cuò)誤的或者更好的寫(xiě)法，非常歡迎在評(píng)論中留言。
ps：ES5之后的JS語(yǔ)法統(tǒng)稱ES6?。?！
一、關(guān)于取值的吐槽
取值在程序中非常常見(jiàn)，比如從對(duì)象obj中取值。
const?obj?=?{
????a:1,
????b:2,
????c:3,
????d:4,
????e:5,
}
復(fù)制代碼
吐槽：
const?a?=?obj.a;
const?b?=?obj.b;
const?c?=?obj.c;
const?d?=?obj.d;
const?e?=?obj.e;
復(fù)制代碼
或者
const?f?=?obj.a?+?obj.d;
const?g?=?obj.c?+?obj.e;
復(fù)制代碼
吐槽：“不會(huì)用ES6的解構(gòu)賦值來(lái)取值嗎？5行代碼用1行代碼搞定不香嗎？直接用對(duì)象名加屬性名去取值，要是對(duì)象名短還好，很長(zhǎng)呢？搞得代碼中到處都是這個(gè)對(duì)象名?！?/p>
改進(jìn)：
const?{a,b,c,d,e}?=?obj;
const?f?=?a?+?d;
const?g?=?c?+?e;
復(fù)制代碼
反駁
不是不用ES6的解構(gòu)賦值，而是服務(wù)端返回的數(shù)據(jù)對(duì)象中的屬性名不是我想要的，這樣取值，不是還得重新創(chuàng)建個(gè)遍歷賦值。
吐槽
看來(lái)你對(duì)ES6的解構(gòu)賦值掌握的還是不夠徹底。如果想創(chuàng)建的變量名和對(duì)象的屬性名不一致，可以這么寫(xiě)：
const?{a:a1}?=?obj;
console.log(a1);//?1
復(fù)制代碼
補(bǔ)充
ES6的解構(gòu)賦值雖然好用。但是要注意解構(gòu)的對(duì)象不能為undefined、null。否則會(huì)報(bào)錯(cuò)，故要給被解構(gòu)的對(duì)象一個(gè)默認(rèn)值。
const?{a,b,c,d,e}?=?obj?||?{};
復(fù)制代碼
二、關(guān)于合并數(shù)據(jù)的吐槽
比如合并兩個(gè)數(shù)組，合并兩個(gè)對(duì)象。
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}
復(fù)制代碼
吐槽
ES6的擴(kuò)展運(yùn)算符是不是忘記了，還有數(shù)組的合并不考慮去重嗎？
改進(jìn)
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}
復(fù)制代碼
三、關(guān)于拼接字符串的吐槽
const?name?=?'小明';
const?score?=?59;
let?result?=?'';
if(score?>?60){
??result?=?`${name}的考試成績(jī)及格`;?
}else{
??result?=?`${name}的考試成績(jī)不及格`;?
}
復(fù)制代碼
吐槽
像你們這樣用ES6字符串模板，還不如不用，你們根本不清楚在${}中可以做什么操作。在${}中可以放入任意的JavaScript表達(dá)式，可以進(jìn)行運(yùn)算，以及引用對(duì)象屬性。
改進(jìn)
const?name?=?'小明';
const?score?=?59;
const?result?=?`${name}${score?>?60?'的考試成績(jī)及格':'的考試成績(jī)不及格'}`;
復(fù)制代碼
四、關(guān)于if中判斷條件的吐槽
if(
????type?==?1?||
????type?==?2?||
????type?==?3?||
????type?==?4?||
){
???//...
}
復(fù)制代碼
吐槽
ES6中數(shù)組實(shí)例方法includes會(huì)不會(huì)使用呢？
改進(jìn)
const?condition?=?[1,2,3,4];
if(?condition.includes(type)?){
???//...
}
復(fù)制代碼
五、關(guān)于列表搜索的吐槽
在項(xiàng)目中，一些沒(méi)分頁(yè)的列表的搜索功能由前端來(lái)實(shí)現(xiàn)，搜索一般分為精確搜索和模糊搜索。搜索也要叫過(guò)濾，一般用filter來(lái)實(shí)現(xiàn)。
const?a?=?[1,2,3,4,5];
const?result?=?a.filter(?
??item?=>{
????return?item?===?3
??}
)
復(fù)制代碼
吐槽
如果是精確搜索不會(huì)用ES6中的find嗎？性能優(yōu)化懂么，find方法中找到符合條件的項(xiàng)，就不會(huì)繼續(xù)遍歷數(shù)組。
改進(jìn)
const?a?=?[1,2,3,4,5];
const?result?=?a.find(?
??item?=>{
????return?item?===?3
??}
)
復(fù)制代碼
六、關(guān)于扁平化數(shù)組的吐槽
一個(gè)部門(mén)JSON數(shù)據(jù)中，屬性名是部門(mén)id，屬性值是個(gè)部門(mén)成員id數(shù)組集合，現(xiàn)在要把有部門(mén)的成員id都提取到一個(gè)數(shù)組集合中。
const?deps?=?{
'采購(gòu)部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'運(yùn)輸部':[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)]
復(fù)制代碼
吐槽
獲取對(duì)象的全部屬性值還要遍歷嗎？Object.values忘記了嗎？還有涉及到數(shù)組的扁平化處理，為啥不用ES6提供的flat方法呢，還好這次的數(shù)組的深度最多只到2維，還要是遇到4維、5維深度的數(shù)組，是不是得循環(huán)嵌套循環(huán)來(lái)扁平化？
改進(jìn)
const?deps?=?{
????'采購(gòu)部':[1,2,3],
????'人事部':[5,8,12],
????'行政部':[5,14,79],
????'運(yùn)輸部':[3,64,105],
}
let?member?=?Object.values(deps).flat(Infinity);
復(fù)制代碼
其中使用Infinity作為flat的參數(shù)，使得無(wú)需知道被扁平化的數(shù)組的維度。
補(bǔ)充
flat方法不支持IE瀏覽器。
七、關(guān)于獲取對(duì)象屬性值的吐槽
const?name?=?obj?&&?obj.name;
復(fù)制代碼
吐槽
ES6中的可選鏈操作符會(huì)使用么？
改進(jìn)
const?name?=?obj?.name;
復(fù)制代碼
八、關(guān)于添加對(duì)象屬性的吐槽
當(dāng)給對(duì)象添加屬性時(shí)，如果屬性名是動(dòng)態(tài)變化的，該怎么處理。
let?obj?=?{};
let?index?=?1;
let?key?=?`topic${index}`;
obj[key]?=?'話題內(nèi)容';
復(fù)制代碼
吐槽
為何要額外創(chuàng)建一個(gè)變量。不知道ES6中的對(duì)象屬性名是可以用表達(dá)式嗎？
改進(jìn)
let?obj?=?{};
let?index?=?1;
obj[`topic${index}`]?=?'話題內(nèi)容';
復(fù)制代碼
九、關(guān)于輸入框非空的判斷
在處理輸入框相關(guān)業(yè)務(wù)時(shí)，往往會(huì)判斷輸入框未輸入值的場(chǎng)景。
if(value?!==?null?&&?value?!==?undefined?&&?value?!==?''){
????//...
}
復(fù)制代碼
吐槽
ES6中新出的空值合并運(yùn)算符了解過(guò)嗎，要寫(xiě)那么多條件嗎？
if((value??'')?!==?''){
??//...
}
復(fù)制代碼
十、關(guān)于異步函數(shù)的吐槽
異步函數(shù)很常見(jiàn)，經(jīng)常是用 Promise 來(lái)實(shí)現(xiàn)。
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)
??????})
???})
}
復(fù)制代碼
吐槽
如果這樣調(diào)用異步函數(shù)，不怕形成地獄回調(diào)??！
改進(jìn)
const?fn?=?async?()?=>{
??const?res1?=?await?fn1();
??const?res2?=?await?fn2();
??console.log(res1);//?1
??console.log(res2);//?2
}
復(fù)制代碼
補(bǔ)充
但是要做并發(fā)請(qǐng)求時(shí)，還是要用到Promise.all()。
const?fn?=?()?=>{
???Promise.all([fn1(),fn2()]).then(res?=>{
???????console.log(res);//?[1,2]
???})?
}
復(fù)制代碼
如果并發(fā)請(qǐng)求時(shí)，只要其中一個(gè)異步函數(shù)處理完成，就返回結(jié)果，要用到Promise.race()。
結(jié)語(yǔ)
歡迎來(lái)對(duì)以上十點(diǎn)leader的吐槽進(jìn)行反駁，你的反駁如果有道理的，下次代碼評(píng)審會(huì)上，我替你反駁。
此外以上的整理內(nèi)容有誤的地方，歡迎在評(píng)論中指正，萬(wàn)分感謝。
如果你還有其它想吐槽的，也非常歡迎在評(píng)論中留下你的吐槽。
讀完有幫助，不妨關(guān)注一下，點(diǎn)個(gè)贊支持一下。