Современный JavaScript имеет много новых функций, упрощающих написание простого и структурированного кода. Одной из удобных современных функций, доступных в ES6+, является деструктуризация массивов и объектов.
Фреймворки JavaScript, такие как React.js и Angular, поощряют использование этой техники. Поэтому очень важно понимать, что такое деструктурирование и как его использовать при написании кода.
Что такое деструктуризация объектов и массивов в JavaScript?
Деструктурирование в JavaScript относится к процессу распаковки значений из массива или объекта. Он обеспечивает более краткий способ получения значений из массивов или объектов без тяжелой работы, когда вас интересуют отдельные элементы массива или значения в объекте.
Это также полезно при обработке возвращаемых значений сложной функции или выражения. Эта концепция является одной из лучшие практики, которым вы должны следовать при написании кода React.
Как деструктурировать массивы
Вот пример кода, чтобы получить представление о деструктуризации массива:
константа прибытие = [1, 2];
константа [а, б] = обр;
консоль.лог (а) // печатает 1 на консоли
консоль.лог (б) // печатает 2 на консоли
Этот код использует деструктурирование для присвоения значений из обр—1 и 2 — переменным а и б, соответственно. Это фундаментальная концепция деструктуризации. У вас есть массив или объект с правой стороны, а вы распаковываете элементы и назначаете их отдельным переменным с левой стороны.
Под капотом JavaScript копирует значения из обр и присваивает их переменным с левой стороны следующим образом:
константа прибытие = [1,2];
константа а = обр[0];
константа б = обр[1];
Как видите, деструктурирование — более краткий способ сделать это, в отличие от использования объектной или скобочной нотации. Однако этот синтаксис, скорее всего, будет полезен при работе со сложными массивами или функциями, возвращающими массивы или строки.
Проверьте пример кода ниже:
константа [день, месяц, число, год, время, часовой пояс] = Дата().расколоть(' ')
// Вызов Date() возвращает текущую дату в формате:
// Пн, 20 февраля 2023 г., 13:07:29 GMT+0000
консоль.log (день) // печатает понедельник
консоль.log (месяц) // печатает февраль
консоль.лог (дата) // печатает 20
В этом примере кода мы создаем новую строку с текущей датой, вызывая Дата(). Далее мы используем расколоть(), а Строковый метод JavaScript, чтобы разделить элементы в строке, используя пробел в качестве разделителя. расколоть(' ') возвращает массив, и мы используем деструктурирование для присвоения значений отдельным переменным.
Помните, что если ваш массив содержит больше элементов, чем вы распаковываете, JavaScript проигнорирует лишние элементы.
константа прибытие = [1, 2, 3, 4];
константа [а, б] = обр;
консоль.лог (а) // печатает 1
консоль.лог (б) // печатает 2
// значения 3 и 4 не присваиваются никакой переменной; их игнорируют
В этом случае, если вы хотите сохранить оставшиеся элементы в переменной, используйте параметр rest следующим образом:
константа прибытие = [1, 2, 3, 4];
константа [а, б, ...остальное] = обр;
консоль.log (остальное) // печатает [3,4]
Иногда вы можете не заботиться о конкретном элементе. Шаблон деструктурирования JavaScript также позволяет пропускать определенные элементы, используя пустую запятую.
константа прибытие = [1, 2, 3, 4];
константа [а,, с] = обр;
консоль.лог (с) // печатает 3
Приведенный выше код использует пустое пространство для игнорирования значения. 2 в массиве обр. Вместо присвоения значения 2 к переменной с, он переходит к следующему элементу массива. Он также игнорирует четвертое значение, потому что не указывает переменную для его сохранения.
Напротив, если вам нужно меньше предметов, чем вы распаковываете, процесс назначит неопределенный значение этих дополнительных переменных.
константа прибытие = [1];
константа [а, б] = обр;
консоль.лог (а) // печатает 1
консоль.лог (б) // печатает неопределенное значение
Чтобы предотвратить неопределенность переменных, вы можете установить значения по умолчанию, если вы не уверены в длине массива, следующим образом (назначение значений по умолчанию не является обязательным):
константа прибытие = [1];
константа [а = '10', б = 'не предоставлен'] = обр;
консоль.лог (а) // печатает 1
консоль.лог (б) // печатает "не предусмотрено"
Эта деструктуризация присваивает значение 1 к переменной а, перезаписывая его значение по умолчанию. Переменная б сохраняет значение по умолчанию, поскольку значение не указано.
Как деструктурировать объекты
Деструктуризация объектов не так уж отличается от массивов. Единственное отличие состоит в том, что массивы являются итерируемыми, а объекты — нет, что приводит к несколько иному способу работы.
При работе с объектами переменные в левой части оператора присваивания также инициализируются как объекты:
константа человек = {имя: 'Элвин', возраст: 10, высота: 1};
константа {имя, возраст, рост} = человек;
консоль.log (имя) // печатает 'Элвин'
консоль.log (высота) // печатает 1
Из кода мы используем имена свойств из человек объект. Однако вам не обязательно использовать точные имена свойств в объекте. Вы можете деструктурировать и сохранить значения в разных именах переменных следующим образом:
константа человек = {имя: 'Элвин', возраст: 10, высота: 1};
константа {имя: имя, возраст: годы, высота: currentHeight} = человек;
консоль.log (имя) // печатает 'Элвин'
консоль.log (текущая высота) // печатает 1
Вы начинаете с указания значения свойства, которое хотите деструктурировать, затем указываете имя переменной, которое вы будете использовать для хранения значения после двоеточия. Как и в случае с массивами, деструктурирование несуществующего имени свойства будет неопределенный.
Чтобы справиться с этим, вы можете аналогичным образом указать значения по умолчанию, если имя свойства, которое вы хотите присвоить переменной, недоступно:
константа человек = {имя: 'Элвин', возраст: 10, высота: 1};
константа {имя, возраст, рост, местоположение ='Мировой'} = человек;
консоль.log (имя) // печатает 'Элвин'
консоль.log (местоположение) // печатает 'По всему миру'
Порядок переменных в левой части не имеет значения для объекта, поскольку объекты хранят значения в парах ключ-значение. Таким образом, следующий код даст те же результаты:
константа человек = {имя: 'Элвин', возраст: 10, высота: 1};
константа {возраст, рост, имя} = человек;
консоль.log (имя) // печатает 'Элвин'
консоль.log (высота) // печатает 1
Наконец, как и в случае с массивами, вы также можете использовать параметр rest для деструктуризации нескольких значений в одной переменной, например:
константа человек = {имя: 'Элвин', возраст: 10, высота: 1};
константа {имя, ...остальное} = человек;
консоль.log (имя) // печатает 'Элвин'
консоль.log (остальное) // печатает {возраст: 10, рост: 1}
Просто обратите внимание, что параметр rest всегда должен быть последним. В противном случае JavaScript выдаст исключение.
Улучшите качество своего кода с помощью деструктуризации JavaScript
Современные функции Javascript, такие как деструктуризация, позволяют писать легко читаемый код. Используя деструктурирование, вы можете быстро распаковать значения из массивов и объектов. Деструктуризация также может оказаться удобной в других ситуациях, например, при обмене значениями двух переменных. Надеюсь, теперь вы понимаете, что означает деструктурирование в JavaScript, и сможете использовать его при написании кода.
