prefer-destructuring
需要从数组和/或对象中解构
此规则报告的一些问题可通过 --fix 命令行选项自动修复
在 JavaScript ES6 中，添加了一种用于从数组索引或对象属性创建变量的新语法，称为 解构。此规则强制使用解构而不是通过成员表达式访问属性。
¥With JavaScript ES6, a new syntax was added for creating variables from an array index or object property, called destructuring. This rule enforces usage of destructuring instead of accessing a property through a member expression.
规则详情
¥Rule Details
选项
¥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，可用于独立打开或关闭每个类型的解构要求。默认情况下，两者都是真的。
¥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
var foo = array[0];
bar.baz = array[0];
// With `object` enabled
var foo = object.foo;
var foo = object['foo'];
此规则的正确代码示例：
¥Examples of correct code for this rule:
/* 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);
或者，你可以为不同的分配类型使用单独的配置。第一个参数接受另外两个键，而不是 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 的解构要求。默认情况下，对于 VariableDeclarator 和 AssignmentExpression，array 和 object 都设置为 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}}] */
var {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 }] */
var foo = object.bar;
启用 enforceForRenamedProperties 时的正确代码示例：
¥Examples of correct code when enforceForRenamedProperties is enabled:
/* eslint "prefer-destructuring": ["error", { "object": true }, { "enforceForRenamedProperties": true }] */
var { 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
}
}
注意：无法确定变量在运行时是引用对象还是数组。因此，此规则通过检查正在访问的键是否为整数来猜测分配类型。这可能会导致以下可能令人困惑的情况：
¥Note: It is not possible to determine if a variable will be referring to an object or an array at runtime. This rule therefore guesses the assignment type by checking whether the key being accessed is an integer. This can lead to the following possibly confusing situations:
-
访问键是整数的对象属性将属于
array解构类别。¥Accessing an object property whose key is an integer will fall under the category
arraydestructuring. -
通过计算索引访问数组元素将属于
object解构类别。¥Accessing an array element through a computed index will fall under the category
objectdestructuring.
命令行中的 --fix 选项仅修复变量声明中报告的问题，其中仅修复了属于 object 解构类别的问题。此外，声明变量的名称必须与初始化程序中用于非计算成员访问的名称相同。例如，var foo = object.foo 可以通过此规则自动修复。涉及计算成员访问（例如，var foo = object[foo]）或重命名属性（例如，var 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, var foo = object.foo can be automatically fixed by this rule. Problems that involve computed member access (e.g., var foo = object[foo]) or renamed properties (e.g., var 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:
var foo = array[100];
那么这个规则的 array 部分就不推荐了，因为解构与这个用例不太匹配。
¥Then the array part of this rule is not recommended, as destructuring does not match this use case very well.
或者对于不可迭代的 ‘array-like’ 对象：
¥Or for non-iterable ‘array-like’ objects:
var $ = require('jquery');
var foo = $('body')[0];
var [bar] = $('body'); // fails with a TypeError
版本
此规则是在 ESLint v3.13.0 中引入。