[[397666]]

【51CTO.com快譯】自2015年以來，隨著ECMAScript 6(簡稱ES6)的發布，每年都有新版本的ECMAScript規范面市。而每次迭代都為該語言添加新的功能、新的語法、以及新的質量改進。為此，大多數瀏覽器和Node.js中的JavaScript引擎都需要迎頭趕上。就連程序員的編程習慣、以及代碼組織方法，也需要與時俱進，以提高整體的代碼質量，并方便后期的維護。

為了便于您編寫出更簡潔、更易讀的程序代碼，本文將在總結和歸納ECMAScript最新功能的基礎上，為您提供提高JavaScript和Node.js代碼質量的七種優秀實踐。

1.塊作用域聲明(Block Scoped Declarations)

自從該語言問世以來，JavaScript開發人員一直使用var來聲明變量。不過，正如下面代碼段所展示的那樣，由關鍵字var所創建的變量，在其作用域上會出現問題。

var x = 10 
if (true) { 
  var x = 15     // inner declaration overrides declaration in parent scope 
  console.log(x) // prints 15 
} 
console.log(x)   // prints 15 

由于已定義的變量var并非塊作用域(block-scoped)，因此如果在小作用域內被重新定義，它們就會影響到外部作用域的值。

然而，如果我們用let和const兩個新的關鍵字來替換var，便可以避免該缺陷(請參見如下代碼段)。

let y = 10 
if (true) { 
  let y = 15       // inner declaration is scoped within the if block 
  console.log(y)   // prints 15 
} 
console.log(y)     // prints 10 

當然，const與let在語義上有所不同，那些用const聲明的變量，無法在其作用域內被重新分配(如下代碼段所示)。不過，這并不意味著它們是不可改變的，而只是代表著它們的引用不能被更改。

const x = [] 
  
x.push("Hello", "World!") 
x // ["Hello", "World!"] 
  
x = [] // TypeError: Attempted to assign to readonly property. 

2.箭頭函數(Arrow Functions)

作為新近被引入JavaScript的一項重要功能，箭頭函數具有許多優點。首先，它們能夠讓JavaScript的函數看起來更加整潔，并且更便于開發者的編寫。

let x = [1, 2, 3, 4] 
  
x.map(val => val * 2)                // [2, 4, 6, 8] 
x.filter(val => val % 2 == 0)        // [2, 4] 
x.reduce((acc, val) => acc + val, 0) // 10 

如上述示例所示，“=>”后面的函數以一種簡潔的語法，替換了傳統函數。

• 如果函數主體是單個表達式，則已經隱含了作用域括號{}和return關鍵字，所以無需額外寫入。
• 如果函數只有一個參數，則也已經隱含了參數括號()，同樣無需額外寫入。
• 如果函數體的表達式是一套字典(dictionary)，則必須將其括入括號()中。

箭頭函數的另一個優勢在于：為了避免由于使用this關鍵字，而引起的諸多不便，箭頭函數并不會定義作用域，而是會存在于其父作用域中。也就是說，箭頭函數沒有任何針對this的綁定。在箭頭函數中，this的值與父作用域中的值是相同的。因此，箭頭函數不能被用作各種方法或構造函數。它們既不適用于apply、bind或call，也沒有針對super的綁定。

此外，箭頭函數還會受到諸如：缺少可供傳統功能訪問的arguments對象，以及缺少函數體中的yield等其他限制。

可以說，箭頭函數并非是與標準函數的1：1替代，而是向JavaScript中添加了額外的功能集。

3.可選鏈(Optional Chaining)

讓我們來試想一個類似person對象的、具有深層嵌套的數據結構。業務應用需要訪問到該對象的名字和姓氏。由此，我們可以編寫出如下JavaScript代碼：

public class HelloWorld { 
    public static void main(String[] args) { 
        System.out.println("Hello World"); 
    } 
} 

然而，如果person對象并不包含嵌套的name對象，則可能會出現如下錯誤。

person = { 
  age: 42 
} 
person.name.first // TypeError: Cannot read property 'first' of undefined 
person.name.last  // TypeError: Cannot read property 'last' of undefined 

對此，開發人員往往需要通過如下代碼，來予以解決。顯然，這些代碼不但冗長難寫，而且可讀性較差。

person && person.name && person.name.first // undefined 

而作為JavaScript的一項新功能，可選鏈的語法允許您訪問嵌套得更深的對象屬性，而不用擔心屬性是否真的存在。也就是說，如果可選鏈在挖掘過程遇到了null或undefined的值，那么就會通過短路(short-circuit)計算，返回undefined，而不會報錯。

person?.name?.first // undefined 

如上述代碼所示，其結果代碼簡潔且明了。

4.空值合并(Null-ish Coalescing)

在引入空值合并運算符之前，在輸入為空的情況下，JavaScript開發人員需要使用OR運算符--||，以回退到默認值。這就會導致：即使出現合法的、但屬于虛假值(falsy values)，也會被回退到默認值的情況。

function print(val) { 
    return val || 'Missing' 
} 
  
print(undefined) // 'Missing' 
print(null)      // 'Missing' 
  
print(0)         // 'Missing' 
print('')        // 'Missing' 
print(false)     // 'Missing' 
print(NaN)       // 'Missing' 

如今，JavaScript推出了null合并運算符--??。它能夠保證只有在前面的表達式為null-ish的情況下，才會觸發回退。值得注意的是，此處的空值是指null或undefined。

function print(val) { 
    return val ?? 'Missing' 
} 
  
print(undefined) // 'Missing' 
print(null)      // 'Missing' 
  
