prefer-destructuring
要求从数组和/或对象中解构
在 JavaScript ES6 中，添加了一种新语法，用于从数组索引或对象属性创建变量，称为解构。此规则强制使用解构，而不是通过成员表达式访问属性。
规则详情
选项
此规则接受两个参数，两者都是对象。第一个对象参数确定规则适用于哪些类型的解构。
在第一个对象中，有两个属性，array 和 object，可以用于独立地开启或关闭每种类型的解构要求。默认情况下，两者都为 true。
{
"rules": {
"prefer-destructuring": ["error", {
"array": true,
"object": true
}]
}
}
例如，以下配置仅强制对象解构，但不强制数组解构
{
"rules": {
"prefer-destructuring": ["error", {"object": true, "array": false}]
}
}
此规则的错误代码示例
在 Playground 中打开
/* eslint prefer-destructuring: "error" */
// With `array` enabled
const ;
;
// With `object` enabled
const ;
const ;
此规则的正确代码示例
在 Playground 中打开
/* 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。
一个键是 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
}
}]
}
}
当强制执行 VariableDeclarator 中的对象解构时，正确代码示例
在 Playground 中打开
/* eslint prefer-destructuring: ["error", {VariableDeclarator: {object: true}}] */
const {bar: foo} = object;
当强制执行 AssignmentExpression 中的数组解构时，正确代码示例
在 Playground 中打开
/* eslint prefer-destructuring: ["error", {AssignmentExpression: {array: true}}] */
[bar] = array;
enforceForRenamedProperties
该规则具有第二个对象参数，其中包含一个键 enforceForRenamedProperties，它确定 object 解构是否适用于重命名的变量。
{
"rules": {
"prefer-destructuring": ["error",
{
"object": true
},
{
"enforceForRenamedProperties": true
}]
}
}
启用 enforceForRenamedProperties 时，错误代码示例
在 Playground 中打开
/* eslint "prefer-destructuring": ["error", { "object": true }, { "enforceForRenamedProperties": true }] */
const ;
启用 enforceForRenamedProperties 时，正确代码示例
在 Playground 中打开
/* eslint "prefer-destructuring": ["error", { "object": true }, { "enforceForRenamedProperties": true }] */
const { bar: foo } = object;
启用 enforceForRenamedProperties 时，额外的正确代码示例
在 Playground 中打开
/* 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）的问题不会自动修复。
何时不使用
如果您希望能够直接访问数组索引或对象属性，您可以配置规则以符合您的口味，或者完全禁用该规则。
此外，如果您打算直接访问大型数组索引，例如
const foo = array[100];
那么不建议使用此规则的 array 部分，因为解构与此用例不太匹配。
或者对于不可迭代的“类数组”对象
const $ = require('jquery');
const foo = $('body')[0];
const [bar] = $('body'); // fails with a TypeError
版本
此规则在 ESLint v3.13.0 中引入。
延伸阅读
