prefer-destructuring
需要从数组和/或对象中解构
在 JavaScript ES6 中，引入了一种新的语法，用于从数组索引或对象属性创建变量，称为解构。 该规则强制使用解构，而不是通过成员表达式访问属性。
规则详情
🌐 Rule Details
此规则强制要求在变量声明和赋值表达式中使用 ES6 解构赋值从数组和对象中提取值，而不是直接访问属性或索引。
🌐 This rule enforces the use of ES6 destructuring to extract values from arrays and objects in variable declarations and assignment expressions, instead of direct property or index access.
选项
🌐 Options
这个规则接受两个参数，这两个参数都是对象。第一个对象参数决定规则适用于哪种类型的解构。
🌐 This rule takes two arguments, both of which are objects. The first object parameter determines what types of destructuring the rule applies to.
在第一个对象中，有两个属性，array 和 object，可以用来独立地开启或关闭对每种类型的解构要求。默认情况下，两个属性都是 true。
🌐 In the first object, there are two properties, array and object, that can be used to turn on or off the destructuring requirement for each of those types independently. By default, both are true.
{
"rules": {
"prefer-destructuring": ["error", {
"array": true,
"object": true
}]
}
}
例如，以下配置仅强制执行对象解构，但不强制执行数组解构：
🌐 For example, the following configuration enforces only object destructuring, but not array destructuring:
{
"rules": {
"prefer-destructuring": ["error", {"object": true, "array": false}]
}
}
此规则的错误代码示例：
🌐 Examples of incorrect code for this rule:
/* eslint prefer-destructuring: "error" */
// With `array` enabled
const foo = array[0];
bar.baz = array[0];
// With `object` enabled
const qux = object.qux;
const quux = object['quux'];
符合此规则的正确代码示例：
🌐 Examples of correct code for this rule:
/* eslint prefer-destructuring: "error" */
// With `array` enabled
const [ foo ] = array;
const arr = array[someIndex];
[bar.baz] = array;
// With `object` enabled
const { baz } = object;
const obj = object.bar;
let bar;
({ bar } = object);
或者，你可以为不同的作业类型使用单独的配置。第一个参数接受另外两个键，而不是 array 和 object。
🌐 Alternatively, you can use separate configurations for different assignment types. The first argument accepts two other keys instead of array and object.
一个键是 VariableDeclarator，另一个是 AssignmentExpression，它们可以用来独立控制每种类型的解构要求。每个属性都是一个包含两个属性 array 和 object 的对象，它们可以用来独立控制 array 和 object 在变量声明和赋值表达式中的解构要求。默认情况下，array 和 object 对 VariableDeclarator 和 AssignmentExpression 都设置为 true。
🌐 One key is VariableDeclarator and the other is AssignmentExpression, which can be used to control the destructuring requirement for each of those types independently. Each property is an object containing two properties, array and object, which can be used to control the destructuring requirement for each of array and object independently for variable declarations and assignment expressions. By default, array and object are set to true for both VariableDeclarator and AssignmentExpression.
{
"rules": {
"prefer-destructuring": ["error", {
"VariableDeclarator": {
"array": true,
"object": true
},
"AssignmentExpression": {
"array": true,
"object": true
}
}]
}
}
在强制使用 VariableDeclarator 对象解构时的正确代码示例：
🌐 Examples of correct code when object destructuring in VariableDeclarator is enforced:
/* eslint prefer-destructuring: ["error", {VariableDeclarator: {object: true}}] */
const {bar: foo} = object;
在强制使用 AssignmentExpression 的数组解构时，正确代码的示例：
🌐 Examples of correct code when array destructuring in AssignmentExpression is enforced:
/* eslint prefer-destructuring: ["error", {AssignmentExpression: {array: true}}] */
[bar] = array;
enforceForRenamedProperties
该规则有一个第二个对象参数，包含一个键 enforceForRenamedProperties，它决定 object 解构是否适用于重命名的变量。
🌐 The rule has a second object argument with a single key, enforceForRenamedProperties, which determines whether the object destructuring applies to renamed variables.
{
"rules": {
"prefer-destructuring": ["error",
{
"object": true
},
{
"enforceForRenamedProperties": true
}]
}
}
当启用 enforceForRenamedProperties 时的错误代码示例：
🌐 Examples of incorrect code when enforceForRenamedProperties is enabled:
/* eslint "prefer-destructuring": ["error", { "object": true }, { "enforceForRenamedProperties": true }] */
const foo = object.bar;
当启用 enforceForRenamedProperties 时的正确代码示例：
🌐 Examples of correct code when enforceForRenamedProperties is enabled:
/* eslint "prefer-destructuring": ["error", { "object": true }, { "enforceForRenamedProperties": true }] */
const { bar: foo } = object;
启用 enforceForRenamedProperties 时的额外正确代码示例：
🌐 Examples of additional correct code when enforceForRenamedProperties is enabled:
/* eslint "prefer-destructuring": ["error", { "object": true }, { "enforceForRenamedProperties": true }] */
class C {
#x;
foo() {
const bar = this.#x; // private identifiers are not allowed in destructuring
}
}
注意：在运行时无法确定一个变量是引用对象还是数组。因此，此规则通过检查访问的键是否为整数来猜测赋值类型。这可能导致以下可能令人困惑的情况：
- 访问键为整数的对象属性将属于
array解构的范畴。 - 通过计算索引访问数组元素将属于
object解构的范畴。
命令行上的 --fix 选项仅修复变量声明中报告的问题，其中仅包括属于 object 解构类别的问题。此外，声明的变量名必须与初始化器中用于非计算成员访问的名称相同。例如，const foo = object.foo 可以通过此规则自动修复。涉及计算成员访问（例如 const foo = object[foo]）或重命名属性（例如 const foo = object.bar）的问题不会自动修复。
🌐 The --fix option on the command line fixes only problems reported in variable declarations, and among them only those that fall under the category object destructuring. Furthermore, the name of the declared variable has to be the same as the name used for non-computed member access in the initializer. For example, const foo = object.foo can be automatically fixed by this rule. Problems that involve computed member access (e.g., const foo = object[foo]) or renamed properties (e.g., const foo = object.bar) are not automatically fixed.
何时不使用
🌐 When Not To Use It
如果你希望能够直接访问数组索引或对象属性，你可以根据自己的喜好配置规则或完全禁用规则。
🌐 If you want to be able to access array indices or object properties directly, you can either configure the rule to your tastes or disable the rule entirely.
此外，如果你打算直接访问大型数组索引，例如：
🌐 Additionally, if you intend to access large array indices directly, like:
const foo = array[100];
那么不推荐使用该规则的 array 部分，因为解构赋值并不太适合这种用例。
🌐 Then the array part of this rule is not recommended, as destructuring does not match this use case very well.
或者用于非可迭代的“类数组”对象：
🌐 Or for non-iterable ‘array-like’ objects:
const $ = require('jquery');
const foo = $('body')[0];
const [bar] = $('body'); // fails with a TypeError
版本
此规则是在 ESLint v3.13.0 中引入。