原文 | https://medium.com/madhash/7-little-big-javascript-techniques-that-makes-your-code-better-7894d3f984c5
翻譯 | 小愛
學習如何編碼很容易——尤其是在 JavaScript 中。一旦你讓事情運轉起來，我們往往不會回頭看看我們如何讓事情變得更好。
我們一路向前、向前，直到下一個項目開始和功能釋出。我們不知疲倦地寫代碼，我們将所有知道的知識來完成我們需要工作的内容，好吧，開始工作。
多年來，我從各個地方學習到了一些東西。以下是我讓代碼看起來更好，閱讀更好的 7 大 JavaScript 技巧。
1、… 點差運算符
事實證明，spread ... 運算符仍在 JavaScript 新手圈子中大放光彩。
什麼是點差運算符？它是如何工作的？這是一個快速演練。
你有一個需要放置在數組中的可疊代對象。然而，你不知道這個可疊代對象的最終長度——或者你隻是懶得手動把它全部寫出來。
這就是 spread ... 操作符的用武之地。
它會自動将可疊代對象放入數組中。
這裡有一些代碼可以幫助你了解它：
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"] 與嘗試周遊所有内容然後手動将其放入數組中相比，使用展開運算符更容易、更高效且更不麻煩。
2、遞歸
遞歸基本上就像循環中的循環，但沒有嵌套。它無限期地調用自己，直到調用“escape”子句。
下面是一個例子：
function weight(x, n){
if(n == 1) return x; //the escape clause
return x * weight(x, n -1); //the recursion
}
console.log('Tibbers weighs '
+ weight(2, 5)
+ ' pounds after eating 5 pieces of cheese' ); 遞歸和循環之間的差別在于遞歸是自包含的，并根據輸入産生特定的輸出。循環線性運作并要求執行每個連續以産生結果。
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、布爾變量的語言
雙重否定可能令人困惑。通過始終将你的布爾語言假設設為真，讓事情變得簡單。
例如：
const isInvalidKey = apiKey === null
if(isInvalidKey){} 上面是一個糟糕的代碼語言模式，因為雖然看起來很簡單，但當你想用 ! 反轉它時會讓人困惑。
if(!isInvalidKey){} 這是一個更好的寫法：
const isValidKey = apiKey != null
if(!isValidKey){} 一般來說，沒有人喜歡閱讀雙重否定，因為你被迫計算預期的結果是什麼。一旦你開始使用否定詞來描述布爾值，就不再是簡單的“是”或“否”答案。
5、對象而不是參數清單
參數清單的問題是它們必須按特定順序排列。但是，如果你使用對象，則更容易傳入可選參數，并且順序不再重要。
與參數變量清單相比，通過對象傳遞的内容也更容易閱讀和了解。
下面是一個例子：
function getItem(price, quantity, name, description) {}
getItem(15, undefined, ‘bananas’, ‘fruit’) 這是重構的版本：
function getItem(args) {
const {price, quantity, name, description} = args
}
getItem({
name: 'bananas',
price: 10,
quantity: 1,
description: 'fruit
}) 6、if/else
if/else 語句很棒。
在大多數情況下，如果 return 執行完全相同的工作，則不需要 if/else 語句。
這就是我的意思。看看下面的例子：
function someCode(){
if(someBoolean){
return something;
}else{
return anotherthing;
}
} 實際上，這也會産生同樣的影響：
function someCode(){
if(someBoolean){
return something;
}
return anotherthing;
} 傳回的目的是結束程式。 如果無論如何都沒有滿足 if 條件，那麼編寫 else 語句就變得多餘了。
7、捕捉錯誤
看看下面的例子：
'use strict';
...
const fakeAPI = function(callback){
request(`https://someapi.com/api`,
{json: true},
(err, res, body) => {
if(res){
//do something
}else{
callback(err)
}
})
} 假設你的 API 将始終有效。 它可能會抛出一個錯誤并傳回一個 res 并且我們永遠不會知道這個錯誤。
下面是檢視相同代碼的不同方式：
'use strict';
...
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
})
} 你總是假設最壞的情況，是以你把你的錯誤放在第一位，這樣它就不會在沉默中失敗。
總結
這些是我最喜歡的，也是我經常向開發人員提倡和談論JavaScript 的 7 大技巧。 這不是一切，而是一個好的起點，尤其是當你重構代碼或緻力于使代碼更易于閱讀和維護時。
感謝您的閱讀，我希望您發現這篇文章很有用。
學習更多技能
請點選下方公衆号
、