Eslint
规则 | Rules

prefer-destructuring

喜欢从数组和对象中解构(prefer-destructuring)

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

规则细节

选项

该规则采用两组配置对象。第一个对象参数决定了规则适用的解构类型。

两个属性,arrayobject,可用于打开或关闭每一个这些类型独立的解构要求。默认情况下,两者都是真实的。

或者,您可以对不同的分配类型使用不同的配置。它接受2个其他键而不是arrayobject

一个关键是VariableDeclarator另一个AssignmentExpression,它可以用来独立地控制每种类型的解构要求。每个属性接受接受两个属性的对象,array并且object,它可以被用来控制用于每个的解体要求arrayobject独立地为变量声明和赋值表达式。默认情况下,arrayobject设置为 true 两个VariableDeclaratorAssignmentExpression

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

此规则的错误代码示例:

// 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;

不正确的代码enforceForRenamedProperties启用时的示例:

var foo = object.bar;

启用时的正确代码示例enforceForRenamedProperties

var { bar: foo } = object;

一个示例配置,使用默认值arrayobject填充,如下所示:

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

两个属性,arrayobject,它可以被用于开启或关闭每个这些类型的独立地解构要求。默认情况下,两者都是真实的。

例如,以下配置仅强制执行对象解构,而不执行数组解构:

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

一个示例配置,使用默认值VariableDeclaratorAssignmentExpression填充,如下所示:

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

两个属性,VariableDeclaratorAssignmentExpression,它可以被用来打开或关闭用于解构要求arrayobject。默认情况下,所有值都是 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部分是不推荐的,因为解构不能很好地匹配这个用例。

或者对于不可迭代的“类似数组”的对象:

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

进一步阅读

如果您想了解更多关于解构的信息,请查看下面的链接:

版本

该规则在 ESLint 3.13.0中引入。

资源