JavaScript 最佳實踐

在這篇文章中我將帶你了解 JavaScript 編碼時的「好習慣」。

1 — 避免使用 new Object()
在 JavaScript 中，使用 new Object 有點冒險，而使用原語總是比較好，原因有幾個。讓我們深入探討一下。

一般來說
例如，眾所周知，「」建立一個字串原語，另一方面… new String() 建立一個字串物件。由於它們更複雜且具有方法，字串物件可能會帶來意想不到的行為，尤其是在比較和類型強制方面。

簡單
原語的使用更簡單、更直接，因為它們的使用避免了不必要的複雜性，而且程式碼變得易於閱讀和維護。

性能
基元在記憶體和效能方面更加有效率。建立物件時會涉及額外的開銷。

可能的混亂
由於 JavaScript 對待物件和基元的方式不同，因此使用 new Object() 可能會導致令人困惑的情況，即您無意中處理的是物件而不是基元，這可能會導致大量錯誤。

在大多數情況下，最好使用原語。

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

2 — 避免將 let 與陣列和物件一起使用
首先，讓我們明確一點……將 let 與陣列和物件一起使用本質上根本沒有問題。但有一些具體的考慮因素可能會導致您在某些情況下避免使用它：

重新分配與重新分配突變
眾所周知，let 允許我們重新分配變數本身，這可能會導致混亂或資料遺失。物件/陣列可能會意外地使用全新的資料集（新物件/新陣列）重新分配。

使用 const 可以更安全、更清楚地表明對物件/陣列的引用不會改變，但你仍然可以修改它的內容。

不變性意圖
使用 const，您可以向與您一起工作的其他開發人員發出信號，表明不應重新分配該變量，從而增強程式碼的可讀性和可維護性。

範圍
雖然 let 具有區塊作用域，但它可能會導致迴圈或條件語句中出現意外行為。透過使用 const，變數保留在作用域內，而不會有意外重新分配的風險。

最佳實踐
許多編碼標準和最佳實踐鼓勵對不需要重新分配的變數使用 const，從而促進更乾淨、更可預測的程式碼。

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

3 — 小心自動型別轉換
在 JavaScript 中，也稱為型別強制，當語言自動將值從一種型別轉換為另一種型別時就會發生。這種情況可能會在各種情況下發生，尤其是在涉及不同資料類型的操作期間：

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

小心數字，可能會意外轉換為字串或 NaN。因此，請考慮在敏感操作之前實施類型測試或考慮使用 TypeScript 進行安全輸入。

4 — 避免使用雙重相等比較
== 和 === 是用於比較值的比較運算符，但它們的行為不同。

抽象平等
使用 == 時，JavaScript 在進行比較之前會將值轉換為通用類型

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

何時使用？
當您想要確保值和類型相同時，請使用 ===，這通常是避免意外結果的好習慣。

如果您特別需要比較值而不考慮它們的類型，請使用 ==，但這可能會導致錯誤，並且通常不鼓勵。

一般來說，考慮使用===來進行更可預測和更清晰的比較。

注意：同樣的事情也適用於 !== 和 !=

5 — 使用物件/陣列解構
在 JavaScript 中，使用物件和陣列的解構技術可以為您帶來許多好處。

解構賦值語法是一種 JavaScript 表達式，可以將陣列中的值或物件中的屬性解壓縮到不同的變數中。正如 MDN 網路文件所述。

簡潔
它允許您在一條語句中從物件中提取多個屬性或從陣列中提取元素，從而減少需要編寫的程式碼量。

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

清晰度
解構可以透過清楚地顯示您正在使用的屬性或元素來使您的程式碼更具可讀性。

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

預設值
如果屬性或元素不存在，您可以輕鬆指派預設值。

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

嵌套解構
您可以解構嵌套物件或數組，這可以簡化對深層嵌套資料的存取。

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

函數參數
它對於函數參數很有用，允許您直接解壓縮值。

const { height = 180 } = person; // uses default value if height is undefined

解構有助於簡化程式碼，使其更乾淨且更易於維護。

