prefer-destructuring

Требует деструктуризации массивов и/или объектов

В JavaScript ES6 был добавлен новый синтаксис для создания переменных на основе индекса массива или свойства объекта, называемый деструктуризацией. Это правило требует использовать деструктуризацию вместо обращения к свойству через выражение доступа к члену.

Описание правила

Это правило требует использовать деструктуризацию ES6 для извлечения значений из массивов и объектов в объявлениях переменных и выражениях присваивания вместо прямого доступа к свойствам или индексам.

Параметры

Это правило принимает два аргумента, оба из которых являются объектами. Первый объект определяет, к каким типам деструктуризации применяется правило.

В первом объекте есть два свойства, array и object, которые можно использовать, чтобы независимо включать или отключать требование деструктуризации для каждого из этих типов. По умолчанию оба имеют значение true.

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

Например, следующая конфигурация требует только деструктуризацию объектов, но не массивов:

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

Примеры неправильного кода для этого правила:

/* eslint prefer-destructuring: "error" */

// With `array` enabled
const foo = array[0];
bar.baz = array[0];

// With `object` enabled
const qux = object.qux;
const quux = object['quux'];

Примеры правильного кода для этого правила:

/* 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 требуется деструктуризация объектов:

/* eslint prefer-destructuring: ["error", {VariableDeclarator: {object: true}}] */
const {bar: foo} = object;

Примеры правильного кода, если для AssignmentExpression требуется деструктуризация массивов:

/* eslint prefer-destructuring: ["error", {AssignmentExpression: {array: true}}] */
[bar] = array;

enforceForRenamedProperties

Второй аргумент правила — объект с единственным ключом, enforceForRenamedProperties, который определяет, применяется ли деструктуризация object к переменным с переименованными свойствами.

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

Примеры неправильного кода, если включён параметр enforceForRenamedProperties:

/* eslint "prefer-destructuring": ["error", { "object": true }, { "enforceForRenamedProperties": true }] */
const foo = object.bar;

Примеры правильного кода, если включён параметр enforceForRenamedProperties:

/* eslint "prefer-destructuring": ["error", { "object": true }, { "enforceForRenamedProperties": true }] */
const { bar: foo } = object;

Примеры дополнительного правильного кода, если включён параметр enforceForRenamedProperties:

/* 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.

Дополнительная литература

Ресурсы

• Исходный код правила
• Исходный код тестов