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的解构要求。默认情况下，VariableDeclarator和AssignmentExpression的array和object均设置为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

资源

编辑此页面