6 — 預設參數
預設參數是一種很好的技術，可以讓你的程式碼更清晰、易於閱讀。

預設函數參數允許在沒有傳遞值或未定義的情況下使用預設值初始化命名參數。正如 MDN 網路文件所述。

單一參數

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

多參數
您可以為多個參數設定預設值。

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

傳遞多個參數時請注意未給定的參數。避免將可能未定義或可能未傳遞的參數作為第一個參數或在任何其他傳遞的參數之前傳遞。

如果您懷疑某個參數值可能未給出或可能以未定義的形式傳遞，請確保將其作為最後一個傳遞，以及多個未給定的參數。

使用表達式作為預設值
您可以使用表達式來計算預設值。

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

使用預設值的其餘參數
您可以將預設參數與其餘參數結合。

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

好處
提高可讀性：如果省略參數，則使用預設值是很清楚的。
更少的樣板：減少在函數體內檢查和分配預設值的需要。
增強的靈活性：函數可以更優雅地處理更廣泛的輸入。
預設參數是一個強大的功能，可以增強函數可用性並使您的程式碼更乾淨！

7 — 在開關中使用預設值
在 JavaScript 中，以 default case 結束 switch 語句是個很好的做法。當指定的情況都不與輸入相符時，預設情況將充當後備：

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

包羅萬象
它提供了一種處理意外值的方法，確保您的程式碼不會默默地失敗。

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

提高可讀性
包含預設情況可以讓其他開發人員（或您自己）清楚地知道您考慮了所有可能性。

錯誤處理
它可用於在遇到意外值時記錄或拋出錯誤。

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

如果有可能收到意外輸入，請務必包含預設情況。
使用預設情況提供有用的回饋或日誌記錄，尤其是在偵錯場景中。
如果適用，請考慮使用預設情況來設定後備值。
在 switch 語句中加入 default case 可以增強程式碼的穩健性和可維護性。

8 — 避免使用 eval()
eval() 是一個內建 JavaScript 函數，它將字串作為參數並將其計算為 JavaScript 程式碼。這意味著您可以動態執行在運行時產生的程式碼。

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

由於幾個重要原因，廣泛建議避免在 JavaScript 中使用 eval()。

安全風險
程式碼注入：eval() 可以執行任意程式碼，使您的應用程式容易受到程式碼注入攻擊。如果評估使用者輸入，攻擊者可能會注入惡意程式碼。

const { height = 180 } = person; // uses default value if height is undefined

效能問題
執行緩慢：使用 eval() 執行的程式碼運行速度比常規程式碼慢，因為它必須在運行時解釋，繞過 JavaScript 引擎所做的某些優化。
調試挑戰
更難調試：使用 eval() 會使調試變得困難。 eval() 內部拋出的錯誤可能很難追溯到原始來源。
替代方案
考慮這些更安全的替代方案，而不是 eval()：

JSON 解析：如果您正在處理 JSON 數據，請使用 JSON.parse() 而不是 eval()。
const jsonString = '{"name": "Alice"}';
const obj = JSON.parse(jsonString); // 將 JSON 字串轉換為物件的安全方法
函數建構函式：如果您需要動態建立函數，請考慮使用函數建構函式。

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

總之，由於安全風險、效能問題和調試困難，請避免使用 eval()。選擇更安全的替代方案來實現您的目標，而不會影響程式碼的完整性和效能。

9 — 使用嚴格模式
在 JavaScript 中，「嚴格模式」是一種選擇該語言的受限變體的方法，有助於捕獲常見的編碼錯誤和「不安全」操作。它可以使您的程式碼更可預測且更易於調試。

啟用嚴格模式
全域：透過設定「use strict」；位於腳本檔案的頂部。

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

使用嚴格模式的好處
防止使用未宣告的變數：為未宣告的變數賦值會引發錯誤。

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

消除了這種強制：在嚴格模式下，在沒有顯式上下文的情況下調用的函數中這是未定義的。

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

