Если вы разработчик JS (или TS), поклонник комфорта и техник, которые помогают писать более короткие и умные коды, вы попали в нужное место.

Давайте рассмотрим, о чем мы поговорим в этих статьях. Во-первых, мы поговорим об Основах (также известном как область нубов) и, в основном, о том, что такое деструктуризация. После этого мы рассмотрим Остаточные свойства, а затем перейдем к Разрушению вложенных объектов. Это часть 1.

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

В третьей части мы рассмотрим деструктуризацию массива и, наконец, станем ниндзя!

Основы (также известная как область нубов)

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

теперь скажите, что вы хотите использовать имя и возраст пользователя в нескольких местах вашего кода. вам нужно будет использовать user.name и user.age во всех из них 🙄️. Чтобы этого избежать, мы можем определить две новые переменные, такие как name и age, и использовать их вместо них:

Это не так уж и плохо, но давайте сделаем еще лучше. Вы готовы? Вот:

Как это круто ?? Это называется деструктуризацией (или деструктуризацией). Мы распаковываем свойства, которые нам нужны от пользователя объекта (🤓 также известная как исходная переменная), и помещаем их в две новые переменные (то есть name и age ).

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

Введите деструктуризацию:

Теперь, когда кто-то делает это: func (user), наша маленькая функция получает name и age от u ser и использует их как угодно. спроси кого угодно, это круто.

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

Остальные свойства (выход из зоны нубов)

🤔 скажем, нам нужны остальные свойства user, но мы не хотим иметь одну переменную для каждого из них. Мы просто хотим, чтобы все они были в одном объекте. Что ж, это проще, чем вы думаете! Все, что нам нужно, это всего лишь три точки:

как мы видим, в объекте other теперь доступны свойства, отличные от name и age. поэтому в основном other собрал любое свойство, которое еще не было выбрано шаблоном деструктуризации (т.е. все, кроме name и age).

🤓 остальные свойства должны идти последними в шаблоне деструктуризации.

Разрушение вложенного объекта

🤓 Давайте посмотрим, как мы можем распаковывать свойства из вложенных объектов с небольшой помощью наших старых друзей фигурных скобок и двоеточия. Допустим, мы хотим распаковать страну и город из вложенного объекта address в user:

Чтобы лучше понять шаблон, давайте посмотрим, что произойдет, если объект user будет выглядеть следующим образом:

чтобы распаковать код (и имя) из user.address.country, мы можем сделать это:

Это не так уж сложно, правда?

Последнее перед прощанием

Я хочу поделиться с вами еще одним последним. Это называется Передача без декларации 🤓. По сути, это означает присвоение неупакованных значений переменным, которые мы определили до фактического деструктурирования. Давайте посмотрим на пример:

Первое, что приходит в голову, - это написать что-то вроде того, что мы тестировали в первую очередь, что приводит к одной неприятной SyntaxError 🤦‍♂️. Чтобы сделать это правильно, нам нужны только знаменитые ( и ).

Вывод

Мы начали с того, что узнали, что деструктуризация - это всего лишь более короткий способ извлечения или распаковки данных из объектов (и массивов) и присвоения их новым переменным, чтобы сделать наши коды короче и нашу жизнь счастливее. Затем мы увидели несколько основных примеров. После этого мы перешли к остальным свойствам, а затем к деструктуризации вложенных (и действительно вложенных) объектов. В конце концов мы также узнали о присвоении без объявления.

Надеюсь, это было вам полезно. Ваш отзыв очень важен, мой коллега-разработчик. Удачного кодирования 🙂