7個讓你的代碼更出色的JavaScript小技巧
原文 | https://medium.com/madhash/7-little-big-javascript-techniques-that-makes-your-code-better-7894d3f984c5
翻譯 | 小愛
let abc = ['apple', 'bananas', 'cherries', 'dragon fruit'];let abc_spread = [...abc]console.log(abc_spread);// this will return:// ['apple', 'bananas', 'cherries', 'dragon fruit'];
讓我們再看一個例子：
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)容然后手動將其放入數(shù)組中相比，使用展開運(yùn)算符更容易、更高效且更不麻煩。
2、遞歸
遞歸基本上就像循環(huán)中的循環(huán)，但沒有嵌套。它無限期地調(diào)用自己，直到調(diào)用“escape”子句。
下面是一個例子：
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)線性運(yùn)行并要求執(zhí)行每個連續(xù)以產(chǎn)生結(jié)果。
3、使用日志級別
console.log 不僅僅是 console.log。日志級別使日志記錄更加容易，并提醒你注意重要的事情。它還會在控制臺中直觀地分解你的日志，從而更輕松地掃描你需要的信息。
以下是完整列表：
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")
這是它的實際外觀：
4、布爾變量的語言
雙重否定可能令人困惑。通過始終將你的布爾語言假設(shè)設(shè)為真，讓事情變得簡單。
例如：
const isInvalidKey = apiKey === nullif(isInvalidKey){}
上面是一個糟糕的代碼語言模式，因為雖然看起來很簡單，但當(dāng)你想用 ! 反轉(zhuǎn)它時會讓人困惑。
if(!isInvalidKey){}這是一個更好的寫法：
const isValidKey = apiKey != nullif(!isValidKey){}
一般來說，沒有人喜歡閱讀雙重否定，因為你被迫計算預(yù)期的結(jié)果是什么。一旦你開始使用否定詞來描述布爾值，就不再是簡單的“是”或“否”答案。
5、對象而不是參數(shù)列表
參數(shù)列表的問題是它們必須按特定順序排列。但是，如果你使用對象，則更容易傳入可選參數(shù)，并且順序不再重要。
與參數(shù)變量列表相比，通過對象傳遞的內(nèi)容也更容易閱讀和理解。
下面是一個例子：
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 語句很棒。
在大多數(shù)情況下，如果 return 執(zhí)行完全相同的工作，則不需要 if/else 語句。
這就是我的意思。看看下面的例子：
function someCode(){if(someBoolean){return something;}else{return anotherthing;}}
實際上，這也會產(chǎn)生同樣的影響：
function someCode(){if(someBoolean){return something;}return anotherthing;}
返回的目的是結(jié)束程序。 如果無論如何都沒有滿足 if 條件，那么編寫 else 語句就變得多余了。
7、捕捉錯誤
看看下面的例子：
;...const fakeAPI = function(callback){request(`https://someapi.com/api`,{json: true},(err, res, body) => {if(res){//do something}else{callback(err)}})}
假設(shè)你的 API 將始終有效。 它可能會拋出一個錯誤并返回一個 res 并且我們永遠(yuǎn)不會知道這個錯誤。
下面是查看相同代碼的不同方式：
;...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è)最壞的情況，所以你把你的錯誤放在第一位，這樣它就不會在沉默中失敗。
總結(jié)
這些是我最喜歡的，也是我經(jīng)常向開發(fā)人員提倡和談?wù)揓avaScript 的 7 大技巧。 這不是一切，而是一個好的起點，尤其是當(dāng)你重構(gòu)代碼或致力于使代碼更易于閱讀和維護(hù)時。
感謝您的閱讀，我希望您發(fā)現(xiàn)這篇文章很有用。
學(xué)習(xí)更多技能
請點擊下方公眾號
