prefer-destructuring

要求從陣列和/或物件進行解構

🔧

此規則回報的部分問題可以透過 --fix 命令列選項自動修復

在 JavaScript ES6 中，新增了一種新的語法，用於從陣列索引或物件屬性建立變數，稱為解構。此規則強制使用解構，而不是透過成員運算式存取屬性。

規則詳細資訊

選項

此規則接受兩個參數，兩者都是物件。第一個物件參數決定規則套用至哪種解構類型。

在第一個物件中，有兩個屬性，array 和 object，可用於獨立開啟或關閉這些類型解構的要求。預設情況下，兩者都為 true。

{
  "rules": {
    "prefer-destructuring": ["error", {
      "array": true,
      "object": true
    }]
  }
}
1
2
3
4
5
6
7
8

例如，以下設定僅強制物件解構，但不強制陣列解構

{
  "rules": {
    "prefer-destructuring": ["error", {"object": true, "array": false}]
  }
}
1
2
3
4
5

此規則的錯誤程式碼範例

在線上練習場中開啟

/* eslint prefer-destructuring: "error" */

// With `array` enabled
var foo = array[0];
bar.baz = array[0];

// With `object` enabled
var foo = object.foo;
var foo = object['foo'];
1
2
3
4
5
6
7
8
9

此規則的正確程式碼範例

在線上練習場中開啟

/* eslint prefer-destructuring: "error" */

// With `array` enabled
var [ foo ] = array;
var foo = array[someIndex];
[bar.baz] = array;


// With `object` enabled
var { foo } = object;

var foo = object.bar;

let bar;
({ bar } = object);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

或者，您可以針對不同的賦值類型使用個別的設定。第一個參數接受另外兩個鍵，而不是 array 和 object。

一個鍵是 VariableDeclarator，另一個是 AssignmentExpression，可用於獨立控制這些類型解構的要求。每個屬性都是一個物件，其中包含兩個屬性 array 和 object，可用於獨立控制變數宣告和賦值運算式的 array 和 object 解構要求。預設情況下，array 和 object 對於 VariableDeclarator 和 AssignmentExpression 都設為 true。

{
  "rules": {
    "prefer-destructuring": ["error", {
      "VariableDeclarator": {
        "array": true,
        "object": true
      },
      "AssignmentExpression": {
        "array": true,
        "object": true
      }
    }]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

當強制 VariableDeclarator 中的物件解構時的正確程式碼範例

在線上練習場中開啟

/* eslint prefer-destructuring: ["error", {VariableDeclarator: {object: true}}] */
var {bar: foo} = object;
1
2

當強制 AssignmentExpression 中的陣列解構時的正確程式碼範例

在線上練習場中開啟

/* eslint prefer-destructuring: ["error", {AssignmentExpression: {array: true}}] */
[bar] = array;
1
2

enforceForRenamedProperties

此規則具有第二個物件參數，其中包含單一鍵 enforceForRenamedProperties，它決定 object 解構是否套用至重新命名的變數。

{
  "rules": {
    "prefer-destructuring": ["error",
    {
      "object": true
    },
    {
      "enforceForRenamedProperties": true
    }]
  }
}
1
2
3
4
5
6
7
8
9
10
11

啟用 enforceForRenamedProperties 時的錯誤程式碼範例

在線上練習場中開啟

/* eslint "prefer-destructuring": ["error", { "object": true }, { "enforceForRenamedProperties": true }] */
var foo = object.bar;
1
2

啟用 enforceForRenamedProperties 時的正確程式碼範例

在線上練習場中開啟

/* eslint "prefer-destructuring": ["error", { "object": true }, { "enforceForRenamedProperties": true }] */
var { bar: foo } = object;
1
2

啟用 enforceForRenamedProperties 時的其他正確程式碼範例

在線上練習場中開啟

/* eslint "prefer-destructuring": ["error", { "object": true }, { "enforceForRenamedProperties": true }] */
class C {
    #x;
    foo() {
        const bar = this.#x; // private identifiers are not allowed in destructuring
    }
}
1
2
3
4
5
6
7

注意：無法在執行時確定變數將參考物件還是陣列。因此，此規則會透過檢查存取的鍵是否為整數來猜測賦值類型。這可能會導致以下可能令人困惑的情況

存取鍵為整數的物件屬性將歸類於 array 解構。
透過計算索引存取陣列元素將歸類於 object 解構。

命令列上的 --fix 選項僅修復變數宣告中回報的問題，並且其中僅修復歸類於 object 解構的問題。此外，宣告的變數名稱必須與初始化器中用於非計算成員存取的名稱相同。例如，此規則可以自動修復 var foo = object.foo。涉及計算成員存取 (例如，var foo = object[foo]) 或重新命名屬性 (例如，var foo = object.bar) 的問題不會自動修復。

何時不應使用

如果您想要直接存取陣列索引或物件屬性，您可以將規則設定為符合您的喜好，或者完全停用該規則。

此外，如果您打算直接存取較大的陣列索引，例如

var foo = array[100];
1

那麼不建議使用此規則的 array 部分，因為解構並不非常適合這種使用案例。

或者對於不可迭代的「類陣列」物件

var $ = require('jquery');
var foo = $('body')[0];
var [bar] = $('body'); // fails with a TypeError
1
2
3

版本

此規則是在 ESLint v3.13.0 中引入的。

延伸閱讀

解構賦值 - JavaScript | MDN
developer.mozilla.org

ECMAScript 6 中的解構和參數處理
2ality.com

資源

編輯此頁面