var a = 1; // badlet a = 1; // good
// const and let only exist in the blocks they are defined in.{  let a = 1;  const b = 1;  var c = 1;}console.log(a); // ReferenceErrorconsole.log(b); // ReferenceErrorconsole.log(c); // Prints 1

2、盡可能使用隱式構(gòu)造函數(shù)

如果你正在使用 JavaScript，你應(yīng)該知道有多種方法可以完成相同的任務(wù)。例如，你可以使用三元組或 if-else 塊來創(chuàng)建條件邏輯。這種多樣化的選擇有時會導(dǎo)致你編寫的代碼不一致。

要創(chuàng)建空對象，你可以使用 Object 構(gòu)造函數(shù)或隱式 {}。對于字符串、函數(shù)、數(shù)組、數(shù)字等，情況也是如此。為了在閱讀中保持一致性和易用性，請盡可能使用隱式構(gòu)造函數(shù)。

// bad
const a = new Object(); const b = new String("str");const c = new Function('a', 'b', 'return a + b');
// good
const a = {};const b = "str";const c = (a,b) => a + b;

3、字符串優(yōu)先使用單引號

為了保持一致性，在所有代碼庫中使用單引號 ' 代替雙引號 " 和模板文字（反引號）`。為了簡化這個過程，你可以利用 Prettier 立即格式化。

// badconst name = "Edmon Dantès";
// bad - template literals should contain interpolation or newlinesconst name = `Edmon Dantès`;
// goodconst name = 'Edmon Dantès';

4、盡可能使用字符串插值

在 JavaScript 中，正如我所提到的，有很多方法可以獲得相同的結(jié)果，但其中一些方法比其他方法更復(fù)雜。要連接字符串，你可以使用 + 運(yùn)算符、數(shù)組上的 join 方法或字符串上的 concat 方法。然而，使用模板文字是完成這項任務(wù)最復(fù)雜和最簡單的方法。

// badconst str = 'How are you, ' + name + '?';
// badconst str = ['How are you, ', name, '?'].join();
// goodconst str = `How are you, ${name}?`;

5、選擇命名函數(shù)表達(dá)式

通常，每個人都有自己喜歡的方法來創(chuàng)建函數(shù)，因為 JavaScript 在方法方面非?？犊?。有箭頭函數(shù)、匿名函數(shù)表達(dá)式、函數(shù)聲明等。但是要編寫一致且可讀的 JavaScript 代碼，你應(yīng)該到處使用一種類型。

使用命名函數(shù)表達(dá)式而不是聲明具有一些關(guān)鍵優(yōu)勢。函數(shù)表達(dá)式?jīng)]有被提升，這意味著使用一個函數(shù)，你需要先在頂部或另一個模塊中定義它。

此外，名稱可以很長且具有描述性，這可以防止使用單獨的注釋。因此，代碼可以更具可讀性。

// badfunction foo() { ... }
// badconst foo = function () { ... };
// good// lexical name distinguished from the variable-referenced invocation(s)const short = function longUniqueMoreDescriptiveLexicalFoo() { ... };

6、在回調(diào)中優(yōu)先使用箭頭函數(shù)

有些方法如 map 或 filter 將匿名函數(shù)作為參數(shù)。在這些情況下，你有很多選擇，但使用箭頭函數(shù)是最方便和優(yōu)雅的方式。

因為，它在 this 的上下文中創(chuàng)建了箭頭函數(shù)的一個版本，這通常是你想要的，并且是一種更簡潔的語法。

// bad[1, 2, 3].forEach(function (x) {  const y = x ** 2;  return x + y;});
// good[1, 2, 3].forEach((x) => {  const y = x ** 2;  return x + y;});

7、使用嚴(yán)格等于進(jìn)行相等比較

有兩種類型的相等運(yùn)算符：松散運(yùn)算符和嚴(yán)格運(yùn)算符。松散的是 == 和 != ，它們在沒有關(guān)心類型的情況下進(jìn)行比較。例如，根據(jù)松散比較，2 和 '2' 是相等的。但是，如果你使用嚴(yán)格的 === 和 !==，那么它也會考慮類型，這通常是預(yù)期的結(jié)果。

// badconsole.log(2 == '2') // true
// goodconsole.log(2 === '2') // false

8、不要嵌套三元組

三元運(yùn)算符允許您創(chuàng)建內(nèi)聯(lián)條件語句。在 if-else 語句上使用它，你確實可以節(jié)省許多代碼行。

但是，正如定義的那樣，它必須是內(nèi)聯(lián)的和簡短的。因為嵌套三元組會嚴(yán)重?fù)p害代碼的可讀性。

// badconst foo = maybe1 > maybe2  ? "bar"  : value1 > value2   ? "baz"   : null;
// split into 2 separated ternary expressionsconst maybeNull = value1 > value2 ? 'baz' : null;
// goodconst foo = maybe1 > maybe2 ? 'bar' : maybeNull;

9、以空格開始評論

為了提高可讀性，請確保在注釋的開頭放置一個空格。

// bad//is current tablet isActive = true;
// good// is current tablet isActive = true;

10、選擇正確的套管樣式

正如我在介紹中提到的，如果代碼一致，大小寫樣式是使代碼看起來不錯的最重要的概念之一。在 JavaScript 中，有一些大小寫樣式的約定。

命名對象、函數(shù)、變量和實例時使用駝峰命名法。

僅在命名構(gòu)造函數(shù)或類時使用 PascalCase。

在命名不可重新分配的變量和枚舉時使用 UPPERCASE_VARIABLES。

根本不要使用 snake_case 或 kebab-case。

// badconst StudentCount = 15;class particle { ... }function get_name() { ... }let apiKey = 'cX25zanxsPcdjsbxX985ddXM3';
// goodconst studentCount = 15;class Particle { ... }   function getName() { ... }const API_KEY = 'cX25zanxsPcdjsbxX985ddXM3';

編寫計算機(jī)可以理解的代碼一點也不難。然而，編寫人類容易理解的代碼是一項具有挑戰(zhàn)性的工作。這就是為什么有一些關(guān)于編碼的基本規(guī)則，真的會造成好代碼和壞代碼之間的區(qū)別。

在本文中，我嘗試使用 AirBNB 的 JavaScript 樣式指南，分享我在編寫好的 JavaScript 代碼時不可或缺的規(guī)則。這些是我的首選，但如果你看看這個綜合的風(fēng)格指南，我相信你會發(fā)現(xiàn)一些你還不知道的東西。

謝謝各位閱讀。如果你喜歡它，請給我點個贊，如果你有一些對你很重要的風(fēng)格規(guī)則，請留下你的評論。

祝編程愉快！

學(xué)習(xí)更多技能

請點擊下方公眾號