prefer-destructuring
要求从数组和/或对象解构
🔧 可修复
此规则报告的一些问题可以通过 --fix 命令行 选项自动修复。
使用 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
var ;
;
// With `object` enabled
var ;
var ;
此规则的正确代码示例
在 Playground 中打开
/* 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。
一个键是 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}}] */
var {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 }] */
var ;
启用 enforceForRenamedProperties 时的正确代码示例
在 Playground 中打开
/* eslint "prefer-destructuring": ["error", { "object": true }, { "enforceForRenamedProperties": true }] */
var { 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 解构类别的那些问题。此外，声明的变量的名称必须与初始化程序中用于非计算成员访问的名称相同。例如，var foo = object.foo 可以通过此规则自动修复。涉及计算成员访问（例如，var foo = object[foo]）或重命名属性（例如，var foo = object.bar）的问题不会自动修复。
何时不使用它
如果您希望能够直接访问数组索引或对象属性，您可以根据您的喜好配置规则或完全禁用规则。
此外，如果您打算直接访问大型数组索引，例如
var foo = array[100];
那么不建议使用此规则的 array 部分，因为解构不太匹配此用例。
或对于不可迭代的“类数组”对象
var $ = require('jquery');
var foo = $('body')[0];
var [bar] = $('body'); // fails with a TypeError
版本
此规则是在 ESLint v3.13.0 中引入的。
进一步阅读
