Рубрики
Без рубрики

3 мощные примеры назначения разрушения

Я мог бы быть немного одержим, но этот инструмент ES2015+ имеет так много замечательных применений!. Tagged с JavaScript, WebDev, производительности, новичками.

Ecmascript всегда добавляет новые функции, которые делают наш код более мощным. Я даже начал дискуссию о любимых людей.

Какое ваше любимое дополнение к ES2015+

Лори ・ 11 июня ’19 ・ 1 мин читать

Там я перечислил, что моя была уничтожением задания. Вы можете прочитать больше об этом в Мозилла документы Анкет

Итак, без лишних слов, вот несколько замечательных примеров этого синтаксиса в действии!

Допустим, у нас есть объект, которого мы хотим манипулировать, который выглядит так:

{
  data: {
    item: "this thing"
  }
}

Если мы передаем его в функцию и доступ вещь Это немного грязно.

(result) => {
   result.data.item
}

С заданием Destructuring мы можем изменить это на это!

({data}) => {
   data.item
}

Импорт и экспорт модулей довольно много использует эту концепцию.

Экспорт, импорт и дефолт, о боже!

Лори ・ 29 апреля ’19 ・ 3 мин Читает

Что, если бы вместо этого у нас был массив.

[
  {
    item: "this thing"
  },
  {
    num: 200
  }
]

Доступ к нему без разрушения назначения не идеально.

(result) => {
   result[0].item
}

Но посмотрите, насколько мощный ES2015+!

([data, status]) => {
   data.item
}

Я наткнулся на удивительный вариант использования для назначения разрушения при использовании Обещание. Все другой день. Если ты не знаком, Обещание. Все разрешает несколько обещаний и ставит результаты в массив. Что-то типа

[result1, result2]

Теперь подумайте о типичном ответе на обещание (особенно если это HTTP -запрос) оба результата, вероятно, похожи на это.

{
  data: {
    item: "this thing"
  }
}

Мы можем объединить оба наших предыдущих примера и сделать это намного чище, чтобы получить доступ к контенту внутри каждого объекта ответа.

Promise.all([
            promise1,
            promise2,
        ]).then(([{ data: result1 }, { data: result2 }]) => {
            result1.item
        });

Теперь здесь происходит ряд вещей.

  • Мы используем деструктуризация массива для доступа к каждому элементу в массиве индивидуально.
  • Затем мы используем разрушение объекта на этих записях массива.

Но есть поворот. Что это?

{data: result1}

Это присваивает имя переменной объекту данных. Мы не хотим использовать данные Потому что мы также получаем доступ к чему -то под названием данные в Результат2 Анкет Обратите внимание, что объект, к которому мы обращаемся, идет первым, и имя идет вторым. Следующее не сработает.

Promise.all([
            promise1,
            promise2,
        ]).then(([{ result1: data }, { result2: data }]) => {
            result1.item
        });

У вас должны быть уникальные имена переменных (понятно). И в этом примере данные используется дважды.

Но там у вас есть. Посмотрите, насколько чище наш код может быть с заданием Destructuring!

Оригинал: “https://dev.to/laurieontech/3-powerful-examples-of-destructuring-assignment-jlf”

Читайте ещё по теме: