7個(gè) JavaScript 小技巧，讓你的代碼更出色！
原文 | https://medium.com/madhash/7-little-big-javascript-techniques-that-makes-your-code-better-7894d3f984c5
翻譯 | 小愛(ài)
let abc = ['apple', 'bananas', 'cherries', 'dragon fruit'];let abc_spread = [...abc]console.log(abc_spread);// this will return:// ['apple', 'bananas', 'cherries', 'dragon fruit'];
讓我們?cè)倏匆粋€(gè)例子：
const PREFIX = '$';let message = '$kick ivan89234 bot0298 fake122 ';function kick(){const [CMD_NAME, ...args] = message.trim().substring(PREFIX.length).split(/\s+/);console.log(CMD_NAME);console.log(args);}kick();// console.log() will return// "kick"// ["ivan89234", "bot0298", "fake122"]
與嘗試遍歷所有內(nèi)容然后手動(dòng)將其放入數(shù)組中相比，使用展開(kāi)運(yùn)算符更容易、更高效且更不麻煩。
2、遞歸
遞歸基本上就像循環(huán)中的循環(huán)，但沒(méi)有嵌套。它無(wú)限期地調(diào)用自己，直到調(diào)用“escape”子句。
下面是一個(gè)例子：
function weight(x, n){if(n == 1) return x; //the escape clausereturn x * weight(x, n -1); //the recursion}console.log('Tibbers weighs '+ weight(2, 5)+ ' pounds after eating 5 pieces of cheese' );
遞歸和循環(huán)之間的區(qū)別在于遞歸是自包含的，并根據(jù)輸入產(chǎn)生特定的輸出。循環(huán)線(xiàn)性運(yùn)行并要求執(zhí)行每個(gè)連續(xù)以產(chǎn)生結(jié)果。
3、使用日志級(jí)別
console.log 不僅僅是 console.log。日志級(jí)別使日志記錄更加容易，并提醒你注意重要的事情。它還會(huì)在控制臺(tái)中直觀地分解你的日志，從而更輕松地掃描你需要的信息。
以下是完整列表：
console.log("hello world")console.warn("this is a warning")console.error("this is an error")console.info("this is info")console.debug("this is debug")console.trace("show trace")
這是它的實(shí)際外觀：
4、布爾變量的語(yǔ)言
雙重否定可能令人困惑。通過(guò)始終將你的布爾語(yǔ)言假設(shè)設(shè)為真，讓事情變得簡(jiǎn)單。
例如：
const isInvalidKey = apiKey === nullif(isInvalidKey){}
上面是一個(gè)糟糕的代碼語(yǔ)言模式，因?yàn)殡m然看起來(lái)很簡(jiǎn)單，但當(dāng)你想用 ! 反轉(zhuǎn)它時(shí)會(huì)讓人困惑。
if(!isInvalidKey){}這是一個(gè)更好的寫(xiě)法：
const isValidKey = apiKey != nullif(!isValidKey){}
一般來(lái)說(shuō)，沒(méi)有人喜歡閱讀雙重否定，因?yàn)槟惚黄扔?jì)算預(yù)期的結(jié)果是什么。一旦你開(kāi)始使用否定詞來(lái)描述布爾值，就不再是簡(jiǎn)單的“是”或“否”答案。
5、對(duì)象而不是參數(shù)列表
參數(shù)列表的問(wèn)題是它們必須按特定順序排列。但是，如果你使用對(duì)象，則更容易傳入可選參數(shù)，并且順序不再重要。
與參數(shù)變量列表相比，通過(guò)對(duì)象傳遞的內(nèi)容也更容易閱讀和理解。
下面是一個(gè)例子：
function getItem(price, quantity, name, description) {}getItem(15, undefined, ‘bananas’, ‘fruit’)
這是重構(gòu)的版本：
function getItem(args) {const {price, quantity, name, description} = args}getItem({name: 'bananas',price: 10,quantity: 1,description: 'fruit})
6、if/else
if/else 語(yǔ)句很棒。
在大多數(shù)情況下，如果 return 執(zhí)行完全相同的工作，則不需要 if/else 語(yǔ)句。
這就是我的意思。看看下面的例子：
function someCode(){if(someBoolean){return something;}else{return anotherthing;}}
實(shí)際上，這也會(huì)產(chǎn)生同樣的影響：
function someCode(){if(someBoolean){return something;}return anotherthing;}
返回的目的是結(jié)束程序。如果無(wú)論如何都沒(méi)有滿(mǎn)足 if 條件，那么編寫(xiě) else 語(yǔ)句就變得多余了。
7、捕捉錯(cuò)誤
看看下面的例子：
;...const fakeAPI = function(callback){request(`https://someapi.com/api`,{json: true},(err, res, body) => {if(res){//do something}else{callback(err)}})}
假設(shè)你的 API 將始終有效。它可能會(huì)拋出一個(gè)錯(cuò)誤并返回一個(gè) res 并且我們永遠(yuǎn)不會(huì)知道這個(gè)錯(cuò)誤。
下面是查看相同代碼的不同方式：
;...const fakeAPI = function(callback){request(`https://somesite.com/api`,{json: true},(err, res, body) => {if(err) return callback(err)//rest of your code to deal with res})}
你總是假設(shè)最壞的情況，所以你把你的錯(cuò)誤放在第一位，這樣它就不會(huì)在沉默中失敗。
總結(jié)
這些是我最喜歡的，也是我經(jīng)常向開(kāi)發(fā)人員提倡和談?wù)揓avaScript 的 7 大技巧。這不是一切，而是一個(gè)好的起點(diǎn)，尤其是當(dāng)你重構(gòu)代碼或致力于使代碼更易于閱讀和維護(hù)時(shí)。
感謝您的閱讀，我希望您發(fā)現(xiàn)這篇文章很有用。
往期干貨：
26個(gè)經(jīng)典微信小程序+35套微信小程序源碼+微信小程序合集源碼下載（免費(fèi)）
干貨~~~2021最新前端學(xué)習(xí)視頻~~速度領(lǐng)取
前端書(shū)籍-前端290本高清pdf電子書(shū)打包下載
點(diǎn)贊和在看就是最大的支持??