В javascript мы можем ссылаться на поля массива или объекта через [] или вызывать .something объекта.
Допустим, у нас есть следующие массивы и объекты, и мы хотим сослаться на их соответствующие поля:
Это кажется простым, но не утомительно ли использовать [] или расширение . ключевое слово для ссылки на свойства массива или объекта? Вот где начинается деструктуризация.
Деструктуризация в javascript предлагает более чистый и простой способ извлечения группы данных из массива и объектов в более простые операторы.
Возьмем следующий пример:
Здесь у нас двойной массив. Мы индексируем дважды, чтобы получить нужную нам информацию. В приведенном ниже примере мы использовали деструктурирование, чтобы различать фрукты и числа в массиве.
После этого мы можем дополнительно извлечь определенные фрукты (яблоко, банан) из массива фруктов, а также извлечь числа из массива чисел.
Это намного чище по сравнению с двойным индексированием для получения определенных значений из двойного массива. Мы можем четко различать яблоки и числа в двойном массиве, и другим людям легко следовать коду.
Это значительно упрощает доступ к длинному массиву данных вместо использования цикла для доступа ко всем элементам.
Кроме того, вы также можете по умолчанию использовать поля со значениями, которые вы пытаетесь извлечь из массива. Если массив пуст, как здесь, для defaultVal будет установлено значение «Новое имя».
Мы немного рассмотрели, как работает деструктуризация массива, но как насчет деструктуризации объектов?
Давайте посмотрим на следующий пример:
Здесь у нас есть вложенный объект, который содержит некоторую информацию об имени родственника. Обычно мы должны ссылаться на несколько слоев вниз, ссылаясь на один слой за раз (obj.information.relatives.aunt).
При деструктуризации объекта мы извлекаем один слой за раз. Сначала извлекаем из obj информацию, потом из информации родственники, а потом тети родственников.
Если мы посмотрим на это более внимательно, деструктурирование не сильно отличается от ссылки на несколько вложенных полей объекта.
В приведенном выше примере мы можем ссылаться на aunt, только если существуют obj, obj.information, obj.information.relatives и obj.information.relatives.aunt.
Введите деструктурирование объекта здесь.
Деструктуризация объекта не только предлагает способ извлечения данных из объекта, но и дает нам механизм для присвоения значения по умолчанию некоторому полю, если оно не определено:
Здесь, если fieldOne является атрибутом obj, тогда console.log(fieldOne) распечатает его значение. Что, если fieldOne не существует?
В обычных случаях это выведет «undefined», но деструктуризация позволяет нам по умолчанию использовать какое-то значение, если это необходимо.
Почему мы должны беспокоиться о том, определен ли fieldOne или нет?
Допустим, вы создаете приложение, которое полагается на fieldOne для обработки некоторых входных данных. Если вы создаете реагирующее приложение, а «fieldOne» не определено, это может привести к тому, что приложение выдаст ошибку и ничего не отобразит на экране. Звучит ужасно, верно?
Вот почему мы хотим использовать некоторые значения по умолчанию, и использование этого преимущества от деструктуризации имеет важное значение в разработке внешнего интерфейса сегодня. Иногда мы не можем гарантировать, существуют определенные поля объекта или нет, и поэтому нам нужно установить какое-то значение по умолчанию, чтобы приложение не зависало.
И да, вложенная деструктуризация (как показано в одном из примеров выше) может выглядеть уродливо и нечитаемо, но она дает нам возможность использовать значения по умолчанию.
Недавно, в es2020, дополнительная цепочка предоставляется в качестве опции по умолчанию, которая не определена, если какое-либо из значений во вложенном объекте недоступно. Вы можете прочитать эту статью, чтобы узнать больше о необязательных цепочках:
Вот и все! Наслаждайтесь разрушением ваших объектов прямо сейчас! Не забудьте указать им некоторые значения по умолчанию.
