簡介

本章節討論使用ES6編碼風格到程式碼中需要注意的點。通過記住這些關鍵點，可以讓我們寫出更優美的、可讀性更強的JavaScriptE6風格的程式碼。

1、塊級作用域

1.1、let取代var

ES6 提出了兩個新的宣告變數的命令: let 和const。其中，let可以完全取代var，因為兩者語義相同，而且let沒有副作用。

var命令存在變數提升的特性，而let沒有這個命令。

所謂變數提升，即指變數可以先使用，再宣告，顯然，這種編碼規範非常不適合閱讀。

1.2、全域性常量和執行緒安全

在let和const之間，優先使用const。

let應出現在單執行緒模組程式碼內，而const則非常適合多執行緒。

    // bad
    var a = 1, b = 2, c = 3;

    // good
    const a = 1;
    const b = 2;
    const c = 3;

    // best
    const[a, b, c] = [1, 2, 3];

2、字串

靜態字串一律使用單引號或者反引號，不推薦使用雙引號。

動態字串（字串模板）使用反引號。

    // bad
    const a = "zhaoyi";
    const b = a + ", hello.";

    // little good
    const c = `zhaoyi`;

    // very good
    const a = 'zhaoyi';
    const b = `zhaoyi,${a}, I say your name twice`;
 

3、解構賦值

1、使用陣列成員對變數進行賦值時，優先使用解構賦值。

    const arr = ['I', 'love', 'you'];

    // bad
    const one = arr[0];
    const two = arr[1];
    const three = arr[2];

    // good
    const [first, second, third] = arr;

    // test
    console.log(first, second, third);// I love you

2、函式的引數如果是物件的成員，優先使用解構賦值。

    // bad
    function getUserInfo(user){
        const name = user.name;
        const age = user.age;
    }

    // good
    function getUserInfo2(user){
        const {name, age} = user;
        console.log(name, age); // 
    }

    // test
    getUserInfo2({name: 'zhaoyi', age: 20}); // zhaoyi 20
 

3、如果函式返回多個值，優先使用物件的結構賦值，而不是陣列的結構賦值。這樣便於以後新增返回值，以及更改返回值的順序。

    // bad
    function getInfo(input){
        return [left, right];
    }

    // good
    function getInfo2(input){
        return {left, right};
    }

    // 此處使用物件的解構賦值方式接收返回結果
    const {left, right} = getInfo2('test');

4、物件

1、單行定義的物件，最後一個成員不以逗號結尾。多行定義的物件，最後一個成員以逗號結尾。

    // bad
    const a1 = {k1: v1, k2: v2, k3: v3,};

    // good 
    const a2 = {k1: v1, k2: v2, k3: v3};

    // bad
    const b1 = {
        k1: v1,
        k2: v2
    };

    // good
    const b2 = {
        k1: v1,
        k2: v2,
    };

2、物件儘量靜態化，一旦定義，就不得隨意新增新的屬性。如果新增屬性不可避免，要使用assign方法。

    // bad
    const a = {};
    a.attr = 3;

    // if reshape anavoidable（若無可避免）
    const b = {};
    Object.assign(b, {atrr: 3});

    // good
    const c = {attr: null};
    c.attr = 3;

    // test
    console.log(a); //{attr: 3}
    console.log(b); //{attr: 3}
    console.log(c); //{attr: 3}

3、如果物件的屬性名是動態的（所謂動態是指，需要通過計算得到），可以在建立物件的時候使用屬性表示式定義。（此種情況在開發時，並不多見。）

5、陣列

使用擴充套件運算子（...）複製陣列。

    // bad
    function copyArr1(arr){
        const itemCopy = [];
        for (let index = 0; index < arr.length; index++) {
            itemCopy[index] = arr[index];
        }
        return itemCopy;
    }

    // good
    function copyArr2(arr){
        return [...arr];
    }

    // test
    const arr = ['z', 'y', 'z'];
    console.log(copyArr1(arr)); // ["z", "y", "z"]
    console.log(copyArr2(arr)); // ["z", "y", "z"]

使用Array.from 方法將類似陣列的物件轉為陣列。

    const obj = { "0": "a", "1": "b", length: 2};
    const arr = Array.from(obj);
    
    // test
    console.log(arr); // ["a", "b"]

6、函式

1、立即執行函式可以寫成箭頭函式的形式。

    (() => {
        console.log('this is a good night.');
    })();

2、在需要使用函式表示式的場合，儘量用箭頭函式代替。因為這樣可以更簡潔，而且綁定了this。

    // bad
    const sayHello = ['a', 'b', 'c'].map(function (w){
        return 'Hello, ' + w;
    })
    
    // good 
    const sayHello2 = ['a', 'b', 'c'].map(w => {
        return 'Hello, ' + w;
    });

    // test
    console.log(sayHello2); // ["Hello, a", "Hello, b", "Hello, c"]  

3、箭頭函式取代Function.prototype.bind，不應再用self/_this/that繫結this.

    // bad
    const self = this;
    const boundMethod = function(...params){
        return method.apply(self, params);
    }

    // acceptable
    const boundMethod2 = method.bind(this);

    // best
    const boundMehod3 = (...params) => method.apply(this, params);

4、單行簡單、無需複用的函式，建議採用箭頭函式。如果函式體較為複雜，行數較多，還是應採用傳統的函式寫法。

5、所有配置項都應該集中在一個物件，放在到最後一個引數，布林值不可以直接作為引數。

// bad
function divide(a, b, option = false){

}

// good
function divide(a, b, {option = false} = {}){

}

6、不要在函式體內使用arguments變數，使用rest運算子(...)代替。因為rest運算子可以顯示宣告我們想要獲取的引數，而且arguments是一個類似陣列的物件，而rest元素安撫可以提供一個真正的陣列。

    // bad
    function f1(){
        const args = Array.prototype.slice.call(arguments);
        return args.join('-');
    }

    // good
    function f2(...args){
        return args.join('-');
    }

    // test
    console.log(f1(1, 2, 3)); // 1-2-3
    console.log(f2(1, 2, 3)); // 1-2-3

擴充套件運算子用三個點號表示，功能是把陣列或類陣列物件展開成一系列用逗號隔開的值；而rest運算子也是三個點號，不過其功能與擴充套件運算子恰好相反，把逗號隔開的值序列組合成一個數組。rest是剩餘的意思。

7、使用預設值語法設定函式引數的預設值。

    // bad
    function handleThings(opts){
        opts = opts || {};
        // ...
    }

    // good
    function handleThings2(opts = {}){
        // ...
    }

7、Map結構

Map和Object給人的感覺是同一個資料型別，但是在實際語義還需要更為準確的區分，原則如下：

• 模擬實體物件時，使用Object；
• 只需要k-v鍵值對資料結構時，使用Map；

Map擁有內建的遍歷機制（實現了Iterator結構）

    // Map擁有許多初始化方式，這裡使用陣列成員為兩個長度的陣列進行初始化（第一個元素為K，第二個元素為V）
    let map = new Map([['k1', 'I'], ['k2', 'love'], ['k3', 'your']]);

    // 遍歷K
    for(const key of map.keys()){
        console.log(key);
        // k1
        // k2
        // k3
    }

    // 遍歷V
    for (const value of map.values()) {
        console.log(value);
        // I
        // love
        // you
    }

    // 遍歷K-V
    for (const item of map.entries()) {
        console.log(item);
        // ['k1', 'I']
        // ['k2', 'love']
        // ['k3', 'your']
    }

8、Class

1、總是用Class取代需要prototype的操作。因為Class的寫法更簡潔，更易於理解。接觸過Java、C#比較多的朋友想必更喜歡這樣的類語法方式。

    // bad
    function Queue1(contents = []){
        this._queue = [...contents];
    }
    Queue1.prototype.pop = function(){
        const value = this._queue[0];
        this._queue.splice(0, 1);
        return value;
    }

    // good
    class Queue {
        constructor(contents = []){
            // 這裡為什麼不用this._queue = contents;呢？
            // 讀過effective java的朋友想必知道一個規則：
            // 那就是在設計建構函式時，若傳入的引數中有可變型別（物件、陣列），
            // 則建構函式內部接收此引數時應使用這個物件的拷貝。
            // 這樣可以避免外部引數物件的更改影響到類本身的例項。
            // 因此，此處的contents需要拷貝一個複製在進行賦值。
            this._queue = [...contents];
        }
        pop() {
            const value = this._queue[0];
            this._queue.splice(0, 1);
            return value;
        }
    }

    // test
    q = new Queue([1, 2, 3]);

    console.log(q.pop()); // 1
    console.log(q.pop()); // 2
    console.log(q.pop()); // 3
    console.log(q.pop()); // undefined

2、使用extends實現繼承，因為這樣可以更簡單，不存在破壞instanceof運算的危險。

    // Queue為上一個例子的類
    class PeekQueue extends Queue{
        // ...
    }

9、模組

1、Module語法是js模組的標準寫法，要堅持使用這種寫法。使用import取代require。

    // bad
    const ma = require('moduleA');
    const f1 = ma.f1;
    const f2 = ma.f2;

    // good
    import {f1, f2} from 'moduleA';

2、使用export取代module.export

    // bad
    module.exports = SomeObj;

    // good
    export default SomeObj; 

3、如果模組只有一個輸出值，就使用 export default； 若有鍍鉻，就不要使用 export default， 不要同時使用 export default 和 普通的 export，雖然規則上允許此種編寫程式碼的方式。

4、不要在模組中使用萬用字元，因為這樣可以確保模組中有一個預設輸出：export default。

    // bad
    import * as myObject './someModule';

    // good
    import myObject from './someModule';

5、如果模組預設輸出一個函式，函式的首字母應該小寫。

 function someFunction(){
     // ...
 }
 export default someFunction;

6、 如果模組預設輸出一個物件，物件名的首字母應該大寫。

const someObj = {
    // ...
}
export default SomeObj;

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

10、ESLint

前面說了那麼多規則，其實只是規則範本的冰山一角，真正想要寫出格式優美、符合主流廠商規範的程式碼，僅僅靠我們的自覺是不夠的。

有沒有什麼類似軟體編譯工具檢查程式碼正確性來檢查程式碼編寫規範的軟體呢，答案是有的。

ESLint就是這樣的一款檢查工具。可以用於保證寫出語法正確、風格統一的程式碼。

以下是安裝ESLink的教程（確保您的環境已經安裝了npm），當然，如果您使用一些腳手架工具（例如@vue-cli）等方式生成的專案，那麼這樣的專案都是提供了可選的eslint外掛的。當前版本為: v6.6.0。該版本的eslint提供了更為簡單的配置方式，可以參考https://eslint.bootcss.com/docs/user-guide/getting-started/進行配置。以下是一個粗略的配置步驟

1、安裝所需外掛

$ npm install eslint -g

2、生成package.json檔案

$ npm init

該方法會在當前目錄生成package.json檔案，該檔案類似於環境的說明檔案。

3、生成eslint配置檔案

$ eslint --init

該命令會詢問你使用哪種型別的配置（通過上下箭頭選取）

• 推薦選用json或者JavaScript型別，我這裡使用的是JavaScript型別的配置檔案
• style guide選用airbnb。

其他的選項根據你的需要進行選取即可。完成選擇之後，會自動下載所需要的依賴包。

生成的配置檔案內容大致如下：

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    'airbnb-base',
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  rules: {
  },
};

我們在該配置檔案中可以修改驗證規則，具體的內容同樣參考上面給出的連結。

4、在當前目錄下，建立一個js檔案

// index.js
var unused = '灰與幻想的格林姆迦爾';

function hello(){
    var message = "Hello, zhaoyi!";
    alert(message);
}
  
hello(); 

5、通過eslint驗證程式碼編寫正確性

$ eslint index.js

 1:12  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  2:1   error    Unexpected var, use let or const instead         no-var
  2:5   error    'unused' is assigned a value but never used      no-unused-vars
  2:27  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  3:1   error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  4:17  error    Missing space before opening brace               space-before-blocks
  4:18  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  5:1   error    Expected indentation of 2 spaces but found 4     indent
  5:5   error    Unexpected var, use let or const instead         no-var
  5:19  error    Strings must use singlequote                     quotes
  5:36  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  6:1   error    Expected indentation of 2 spaces but found 4     indent
  6:5   warning  Unexpected alert                                 no-alert
  6:20  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  7:2   error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  8:1   error    Trailing spaces not allowed                      no-trailing-spaces
  8:3   error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  9:9   error    Trailing spaces not allowed                      no-trailing-spaces
  9:10  error    Newline required at end of file but not found    eol-last

其中，有一種錯誤其實是因為git檔案格式轉化的問題：

... linebreak-style

我們可以在配置檔案中移除該檢測:在rules下新增'linebreak-style': [0, 'error', 'windows'].

rules: {
    'linebreak-style': [0, 'error', 'windows']
  }

繼續執行檢測命令，可以看到如下的輸出：

  2:1   error    Unexpected var, use let or const instead      no-var
  2:5   error    'unused' is assigned a value but never used   no-unused-vars
  5:1   error    Expected indentation of 2 spaces but found 4  indent
  5:5   error    Unexpected var, use let or const instead      no-var
  5:19  error    Strings must use singlequote                  quotes
  6:1   error    Expected indentation of 2 spaces but found 4  indent
  6:5   warning  Unexpected alert                              no-alert
  8:1   error    Trailing spaces not allowed                   no-trailing-spaces
  9:9   error    Trailing spaces not allowed                   no-trailing-spaces

可以看到，我們許多不規範的操作都會警告了。比如縮排不要用四空格（其實是我們的編譯器自帶，而且我們習慣了的），不要加多餘的空格，以及刪掉沒有使用過的宣告變數，不推薦使用var型別等等。