prefer-destructuring
喜欢从数组和对象中解构(prefer-destructuring)
使用 JavaScript ES6,添加了一种新的语法,用于从数组索引或对象属性创建变量,称为解构。此规则强制使用解构而不是通过成员表达式访问属性。
规则细节
选项
该规则采用两组配置对象。第一个对象参数决定了规则适用的解构类型。
两个属性,array
和object
,可用于打开或关闭每一个这些类型独立的解构要求。默认情况下,两者都是真实的。
或者,您可以对不同的分配类型使用不同的配置。它接受2个其他键而不是array
和object
。
一个关键是VariableDeclarator
另一个AssignmentExpression
,它可以用来独立地控制每种类型的解构要求。每个属性接受接受两个属性的对象,array
并且object
,它可以被用来控制用于每个的解体要求array
和object
独立地为变量声明和赋值表达式。默认情况下,array
和object
设置为 true 两个VariableDeclarator
和AssignmentExpression
。
该规则具有第二个具有单个键的对象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;
一个示例配置,使用默认值array
和object
填充,如下所示:
{
"rules": {
"prefer-destructuring": ["error", {
"array": true,
"object": true
}, {
"enforceForRenamedProperties": false
}]
}
}
两个属性,array
和object
,它可以被用于开启或关闭每个这些类型的独立地解构要求。默认情况下,两者都是真实的。
例如,以下配置仅强制执行对象解构,而不执行数组解构:
{
"rules": {
"prefer-destructuring": ["error", {"object": true, "array": false}]
}
}
一个示例配置,使用默认值VariableDeclarator
和AssignmentExpression
填充,如下所示:
{
"rules": {
"prefer-destructuring": ["error", {
"VariableDeclarator": {
"array": false,
"object": true
},
"AssignmentExpression": {
"array": true,
"object": true
}
}, {
"enforceForRenamedProperties": false
}]
}
}
两个属性,VariableDeclarator
和AssignmentExpression
,它可以被用来打开或关闭用于解构要求array
和object
。默认情况下,所有值都是 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中引入。