Массивы в JAVASCRIPT. Методы массивов. Редактирование, поиск, сортировка. Уроки JavaScript с нуля
Вставка
- Опубліковано 12 чер 2024
- Массив - это особый подвид объектов. Он позволяет нам хранить данные, но, в отличии от объектов, мы можем управлять этими данными более гибко. Как работать с массивами и применять различные методы мы сейчас и разберемся! Но то, что действительно делает массивы особенными - это их внутреннее представление. Движок JavaScript старается хранить элементы массива в непрерывной области памяти, один за другим. Существуют и другие способы оптимизации, благодаря которым массивы работают очень быстро. Но все они утратят эффективность, если мы перестанем работать с массивом как с «упорядоченной коллекцией данных» и начнём использовать его как обычный объект. Массивы тщательно настроены в движках JavaScript для работы с однотипными упорядоченными данными, поэтому, пожалуйста, используйте их именно в таких случаях. Если вам нужны произвольные ключи, вполне возможно, лучше подойдёт обычный объект { }.
👉 Файлы урока - fls.guru/files/tutorials/js/j...
🔴 Карта канала: bit.ly/36r29xV
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
00:00 - В уроке
00:23 - Создание массивов. Элементы (значения) массива.
01:20 - Получение значений массива
04:07 - Длина массива. Свойство length
04:42 - Доступ к массиву
05:28 - Изменение значений массива
06:15 - Что такое очередь и стек
07:13 - Работа с очередью и стеком. Методы push/pop и shift/unshift
09:40 - Редактирование элементов массива. Метод splice
13:08 - Копирование массивов. Методы slice и concat
16:18 - Поиск в массиве. Методы indexOf,lastIndexOf и includes
17:47 - Поиск в массиве объектов. Методы Find,findIndex и filter
21:18 - Сортировка массива. Методы sort и reverse
25:08 - Метод map (преобразование массива)
26:33 - Методы split и join (преобразование массива)
28:24 - Метод Array.isArray
29:44 - Перебор элементов массива. Циклы и метод forEach
33:03 - Методы reduce/reduceRight
37:05 - Правильное использование массивов
38:49 - Домашка
39:45 - Заключение
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
Ну все, дальше DOM!
🔴 Карта канала: bit.ly/36r29xV
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
Женя, спасибо за все. Подскажи, а настройка консоли в VC CODE ты где-то уже делал видео? Ну чтоб консоль работала внутри VC CODE
не подскажите что за музыка в конце
Привет, преподобный! я начинающий, прохожу с первого урока, установил сублимтхт3, но не получается добавить Эммит, по всякому пытался, не получается, что делать???
@@Vito_Ca, приветствую! Это уже другой текстовой редактор, правильно?? Вы предлагаете вместо соблайм техт3, правильно я вас понял, или эти редакторы откроют возможность техт3?
@@Vito_Ca, спасибо 🤗🤗🙌🙌
давайте ставить лайки по больше, репостить и тд, чтоб
Женя продолжал делать уроки по js 😭😭😭
Они действительно помогают, полезные
Спасибо!
Пора бы Жене говорить в выпусках"Если это видео наберет 10000 лайков я расскажу про модули"
Он просто пересказывает слово в слово материал отсюда - learn.javascript.ru
@@eris6695 очень доходчиво пересказывает!))
@@eris6695 он намного понятнее рассказывает, самому это учебник читать тяжко
Бедный Иштван - загоняли по массиву
Урок конечно супер! Я неделю по книжке разбирался - а тут за 40 минут добил до идеала. Я тут кстати где то ныл что по видео учиться сложно. Видимо набрался критический обьем информации и стало легче. Делаю так посомтрел видео, часа через два пересмотрел еще раз на следуший день практика + чтение теории и все супер
Утро стало лучше как только я увидел видео Жени. Спасибо за твои старания
учусь в офлайн школе и скажу что Женя в онлайн все подает лучше, понятней и структурировано! Спасибо за прекрасные уроки!!!
Пожалуйста!
Найс байт на покупку курса
+, тоже самое
@@notrodans не нравится - не смотри, всё просто
@@Woody_Johnson какой курс?
Досталось же сегодня Иштвану!!!😂💪🏽
И не говори :)
Я походу так сына назову
Бошка кипит. Ещё раз 15 пересмотрю как минимум😅 Спасибо, Женя!
Пожалуйста!
Надо не смотреть по 15 раз, а конспектировать и отрабатывать конспект на деле
@@tylerdurden9008 По факту, но думаю он за пол года освоил материал)
@@user-yq5hz4kz4b да, нормас)
@@egorkurkin356 Вау, интересно, как у тебя сейчас дела обстоят с js? Расскажи, пожалуйста
Как же полезно и всё структурировано по полочкам, всё очень понятно.Женя ты лучший на ютубе по веб разработке в СНГ.
Как всегда качественно, по теме, интересно и классно спасибо
Пожалуйста!
Отдельное спасибо за тайм-коды. Очень удобно👍
Красава ты конечно, не то что ребята с других каналов, которые только и делают, что снимают видосы по верстке простеньких макетов для новичков, потому что их больше смотрят. Спасибо)
Без шуток. Я читал learnJS и люто не понимал, как бы не пробовал перечитывать снова и снова..
А потом просто посмотрел это видео. И всё. Теперь я разобрался во всех методах.
Спасибо огромное автору! Подписался! Очень хорошо объясняете!
Жду продолжения с нетерпением. Огромное спасибо за такие шикарные уроки!
Очень конструктивные видео у Вас. Спасибо за труды!
Дякую вам, Євгене, за чудові уроки.
Будь ласка!
спасибо огромное за видосы по js! мне он тяжело дается, а ваша подача информации спасает)) пересматриваю по раза два-три и что-то остается даже в моей голове >.
Евгений, как всегда ваш урок на высоте! Спасибо!
Спасибо вам Женя за вашу работу, вы так доступно все разжевываете!!
Просто вау ! Спасибо вам большое за этот прекрасный плейлист !!!
Спасибо тебе, как всегда вышка. Не знаю, почему только ты так просто объясняешь, знал бы про тебя раньше, не записывался бы на платные курсы(
Как ни странно с видеоуроков впитывается инфа легче, нежели текстом.
Основы проходил неделю плотно перечитывая, а здесь хватает два раза урок пересмотреть, респект =)
Суперское видео, по чаще бы выходили подобные уроки, все подробно и ясно!!
Это самый лучший урок по методам массивов! Благодарю! 💐
Огромное спасибо за эту колоссальную и прекрасно выполненную работу!
Ещё не посмотрел и половины уроков, просто увидел новое видео и зашёл поставить лайк и комментарий не глядя! Спасибо за труд и успехов каналу!
Отправляю свою благодарносиь и безмерную любовь за доступность объяснений!!!
Большое спасибо за ваши видео, очень помогают! А будет практическое написание чего либо?
Евгений, большое спасибо за ваши уроки! у вас дар рассказывать, так что не понять не возможно!
Спасибо за урок , Женя . Массивы - классная вещь !
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье
Огроменное спасибо за уроки, а также за конспекты к ним!!! Очень удобно, потом еще раз глянуть, если забыл. Читаю книгу по js и все равно смотрю видео здесь, чтобы уъяснить до конца, не все из книги в голову ложится( В общем, спасибо!
Женя, огромное спасибо за урок! Успехов и удачи по жизни!
Спасибо большое за урок, Евгений! С нетерпением буду ждать следующего) Респект!
Отличная подача материала!!!А главное все ясно и понятно с первого раза!!! Благодарю!!!
Огромное спасибо за видео, так ещё и материалы с урока скачать можно, ну что за чудо!
Женя, спасибо больше за видео! Просмотрела весь плейлист по JS - подача материала замечательная, кратко и понятно.
Спасибо большое. Лучший курс по JS!!! Ждём продолжения :-)
В параметр previousValue, при каждом следующем шаге перебора, записывается результат функции (с помощью return)
============================================================================================================
sort :
1) сравнивается правый элемент с левым (не наоборот). Т.е. в [2, 6, 0, 9] - аргументами 'a' и 'b' будут '6' и '2' соответственно.
2) если результат функции-компарэра (при очередном последовательном сравнении двух элементов) возвращает ПОЛОЖИТЕЛЬНОЕ число - сортировка поставит b по меньшему индексу, чем a. ОТРИЦАТЕЛЬНОЕ - сортировка поставит a по меньшему индексу, чем b, то есть, a идёт первым. Если 0 - сортировка оставит a и b неизменными по отношению друг к другу.
Как всегда твои видео меня круто растормаживают. Специально этот раз шел в ютуб, искал массивы и надеялся увидет массивы на данном канале.
Спасибо что стараешься доступно донести инфу!
помню как читал это на learnjavascript, ушло не менее 3 часов, чтобы все внимательно прочитать и понять, а ты это за 40 минут объяснил, сэкономил тысячам человек кучу времени, спасибо!
Эх, Женя, это всё так нужно этому миру, спасибо ) Желаю, чтобы побыстрее всё закончилось.
Спасибо за ролик! Пришло время вспомнить массивы
Отличный урок, то что искал, все доходчиво объяснил ,с примерами и даже домашка есть :)
Буду ждать аналогичный урок по объектам )
Женя, большое спасибо, очень полезное видео! Хотелось бы видеть и дальше новые видео по js :)
Огромное тебе спасибо за твои труды. Просто лучший!
Дякую! Дуже інформативно, концентровано і зрозуміло!
Очень полезное начинание. Когда выйдут все курсы их нужно издать как книгу.
Спасибо большое за уроки, Жека! Ждем больше видосов на тему JS. Никто кроме тебя так качественно и мастерски не объясняет!)
Женя огромное спасибо за твой труд!)
Отдельное спасибо за домашки в конце роликов!
Ждём с нетерпением следующее видео по js 🙏😉👍📚
самый понятный видеоурок по методу reduce. спасибо за труд.
Тольяко я взялся разбираться с массивами - сразу оперативно видео подъехало. Как там говорится, по зову сердца
Спасибо ты очень крут. Твоя подача материала очень понятна, а материал несет максимальную пользу
Жека, велике спасибі за такий класний контент. Чекаю з нетерпінням WordPress.
Ютуб часто рекомендовал твое видео, но я как-то никак не мог посмотреть. После просмотра, сразу же подписался и поставил лайк. Материал разложен просто на атомы как раз для таких чайников как я. Все предельно ясно и понятно. Спасибо тебе автоР!!!
Спасибо!!!Разобрался, законспектировал. Иду дальше.
Классное видео! Спасибо за подробное объяснение.
Отличный урок. Видно, что наш Фрилансер работает над улучшением подачи от урока к уроку. Ждем DOM.
спасибо за мега-полезный урок, за то что продолжаете, не смотря на то что так мало лайков и просмотров
Опять кайфую, супппппер!!!!!!!!!!!!!!
Я рад!
Cпасибо за труд! Все было мною законспектировано! Теперь осталось все выучить)))
задача 1
4
задача 2
let arr=["Ваня","Иштван"];
let arrUsers=arr;
arrUsers.push("Оля");
console.log(arrUsers);
arrUsers.splice(1,1,"Петя");
console.log(arrUsers);
let removed=arrUsers.splice(0,1);
console.log(removed[0]);
arrUsers.splice(0,0, "Маша","Паша");
console.log(arrUsers);
Задача 3
let arr=["Ваня","Иштван","Оля"];
let arrOne=arr.splice(1,1);
console.log(arrOne);
Задача 4
let str="Ваня, Иштван, Оля";
let arr=str.split(",,");
console.log(arr);
Задача 5
9
Thank a lot of!
// №_1
// Выведется число 4(length - длинна). В переменную "newArr" мы присвоили ссылку на массив "arr", и после этого добавили новый элемент - 'Петя';
// Таким образом у обоих переменных меняется значения массива. При их сравнении выдаст "true":
let arr = [ 'Ваня', 'Иштван', 'Оля', ];
let newArr = arr;
newArr.push('Петя');
console.log(arr.length);
console.log(newArr === arr);
// №_2
//1
const users = [ 'Ваня', 'Иштван' ];
//2
users.push('Оля');
//3
users[1] = 'Петя';
// 4
console.log(users.indexOf( ' Петя' ));
//5
const removedUser = users.shift();
console.log(removedUser);
//6
users.unshift( 'Маша', 'Паша' );
console.log(users);
// №_3
// Метод "splice" позволяет: удалять, заменять, добавлять - элементы; splice(начало, сколько, добавление элементов);
let arr2 = [ 'Ваня', 'Иштван', 'Оля', ];
let removedElement = arr2.splice(1, 1);
console.log(removedElement);
// №_4
// Метод "split" разделяет строку на элементы в массив. Дополнительно можно указать кол-во элементов, которые попадут в массив: split( 'разделитель', кол-во элементов );
let str = ' Ваня,Иштван,Оля ';
let strArr = str.split( ',' );
console.log(strArr);
// №_5
// previousValue в начале работы метода равен - 9;
// Если в методе "reduce" не указывается второй аргумент(значение "previousValue"), то начальное его значение будет - значение первого элемента массива, и при этом "item" - будет вторым элементом массива;
в №2 нужно удалить первый элемент массива и показать его.
где у вас это сделано?
let users = ['Ваня' ,'Иштван'];
users.push('Оля');
console.log(users);
users[1]='Петя';
console.log(users);
users.shift();
console.log(users);
users.unshift('Маша', 'Паша');
console.log(users);
вроде так нужно, если нет то поправьте пожалуйста!
я думаю здесь нужно было так:
let arr = [ 'Ваня', 'Иштван', 'Оля', ];
delete arr[0];
console.log(arr[0]);
В №5 будет ошибка, так как не существует переменной arrTwo
@@gnom_gnomych7420 браво!
спасибо больщое forEach я эрого метода ждала. Будте всега здоровым и такимже добрым.
Вместо просмотра сериала. Самое то!💪
огромное спасибо!!! прям в голове посветлело после просмотра!
Спасибо 🙏 за ваши труды
учусь онлайн на курсах, все темы закрепляю просматривая ваши ролики, Евгений спасибо и низкий поклон за ваши труды!
39:36 В задаче 5 подвох. Объявили массив arr, а редьюсим arrTwo.
Или просто опечатка)
Большое спасибо Евгений, очень полезное видео.
reduce прикольно объяснил. Жду скорее DOM и практику) Спасибо
Жека, не перестаю дивуватися скільки ж ти сил витратив на ці уроки. Велике тобі дякую
Не буду лохматить бабушку, всё классно, понятно, спасибо тебе в 49 раз (иду по плейлисту) Как всегда ты The Best!
Сейчас посмотрю и буду ждать следующего видео по JS)
В очередной раз огромное спасибо! Жека, подача темы на уровне, правда не все понял, ну ниче, пойду практиковать, лайк
Это гениально, спасибо.
Дякую. Думав ніколи не зрозумію, як працювати з масивами))) Як завжди все на висоті!
Ого, прям как доктор прописал 😁 Я как раз вчера прошел видео о строках и, когда ты обращался по id (через [ ] ), задумался, что будет дальше... вряд-ли сразу DOM(но чувствую, что скоро будет 💪), а вот как раз о массивах ещё не было. Клёво, сегодня обработаю😁
Да, верно)
Спасибо за труды!😊
Просто лучший!!! Спасибо тебе огромнейшее!!!!!!!!!!
Пожалуйста!
спасибо большое!!! каждое слово в конспект!👍
С первого просмотра я четко усвоил, что массив - это не отдельный тип данных и что теперь рыжий кот во дворе будет именоваться Иштван! Серенький уже почти год гордо носит имя Лоци)
Спасибо большое за Ваш канал!
Пишу комментарий лучшему учителю, спасибо за ваши старание, за то что выпускайте подобные курсы, очень хорошая подача очень познавательно и классно, желаю автору здоровья мира и успехов!
Головне щоб фашисти пішли в свою рашку, тоді ми вернемось до життя
Спасибо за отличный контент!
Пожалуйста!
"Давайте не будем лохматить бабушку" - возьму на вооружение 🤣😂
Так, лайк поставил, видос посмотрю завтра с утра))
Жека, только, пожалуйста, продолжай! Твой курс по JS очень нужен! Хотя бы минимум инфы для верстки.
Большое спасибо!! Очень помогает в изчении! Респект ))))
Всем привет)
Речь идёт о методе concat (15:23).
Кроме создания нового массива на основе прежнего с добавлением нового(-ых) значения(-bq) можно объединять два разных массива в один общий.
Пример:
let arrOne = ['Ваня', 'Иштван', 'Оля',]; // 1-st array
let arrTwo = ['Егор', 'Ильдар',]; // 2-nd array
let arrThree = arrOne.concat(arrTwo); // combining two arrays
console.log(arrThree); // 3-rd array, derivative two arrays
Блин, спасибо за инфу, ещё не проверил, но обязательно пробну в VScode!
Проверил, реально работает! Спасибо добрый человек!
Спасибо за полезный контент! =)
Спасибо, как всегда шикарно
Женя, ты - профи!!! Все просто и понятно. P.S. В 5 задании опечатка: вместо arrTwo должен быть arr
Урок по массивам прям такой массивный!)))) Даже урок про объекты переплюнул!!!))) (по времени).
Наконец то у меня стало проясняться в голове по массивам. Спасибо огромное, за доскональное разъяснение массивов и что с ними можно делать. Прямо выручили.
Спасибо огромное.Как обычно круто!!!!!!!!
Очень интересно,полезно и доходчиво ! спасибо! с меня лайкосик
1-43 От начала до конца просмотрел весь курс:
"БЕСПЛАТНЫЙ курс по верстке сайтов (Front End). Уроки HTML CSS JS // Фрилансер по жизни
Фрилансер по жизни - IT и фриланс".
А что-то из курса и по несколько раз для понимания и усвоения информации. Но в основном материал подан на ложечке и разжёвано, воспринимаешь и понимаешь сразу. Евгений спасибо за Огромный проделанный труд! Желаю Тебе успехов и не останавливаться на достигнутом, как и всем твоим подписчикам! Круто!!!
кладезь полезной информации 🐱🏍