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

进一步阅读

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

• 解构分配（MDN）

• ECMAScript 6中的解构和参数处理（2ality 博客）

版本

该规则在 ESLint 3.13.0中引入。

资源

• 规则资源

• 文档资源