# prefer-destructuring

需要从数组和/或对象中解构

一些该规则报告的问题可以通过 --fix 命令行选项自动修复

在 JavaScript ES6 中，添加了一种用于从数组索引或对象属性创建变量的新语法，称为 解构。此规则强制使用解构而不是通过成员表达式访问属性。

# 规则详情

# 选项

此规则采用两组配置对象。第一个对象参数确定规则适用于哪些类型的解构。

array 和 object 这两个属性可用于单独打开或关闭每种类型的解构要求。默认情况下，两者都是真的。

或者，您可以为不同的分配类型使用单独的配置。它接受 2 个其他键而不是 array 和 object。

一个键是 VariableDeclarator，另一个是 AssignmentExpression，可用于独立控制每种类型的解构要求。每个属性都接受一个对象，该对象接受两个属性 array 和 object，可用于分别控制变量声明和赋值表达式的 array 和 object 的解构要求。默认情况下，VariableDeclarator 和 AssignmentExpression 的 array 和 object 都设置为 true。

该规则有一个带有单个键的第二个对象 enforceForRenamedProperties，它确定 object 解构是否适用于重命名的变量。

注意：无法确定变量在运行时是引用对象还是数组。因此，此规则通过检查正在访问的键是否为整数来猜测分配类型。这可能会导致以下可能令人困惑的情况：

访问键是整数的对象属性将属于 array 解构类别。
通过计算索引访问数组元素将属于 object 解构类别。

命令行中的 --fix 选项仅修复变量声明中报告的问题，其中仅修复了属于 object 解构类别的问题。此外，声明变量的名称必须与初始化程序中用于非计算成员访问的名称相同。例如，var foo = object.foo 可以通过此规则自动修复。涉及计算成员访问（例如，var foo = object[foo]）或重命名属性（例如，var foo = object.bar）的问题不会自动修复。

此规则的错误代码示例：

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

// With `object` enabled
var foo = object.foo;
var foo = object['foo'];

此规则的正确代码示例：

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

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

var foo = object.bar;

let foo;
({ foo } = object);

启用 enforceForRenamedProperties 时的错误代码示例：

var foo = object.bar;

启用 enforceForRenamedProperties 时的正确代码示例：

var { bar: foo } = object;

启用 enforceForRenamedProperties 时的附加正确代码示例：

class C {
    #x;
    foo() {
        const bar = this.#x; // private identifiers are not allowed in destructuring
    }
}

一个示例配置，填充了默认值 array 和 object，如下所示：

{
  "rules": {
    "prefer-destructuring": ["error", {
      "array": true,
      "object": true
    }, {
      "enforceForRenamedProperties": false
    }]
  }
}

array 和 object 这两个属性可用于独立打开或关闭每种类型的解构要求。默认情况下，两者都是真的。

例如，以下配置仅强制执行对象解构，但不强制执行数组解构：

{
  "rules": {
    "prefer-destructuring": ["error", {"object": true, "array": false}]
  }
}

一个示例配置，填充了默认值 VariableDeclarator 和 AssignmentExpression，如下所示：

{
  "rules": {
    "prefer-destructuring": ["error", {
      "VariableDeclarator": {
        "array": false,
        "object": true
      },
      "AssignmentExpression": {
        "array": true,
        "object": true
      }
    }, {
      "enforceForRenamedProperties": false
    }]
  }
}

VariableDeclarator 和 AssignmentExpression 这两个属性，可用于打开或关闭 array 和 object 的解构要求。默认情况下，所有值都是 true。

例如，以下配置在变量声明中强制对象解构，并在赋值表达式中强制数组解构。

{
  "rules": {
    "prefer-destructuring": ["error", {
      "VariableDeclarator": {
        "array": false,
        "object": true
      },
      "AssignmentExpression": {
        "array": true,
        "object": false
      }
    }, {
      "enforceForRenamedProperties": false
    }]
  }
}

在 VariableDeclarator 中强制对象解构时的正确代码示例：

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

在 AssignmentExpression 中强制执行数组解构时的正确代码示例：

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

# 何时不使用

如果您希望能够直接访问数组索引或对象属性，您可以根据自己的喜好配置规则或完全禁用规则。

此外，如果您打算直接访问大型数组索引，例如：

var foo = array[100];

那么这个规则的 array 部分就不推荐了，因为解构与这个用例不太匹配。

或者对于不可迭代的 'array-like' 对象：

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

← prefer-const prefer-exponentiation-operator →