禁止某些語法：不允許某些被認為有問題或令人困惑的語法。
常見陷阱
箭頭函數：請注意，箭頭函數沒有自己的 this，因此嚴格模式不適用於相同的方式。
eval：eval 語句中執行的程式碼在本機作用域而不是全域作用域中運作。
使用嚴格模式通常被認為是最佳實踐，尤其是對於大型應用程序，因為它可以幫助您編寫更乾淨、更安全的程式碼。

10 — 保持程式碼乾燥（不要重複）
DRY（不要重複自己）原則是軟體開發中的關鍵概念，旨在減少程式碼重複。透過確保每條知識或邏輯都在一個位置表示，您可以使程式碼更易於維護、理解和重構。

功能
將重複的邏輯封裝在函數中。這樣，您就可以重複使用相同的程式碼。

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

模組
使用模組來組織您的程式碼。這有助於將相關的函數和變數放在一起，使它們可以在應用程式的不同部分中重複使用。

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

類別和物件
利用類別或物件對相關資料和行為進行分組。這種封裝有助於避免在使用類似的資料結構時出現重複。

const { height = 180 } = person; // uses default value if height is undefined

注意：如果您在日常編碼中採用「函數式程式設計」範例，請考慮使用「類別和物件」以外的任何其他技巧。

模板和組件
在網路開發中，使用範本或元件（在React、Vue等框架中）來封裝重複使用的UI邏輯和樣式。

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

資料結構
使用陣列或物件來儲存相關數據，而不是為每個資料建立單獨的變數。

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

應用 DRY 原則可以產生更乾淨、更容易維護的程式碼。它有助於最大限度地降低錯誤風險，因為只需在一個地方進行更改，並且透過減少混亂來增強可讀性。請記住，雖然避免重複很重要，但也需要保持平衡；過度抽象可能會導致複雜性，因此在應用這些原則時請運用您的判斷。

11 — 使用有意義的變數和函數名稱
使用有意義的變數和函數名稱對於編寫清晰、可維護且易於理解的程式碼至關重要。

具有描述性
選擇能夠清楚描述變數或函數的用途或值的名稱。

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

使用功能動作字
用描述正在執行的操作的動詞開始函數。

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

避免縮寫
雖然短名稱看起來很方便，但它們可能會導致混亂。避免使用縮寫，除非它們被廣泛理解。

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

使用一致的命名約定
在整個程式碼庫中堅持一致的命名約定，例如變數和函數的駝峰命名法以及類別的帕斯卡命名法。

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

在名稱中指明資料型態或用途
如果變數保存特定類型的資料或用於特定目的，請將其包含在名稱中。

const { height = 180 } = person; // uses default value if height is undefined

使用上下文資訊
考慮使用變數或函數的上下文以使名稱更有意義。

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

保持簡潔但清晰
雖然名稱應該具有描述性，但名稱不應該太長。力求在清晰和簡潔之間取得平衡。

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

使用特定領域的語言
如果您在特定領域（例如金融、醫療保健等）工作，請使用該領域熟悉的術語。

令利率 = 5.5； // 在金融背景下清晰。

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet();         // Output: Hello, Guest!
greet('Chrollo');  // Output: Hello, Chrollo!

必要時重構
如果您發現隨著程式碼的發展，某個名稱不再合適，請毫不猶豫地重構它以使其更加清晰。

function multiply(a, b = 1) {
    return a * b;
}

multiply(5);    // Output: 5
multiply(5, 2);  // Output: 10

有意義的變數和函數名稱顯著增強程式碼的可讀性和可維護性。它們可以幫助其他人（和您自己）一目了然地了解程式碼的目的和功能，從而使協作和調試變得更加容易。始終力求命名約定清晰。

12 — 避免全域變數
避免全域變數是 JavaScript（以及一般程式設計）中維護乾淨、模組化和可維護程式碼的關鍵實踐。全域變數可能會導致意外行為、命名衝突和除錯困難。

使用函數作用域
在函數內宣告變數以限制其範圍並防止它們被全域存取。

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

透過 let 和 const 使用區塊作用域
使用 let 和 const 在區塊內宣告變數（如循環或條件），確保它們在區塊外無法存取。

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

