РАЗРУШЕНИЕ JAVASCRIPT ES6 И НЕСКОЛЬКО ПОЛЕЗНЫХ УЛОВ

Это всего лишь краткое введение в Назначение деструктуризации в ECMAScript 6 (или, как большинство разработчиков называют JavaScript ES6), поскольку по этой теме есть множество отличных ресурсов; например:
- Изучение ES6, Глава 10. Деструктуризация
- Назначение MDN по деструктуризации.

В основном деструктуризация позволяет извлекать значения из объектов и массивов в именованные переменные; Мне нравится думать об этом как о противоположности конструированию литерала объекта или массива. Например, точечный объект можно объявить так:

const point = {
    x: 1,
    y: 2
  }

Это сокращение для

const point = {}
  point.x = 1
  point.y = 2

Мы можем извлечь или уничтожить значения x и y из точечного объекта со следующим синтаксисом:

const {x: copyOfX, y: copyOfY} = point

Итак, теперь у нас есть две переменные с именами copyOfX и CopyOfY со значениями 1 и 2 соответственно. В качестве альтернативы, если имя извлеченной переменной совпадает с именем параметра объекта, синтаксис может быть более кратким:

const {x, y} = point

Это похоже на сокращение для создания переменных объектной формы:

const x = 1
const y = 2
const point = {x, y}

НАЗВАННЫЕ ФУНКЦИОНАЛЬНЫЕ ПАРАМЕТРЫ

Представьте себе функцию, для которой требуется длинный список параметров.

function foo (parameter, anotherParameter, someOtherParameter) {
  // ... do something
}

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

function foo (options) {
  console.log(options.parameter)
  console.log(options.anotherParameter)
  console.log(options.someOtherParameter)
}

Однако мы можем переписать приведенную выше функцию, чтобы разбить ее единственный аргумент на именованные переменные и избавиться от надоедливой конструкции доступа к параметрам.

function foo ({parameter, anotherParameter, someOtherParameter}) {
  console.log(parameter)
  console.log(anotherParameter)
  console.log(someOtherParameter)
}

ЗНАЧЕНИЯ ПО УМОЛЧАНИЮ

Еще одна приятная особенность деструктуризации - это возможность определять параметры по умолчанию, особенно для глубоко вложенных структур. Например, поле результатов эластичного поискового запроса скрыто внутри следующего объекта:

{
  data: {
    hits: {
      hits: {
        results: []
      }
    }
  }
}

Вероятный сценарий - это требование функции, которая выполняет эластичный поисковый запрос и либо возвращает результаты, либо, если ничего не найдено, пустой массив. Если бы мы занимались защитным программированием и проверяли, существует ли каждое вложенное значение, используя pre-ES6, код мог бы выглядеть примерно так:

var results;
if(data && data.hits && data.hits.hits && data.hits.hits && data.hits.hits.results) {
  results = data.hits.hits.results;
} else {
  results = [];
}

Однако, используя назначение деструктуризации, его можно сжать до:

const {data: {hits: {hits: results = []} = {}} = {}} = response;

Это выглядит намного лучше. Одна проблема, о которой вам нужно знать, - это необходимость дать всему объекту значение по умолчанию для пустого объекта {} - это потому, что алгоритм деструктуризации не может привести к объекту неопределенное значение.

РЕЗЮМЕ

Я перечислил лишь несколько вариантов использования деструктуризации. Если вы хотите узнать больше, просмотрите ссылки, перечисленные в начале сообщения. Спасибо за чтение.

Если вы нашли эту статью полезной / вдохновляющей, нажмите 💚 , чтобы другие тоже могли ею насладиться.

Спасибо за уделенное время! Следуйте за мной в Twitter и LinkedIn.

РАЗРУШЕНИЕ JAVASCRIPT ES6 И НЕСКОЛЬКО ПОЛЕЗНЫХ УЛОВ