Урок 16. JavaScript. Все о Деструктуризации в JS

Получить профессию Frontend разработчика -
bit.ly/3Acn9YI
Подробнее узнать об обучении в Result School -
bit.ly/3Owyc3c
Бесплатный курс HTML & CSS - bit.ly/3bzX1ga
Сделать 5 проектов на JavaScript - bit.ly/3HY08uA
Я в соц сетях:
Telegram: t.me/js_by_vladilen
VK: vladilen.minin
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_school_it
VK: result.school
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vladilen_chat
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
Исходники:
gist.github.com/vladilenm/3b6...
Урок 16. JavaScript. Все о Деструктуризации в JS
Сложный JavaScript простым языком:
• Урок 1. JavaScript. Чт...

Пікірлер: 142

  • @VladilenMinin
    @VladilenMinin4 жыл бұрын

    Приятного просмотра!

  • @alexmaster1982

    @alexmaster1982

    4 жыл бұрын

    Сделайте пожалуйста алгоритмы на js

  • @angelproduction4047

    @angelproduction4047

    4 жыл бұрын

    Очень интересно как дождаться или не дождаться загрузки внешних скриптов. Например есть плагин которые собирает данные из нескольких других (из FB, Roistat, GA).... Так вот пока они не инициализируются данные (client ID, pixel, visitID....) собирать нельзя... Что делать то? А еще эти внешние плагины/виджеты могут быть подключены не на странице, а например через GTM )), ах да и ты не знаешь вообще есть эти виджеты или нет))) если есть собрать данные если нет то нет))

  • @igixprffikiberg2636
    @igixprffikiberg2636 Жыл бұрын

    Не все дошли до этого урока. Удачи всем будущим сеньерам)

  • @proha0230

    @proha0230

    Жыл бұрын

    жиза, многие походу сдались))

  • @ramazzan12

    @ramazzan12

    Жыл бұрын

    как там у вас успехи?

  • @igixprffikiberg2636

    @igixprffikiberg2636

    Жыл бұрын

    @@ramazzan12 Дошел до Full stack за 8 месяцев React, Node, SQL, TS изучил

  • @ramazzan12

    @ramazzan12

    Жыл бұрын

    @@igixprffikiberg2636 офигенный результат, красавчик бро🫡. Я только вот начинаю свой путь

  • @qweaadqweasd8583

    @qweaadqweasd8583

    10 ай бұрын

    удача нам всем не помешает

  • @user-wf8bu6mt2i
    @user-wf8bu6mt2i3 жыл бұрын

    Владілєн, ти настільки крутий, що навіть не ставиш реклами ютуба посеред відео. За це взагалі мега респект

  • @Abdul-hy4cy

    @Abdul-hy4cy

    2 жыл бұрын

    adblock просто существует *

  • @mastheadmasthead3835

    @mastheadmasthead3835

    Жыл бұрын

    идi нахiв украиньска свiння

  • @vvp726

    @vvp726

    Жыл бұрын

    @@Abdul-hy4cy он не работает для встроенных рекламных интеграций

  • @cryptodillery119

    @cryptodillery119

    Жыл бұрын

    ​@@Abdul-hy4cy не помогает он

  • @oduvanio
    @oduvanio4 жыл бұрын

    Все твои видео полезны, спасибо за труд!

  • @vadym468
    @vadym4684 жыл бұрын

    Респект за труды! Реально хорошо объясняешь

  • @magerrrr
    @magerrrr4 жыл бұрын

    Респект! Это видео было оооочень полезно! Спасибо, Владилен!

  • @sea-lucky7143
    @sea-lucky71434 жыл бұрын

    Уверен кейсы полезные и в тему. Как всегда респект! Ждем новых видосов. Спасибо!

  • @ivanpav
    @ivanpav4 жыл бұрын

    Спасибо огромное за Ваш труд! Очень нравится подача материала!)

  • @Anfibiys
    @Anfibiys3 жыл бұрын

    вот все "учителя" по сути цитируют один и тот-же материал, но лично у Вас все, что вы рассказываете, выстраивается в логическую цепочку, очень все понятно и доходчиво. спасибо за труд!

  • @kirillgavrilov9681
    @kirillgavrilov96814 жыл бұрын

    Спасибо большое за этот плейлист 👍🏻, подписался на обновления

  • @user-if9sb2fn4f
    @user-if9sb2fn4f4 жыл бұрын

    Блин! Все четко) благодарю! Давай в том же духе! Это обалденно, спасибо тебе!

  • @mikepolo7661
    @mikepolo76614 жыл бұрын

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

  • @kseniazh1738
    @kseniazh17384 жыл бұрын

    СПАСИБО! Четко, кратко, ничего лишнего !

  • @mor2623
    @mor26232 жыл бұрын

    Коротко и ясно, как всегда без воды👍👍👍

  • @promotezor
    @promotezor3 жыл бұрын

    Высоко ценю твой труд, спасибо!

  • @leokorsunsky2395
    @leokorsunsky23953 жыл бұрын

    Спасибо за Ваш труд, очень дельный контент)!

  • @sergkuznetzov3469
    @sergkuznetzov34694 жыл бұрын

    Огромное спасибо,Владилен

  • @user-tg9wd2hm1g
    @user-tg9wd2hm1g4 жыл бұрын

    Благодарю Вас Владилен! Видео класс!👆🏻👍

  • @Sergio-ij7pw
    @Sergio-ij7pw3 жыл бұрын

    Какое широкое поле использования деструктуризации! Особенно про функцию из Реакта в конце ролика. Спасибо!

  • @mila4308
    @mila43082 жыл бұрын

    спасибо большое за очень понятный, полезный и интересный урок!

  • @vladimirww5152
    @vladimirww51523 жыл бұрын

    Классное объяснение, очень подробно!

  • @AsVit
    @AsVit4 жыл бұрын

    Урок пройден) Спасибо! Все предельно понятно!

  • @TheLevius
    @TheLevius4 жыл бұрын

    Молодец! Реально полезное дело делаешь.

  • @user-qe6tc2zi1n
    @user-qe6tc2zi1n6 ай бұрын

    Владилен, вы супер!! Так четко объясняете, предпочитаю исключительно ваши уроки 😌

  • @user-np9mq5xc7j
    @user-np9mq5xc7j2 жыл бұрын

    Отличное объяснение! Спасибо!

  • @dmitriy9152
    @dmitriy91524 жыл бұрын

    Спасибо! Познавательно.

  • @sergeirodionov4000
    @sergeirodionov40004 жыл бұрын

    Большое спасибо за полезные видосы!

  • @ilya_123__
    @ilya_123__2 жыл бұрын

    Спасибо большое. Самое лучшее объяснение!

  • @EvilGazz
    @EvilGazz4 жыл бұрын

    Спасибо! Очень доступно объясняешь.

  • @miklayen_yakim
    @miklayen_yakim Жыл бұрын

    Спасибо. Ты даже не представляешь как ты помогаешь

  • @evg_ep
    @evg_ep4 жыл бұрын

    Спасибо. Очень хорошая подача материала

  • @tomanderson5893
    @tomanderson5893 Жыл бұрын

    Супер видос! Спасибо, все очень понятно

  • @user-uy5wf8rt6c
    @user-uy5wf8rt6c5 ай бұрын

    Спасибо!!! Все четко,все ясно и понятно!

  • @max_mgtow
    @max_mgtow3 жыл бұрын

    Спасибо за видео 👍

  • @yakubyakubov7799
    @yakubyakubov77994 жыл бұрын

    просто класс не как не мог понять эту тему определенно заслуживает лайка)

  • @RewCSharp
    @RewCSharp6 ай бұрын

    Спасибо за урок!

  • @user-qk5dv2mx2b
    @user-qk5dv2mx2b3 жыл бұрын

    Классно объясняешь, действительно сложные вещи простыми словами. Это редкий талант.

  • @user-en4cc9jg5c
    @user-en4cc9jg5c Жыл бұрын

    Спасибо за видео! Пересматриваю как раз в связи с магией деструктуризации объекта props в React)))

  • @seriousman109
    @seriousman1093 жыл бұрын

    Хорошо объясняешь, спасибо за урок.

  • @maksime833
    @maksime8332 жыл бұрын

    Супер видео! Спасибо

  • @user-zi2fh7zp1q
    @user-zi2fh7zp1q Жыл бұрын

    Просто нет слов, спасибо

  • @user-qf5vh8yu1i
    @user-qf5vh8yu1i Жыл бұрын

    Владилен, контент пушка!

  • @user-jn5cb4zb7f
    @user-jn5cb4zb7f Жыл бұрын

    Деструктуризация зашла на ура, спасибо)

  • @user-ls4vs9uo5k
    @user-ls4vs9uo5k Жыл бұрын

    прекрасно видео, всё доступно и понятно, спасибо большое

  • @user-yg7zl3lp3k
    @user-yg7zl3lp3k4 жыл бұрын

    Лайк автоматом

  • @maximbazadji4895
    @maximbazadji48954 жыл бұрын

    отличное видео! большое спасибо

  • @frycher6540
    @frycher65404 жыл бұрын

    Годнота подъехала

  • @zmeygorynych5684
    @zmeygorynych56843 жыл бұрын

    Плейлист мега крутой конечно)

  • @user-wv7tx4mb6d
    @user-wv7tx4mb6d4 жыл бұрын

    Спасибо за контент)

  • @evgeny9242
    @evgeny92424 жыл бұрын

    спасибо за новое видео )

  • @lilyly9479
    @lilyly94794 жыл бұрын

    Спасибо большое!

  • @kirintsev
    @kirintsev4 жыл бұрын

    спасибо за урок

  • @elenasmirnova3549
    @elenasmirnova3549 Жыл бұрын

    спасибо. было полезно)

  • @darinaibragimova3426
    @darinaibragimova34263 жыл бұрын

    Спасибо вам 🤓

  • @0tbeptka
    @0tbeptka2 жыл бұрын

    Круто!!! и понятно

  • @mihhailk4749
    @mihhailk47494 жыл бұрын

    Super cool tutorials!

  • @Pr0xytube
    @Pr0xytube4 жыл бұрын

    Спасибо!

  • @bezbezov8867
    @bezbezov88672 жыл бұрын

    Spasibo 👍🏽🤝

  • @uaplatformacomua
    @uaplatformacomua4 жыл бұрын

    Спасибо большое! Благодаря вам я впервые использовала Set вчера)))

  • @vitaliy794

    @vitaliy794

    4 жыл бұрын

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

  • @arturnailevich7776
    @arturnailevich77762 жыл бұрын

    Огонь, спасибо. Прохожу курс скилбокса, там нифига не объяснили это и применяют на практике и так постоянно.

  • @RuslanNumber1

    @RuslanNumber1

    Жыл бұрын

    на GB такая же вафля, тупо одна коммерция, мало что понятно и поэтому все топаем к Владилену за бесплатным контеном для усвоения материала :)

  • @artemijeka
    @artemijeka2 жыл бұрын

    Спасибо

  • @konstantinasgucul
    @konstantinasgucul Жыл бұрын

    Krasava🎉

  • @strange_man317
    @strange_man3172 жыл бұрын

    thanks you.

  • @astr0t
    @astr0t4 жыл бұрын

    Супер. Весь плейлист то что надо. Первый раз наткнулся на подобное. Без воды и по существу. Хотел спросить, есть ли подобные ролики про php. Такие-же как и эти, без бесконечных «что такое if», «как объявить переменную»?

  • @airbone787
    @airbone7874 жыл бұрын

    Спасибо, очень качественное видео как всегда! А есть возможность сделать видео про функции-декораторы?

  • @user-bh6mc8pd8g
    @user-bh6mc8pd8g4 жыл бұрын

    великолепно

  • @hypermauth
    @hypermauth Жыл бұрын

    Лучший ;)

  • @grommaks
    @grommaks4 жыл бұрын

    14:45 Строка 10. Еще один юзкейс Удаление нежелательных данных из объекта (чаще всего на backend) const user = {name: "Name", password: "My Password"} const {password, ...secureUserData} = user;

  • @astrotrain

    @astrotrain

    4 жыл бұрын

    Прикольно, я хотел этот пример в прошлом ролике про рест и спред написать))) Например так: const secureUserData = ({ password, ...data }) => data;

  • @grommaks

    @grommaks

    4 жыл бұрын

    @@astrotrain Непосредственно этот пример делает функцию для извлечения данных без пароля) у меня просто извлекаются сразу) по этому я бы лучще назвал функцию getUserSecureData :) но это вкусовщина

  • @astrotrain

    @astrotrain

    4 жыл бұрын

    @@grommaks да я не думал над названием, просто ваши названия откопировал)))

  • @DIEZ919191
    @DIEZ9191914 жыл бұрын

    Ура!

  • @Den4eg37
    @Den4eg374 жыл бұрын

    ...Спасибо ))

  • @aSSholeShitty1
    @aSSholeShitty13 жыл бұрын

    6:56 : Программа: я не чувствую вычитания Владилен: у тебя его нет

  • @user-dd1eu5cb3t
    @user-dd1eu5cb3t4 жыл бұрын

    Amazing

  • @ups7write
    @ups7write4 жыл бұрын

    Like! Bell... Отлично!

  • @einfachbeimLernen
    @einfachbeimLernen4 жыл бұрын

    нахожу сложным для понимания arguments.callee JS буду рад если это будет разбираться )) Спасибо, за очень понятные и по существу уроки!

  • @einfachbeimLernen

    @einfachbeimLernen

    4 жыл бұрын

    var s = document.getElementById('thing').style; s.opacity = 1; (function(){ (s.opacity-=.01)

  • @user-py1gq5yq2y
    @user-py1gq5yq2y2 жыл бұрын

    Присоединяюсь к благодарящим

  • @gordonfreeman_wf
    @gordonfreeman_wf3 жыл бұрын

    Спасибо за видео, все доходчиво рассказываете. А можете рассказать как использовать , допустим map, с массивом вложенных {} +деструктуризация... Заранее спасибо

  • @user-qn2hh3wf4y
    @user-qn2hh3wf4y2 жыл бұрын

    Спасибо за видео, как я понял в hook useState это тоже применяется

  • @narek7281
    @narek72814 жыл бұрын

    Can you please make the next video about Regex? Also your Videos are great.

  • @yakut54
    @yakut544 жыл бұрын

    О Блин!!! как пропустил то.... Привет, комунити!

  • @zhivulinal
    @zhivulinal3 жыл бұрын

    ютюб любит лайки и комменты, ставлю лайку и коммент какой то

  • @Ziraman13
    @Ziraman134 жыл бұрын

    Все очень круто. Посмотрел вес плейлист, но так и не понял: можно ли все эти фишки уже применять напрямую в браузере или пока через babel делать?

  • @VladilenMinin

    @VladilenMinin

    4 жыл бұрын

    В подавляющем большинстве браузеров да

  • @Ziraman13

    @Ziraman13

    4 жыл бұрын

    @@VladilenMinin , благодарю за ответ

  • @4ITTonik
    @4ITTonik4 жыл бұрын

    Ещё способ клонирования массива или объекта: objNew = {...objOld}, arrNew = [...arrOld] работает быстрее, нежели аналогичные Spread'y методы, да и куда понятнее :) P.S. ES6 МОЩЬ! P.S.S. Thank you so much Владилен!

  • @user-tv3of9nw8m

    @user-tv3of9nw8m

    Жыл бұрын

    Если у объекта имеются вложенные объекты то будет ссылка а не клонирование / копирование При изменении нового объекта изменения коснуться и оригинального объекта Самый лучший и быстрый способ глубокого копирования объекта это - JSON.parse(JSON.stringify(obj)) Либо рекурсивная функция

  • @iname_d
    @iname_d Жыл бұрын

    Приветствую, вопрос такой, вот где console.log там подсвечивается перед цифрами подсказка какой переменной что присваивается, можно так же настроить в vscode?

  • @Leather_Cowboy
    @Leather_Cowboy2 жыл бұрын

    а какое расширение пишет возле переменных полупрозрачные значения? ну или если это не расширение то есть подобное для вскода?

  • @user-vw2hl2rr2l
    @user-vw2hl2rr2l2 жыл бұрын

    ТОП ! Спасибо ! Можно аналогичное для пропсов в реакте объяснить , было бы полезно !

  • @altcoin2530
    @altcoin2530 Жыл бұрын

    Ставте Лайк! якщо вам подобається цей канал.

  • @xenonist4502
    @xenonist45023 жыл бұрын

    Огромное спасибо, так мой код скрасит))))

  • @user-tv3of9nw8m
    @user-tv3of9nw8m Жыл бұрын

    Если у объекта свойство это вложенный объект, то при деструктуризации - будет не копия вложенного объекта а ссылка на него Может возникнуть ситуация когда при изменении созданного объекта будет изменён оригинальный объект

  • @TheQuantum3k
    @TheQuantum3k Жыл бұрын

    А возможно ли деструкторизовать массив в объект, чтобы иметь уже именные ключи, а не индексы массива? Чтобы в дальнейшем с ним удобнее работать по свойствам.

  • @stephencurry8078
    @stephencurry80783 жыл бұрын

    как сделать такие светящиеся кнопки в VS Code на Windows 10

  • @akhmabay
    @akhmabay3 жыл бұрын

    Владилен, спасибо за ваши ролики, у вас куча полезной информации. У меня вопрос. Решил я, значит, деструктурировать вложенный объект, в котором ключи свойств на кириллице, причем состоящие из нескольких слов. К примеру, есть ключ, состоящий из ФИО, например "Пупкин Вася Иванович". Всё должно быть именно так, нельзя сделать это значением, а ключ сделать "fio". При деструктуризации, когда пишу непосредственно ФИО в кавычках, присваиваю это свойство переменной (пусть, например та же fio), и потом обращаюсь к переменной fio, то всё хорошо. То есть, вот так все работает: const { "Пупкин Вася Иванович": fio } = myObj; console.log(fio); Но проблема в том, что этих ФИО у меня дофига, и мне нужно в зависимости от предшествующей логики, подсовывать внутрь деструктуризатора разные ФИО. Мне показалось логичным попробовать вместо непосредственно самого ФИО, подставить в деструктуризацию переменную со значением ФИО, то есть сделать вот так: let test = "Пупкин Вася Иванович"; const { test: fio } = myObj; console.log(fio); Но это не работает. Получается как бы двойная декларация переменной test. Подскажите пожалуйста, как обойти эту коллизию? Возможно ли реализовать то, что я хочу? Конечно, я могу добраться до нужных ключей и значений с помощью нескольких Object.entries/keys/values(Obj), но хотел решить задачку именно посредством деструктуризации.

  • @legion465
    @legion4653 жыл бұрын

    Как сделать console в браузере черным как у тебя ?

  • @user-xt2pj7rb9e
    @user-xt2pj7rb9e4 жыл бұрын

    Владлен а может удариться в node js?) js js'сом, а про ноду мало актуальной информации.

  • @VladilenMinin

    @VladilenMinin

    4 жыл бұрын

    Посмотри описание к последним роликам, там ссылка на мой курс по ноде

  • @OEF1able
    @OEF1able3 жыл бұрын

    а почему на 10:08 на неопределенную переменную name не ругнулось?

  • @astrotrain
    @astrotrain4 жыл бұрын

    Странно, я думал на канале уже всё из популярного es6 было, и про деструктуризацию в том числе.

  • @user-ge2qk4cm1j
    @user-ge2qk4cm1j3 жыл бұрын

    +

  • @altcoin2530
    @altcoin2530 Жыл бұрын

    Зайшов підримати! Дякую вам за вашу працю. Слава Україні!!!!

  • @AntonioBenderas

    @AntonioBenderas

    Жыл бұрын

    Героям Слава!

  • @vikont2448
    @vikont24484 жыл бұрын

    Владилен. А ты сотрудничаешь с webformyself ? Там ведь твой курс по JS платный, а здесь в свободном доступе или есть отличия ?

  • @VladilenMinin

    @VladilenMinin

    4 жыл бұрын

    Разные курсы совсем

  • @wickedtorpedo75
    @wickedtorpedo754 жыл бұрын

    давать имя свойству справа от него очень сильно дизориентировал меня, JS во всей красе

  • @vahagsaghatelyan1829
    @vahagsaghatelyan18292 жыл бұрын

    А это актуально в 2021?