print(0)         // 0 
print('')        // '' 
print(false)     // false 
print(NaN)       // NaN 

如此，您可以確保自己的程序能夠接受虛假值作為合法輸入，而不會最終被回退。

5.邏輯賦值(Logical Assignment)

假設您需要先判斷是否為空，再為變量分配數值，那么如下代碼便展示了這樣的基本邏輯：

if (x === null || x == undefined) { 
    x = y 
} 

如果您熟悉上面提到的短路計算的工作原理，則可能會使用null-ish合并運算符(coalescing operator)，將上述三行代碼替換為如下更簡潔的版本。

x ?? (x = y) // x = y if x is nullish, else no effect 

由上述代碼可知，如果x為null-ish的話，我們可以使用null-ish合并運算符的短路功能，來執行第二部分(x = y)。這段代碼雖然非常簡潔，但是不太容易被閱讀或理解。而我們完全可以使用如下代碼，根據邏輯上的null-ish分配，來消除此類變通方法。

x ??= y // x = y if x is nullish, else no effect 

同樣，JavaScript還引入了邏輯AND賦值--&&=、邏輯OR賦值--||=的運算符。這些運算符僅在滿足特定條件時被執行賦值，否則并不起作用。

x ||= y // x = y if x is falsy, else no effect 
x &&= y // x = y if x is truthy, else no effect 

專家建議：如果您有過Ruby的編程經驗，那么您會一眼識別出||=和&&=運算符。畢竟Ruby并沒有虛假值的概念。

6.已命名捕獲組(Named Capture Groups)

不知您是否知曉正則表達式中的“捕獲組”的相關概念?如下面的代碼段所示，它是與括號中的正則表達式部分匹配的字符串。

let re = /(\d{4})-(\d{2})-(\d{2})/ 
let result = re.exec('Pi day this year falls on 2021-03-14!') 
  
result[0] // '2020-03-14', the complete match 
result[1] // '2020', the first capture group 
result[2] // '03', the second capture group 
result[3] // '14', the third capture group 

一直以來，正則表達式都能夠支持已命名捕獲組。這是一種通過引用名稱、而非索引，來捕獲各個組的方式。目前，在ES9中，該功能已被JavaScript實現。正如下面的代碼段所示，其結果對象包含了一個嵌套的組對象，其中每個捕獲組的值都能夠映射到其名稱上。

let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/ 
let result = re.exec('Pi day this year falls on 2021-03-14!') 
  
result.groups.year  // '2020', the group named 'year' 
result.groups.month // '03', the group named 'month' 
result.groups.day   // '14', the group named 'day' 

而且，新的API與JavaScript的解構分配功能，也能夠完美地結合在一起(請參見下面的代碼段)。

let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/ 
let result = re.exec('Pi day this year falls on 2021-03-14!') 
let { year, month, day } = result.groups 
  
year  // '2020' 
month // '03' 
day   // '14' 

7.async和await

眾所周知，異步性是JavaScript的一項強大功能。許多可能長時間運行、或較為耗時的函數，能夠返回Promise，而不會被阻止運行。

const url = 'https://the-one-api.dev/v2/book' 
let prom = fetch(url) 
prom // Promise {<pending>} 
  
// wait a bit 
prom // Promise {<fullfilled>: Response}, if no errors 
// or 
prom // Promise {<rejected>: Error message}, if any error 

在上述代碼段中，針對fetch的調用返回了一個狀態為“待處理(pending)”的Promise。而當API返回響應時，它將會轉換為“已實現(fulfilled)”的狀態。在Promises中，您可以執行如下操作，來通過API的調用，將響應解析成為JSON。

const url = 'https://the-one-api.dev/v2/book' 
let prom = fetch(url) 
prom                               // Promise {<fullfilled>: Response} 
  .then(res => res.json()) 
  .then(json => console.log(json)) // prints response, if no errors 
  .catch(err => console.log(err))  // prints error message, if any error 

2017年，JavaScript推出了兩個新的關鍵字async和await，來使得Promises的處理和使用變得更加容易和流暢。當然，它們并非Promises的替代，只是Promises概念之上的語法增強。

而且，并非讓所有的代碼里都出現在一系列的“then”函數，await旨在讓其更像同步的JavaScript。您可以使用帶有await的try...catch，來代替直接使用Promise的catch函數去處理錯誤。下面是具有同等效果的await代碼。

const url = 'https://the-one-api.dev/v2/book' 
let res = await fetch(url) // Promise {<fullfilled>: Response} -await-> Response 
try { 
    let json = await res.json() 
    console.log(json) // prints response, if no errors 
} catch(err) { 
  console.log(err)  // prints error message, if any error 
} 

當然，async關鍵字也有著“硬幣的另一面”，它會將任何待發送的數據封裝到一個Promise中。下面是一段旨在通過異步函數添加多個數字的程序代碼。在現實情況中，您的代碼可能會比它更加復雜。

async function sum(...nums) { 
    return nums.reduce((agg, val) => agg + val, 0) 
} 
sum(1, 2, 3)                    // Promise {<fulfilled>: 6} 
  .then(res => console.log(res) // prints 6 
let res = await sum(1, 2, 3)    // Promise {<fulfilled>: 6} -await-> 6 
console.log(res)                // prints 6 

小結

如您所見，JavaScript每年都會在其語言中加入新的功能。希望我們在上面介紹到的七項提到代碼質量的優秀實踐，能夠對您的日常編程提供幫助。

原文標題：7 JavaScript Best Practices to Improve Code Quality，作者：Dhruv Bhanushali

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】