模組化您的程式碼
將您的程式碼組織成模組。使用ES6模組或IIFE（立即呼叫函數表達式）來封裝變數。

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

封裝在物件中：
將相關變數和函數分組到一個物件內，以避免污染全域範圍。

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

明智地使用本地儲存
如果需要持久化數據，請考慮使用本機儲存、會話儲存或indexedDB，而不是全域變數。

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

限制全域變數的使用
如果必須使用全域變量，請將其使用限制為配置常數或應用程式範圍的設定。清楚地命名它們以表明它們的全球性。

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

避免副作用
設計函數時，避免修改全域變數。這使得函數可預測並且更容易測試。

const { height = 180 } = person; // uses default value if height is undefined

明智地使用「這個」
在物件導向程式設計中，使用它來管理實例內的狀態，而不是依賴全域變數。

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

透過避免全域變量，您可以增強程式碼的模組化和可維護性。它有助於防止命名衝突和意外的副作用，使您的程式碼更可預測且更易於使用。遵循這些最佳實踐將帶來更乾淨、更易於管理的程式碼庫。

13 — 使用 Promises 和 Async/Await 實作非同步程式碼
在 JavaScript 中使用 Promises 和 async/await 有助於更有效地管理非同步操作，使您的程式碼更乾淨、更易於閱讀。

理解承諾
Promise 是一個對象，表示非同步操作的最終完成（或失敗）及其結果值。

您可以使用 Promise 建構函式建立 Promise：

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

消費承諾
您可以使用 .then() 來處理 Promise 的結果以獲得成功，並使用 .catch() 來處理錯誤。

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet();         // Output: Hello, Guest!
greet('Chrollo');  // Output: Hello, Chrollo!

連鎖承諾
您可以使用 Promises 連結多個非同步操作。

function multiply(a, b = 1) {
    return a * b;
}

multiply(5);    // Output: 5
multiply(5, 2);  // Output: 10

使用非同步/等待
async/await 提供了一種更同步的方式來編寫非同步程式碼，使其更易於閱讀和維護。

宣告非同步函數：
在函數前使用 async 關鍵字將其定義為非同步函數。

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

呼叫非同步函數
您可以像呼叫常規函數一樣呼叫非同步函數。但是，請注意它總是會返回一個 Promise。

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

處理多個非同步操作
您可以使用 Promise.all 並行運行多個 Promise 並等待它們全部解析。

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

錯誤處理
Promises 和 async/await 都提供了優雅地處理錯誤的方法。

將 .catch() 與 Promise 一起使用：

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

將 try/catch 與 Async/Await 結合使用：

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

使用 Promises 和 async/await 讓在 JavaScript 中處理非同步操作變得更容易管理。它們有助於避免回調地獄並提高程式碼可讀性。擁抱這些模式將帶來更乾淨、更易於維護且防錯的程式碼。

14 — 記錄您的程式碼
記錄程式碼對於保持清晰度、幫助協作和確保長期可維護性至關重要。

使用清晰的評論
解釋“為什麼”，而不是“什麼”：重點解釋為什麼你做了某件事，而不是程式碼做了什麼。程式碼本身應該具有足夠的可讀性來傳達它的作用。

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

註解複雜邏輯：對於複雜或不明顯的程式碼部分，提供詳細的解釋。

const { height = 180 } = person; // uses default value if height is undefined

使用文件字串樣式註解
在 JavaScript 中，尤其是使用 JSDoc 時，您可以使用結構化註解來記錄函數、類別和方法。

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

維護自述文件
對於項目，維護一個 README.md 文件，其中提供概述、安裝說明、使用範例和貢獻指南。

有效的文件使您的程式碼更易於理解和維護，幫助當前和未來的開發人員（包括您自己）高效工作。透過將這些實踐納入您的開發工作流程，您將促進更好的協作並縮短與您的程式碼互動的任何人的學習曲線。

以上是JavaScript 最佳實踐的詳細內容。更多資訊請關注PHP中文網其他相關文章！