Массивы в JAVASCRIPT. Методы массивов.  Редактирование, поиск, сортировка. Уроки JavaScript с нуля

Массивы в JAVASCRIPT. Методы массивов. Редактирование, поиск, сортировка. Уроки JavaScript с нуля

272,424 Просмотров

Массив – это особый подвид объектов. Он позволяет нам хранить данные, но, в отличии от объектов, мы можем управлять этими данными более гибко. Как работать с массивами и применять различные методы мы сейчас и разберемся! Но то, что действительно делает массивы особенными – это их внутреннее представление. Движок JavaScript старается хранить элементы массива в непрерывной области памяти, один за другим. Существуют и другие способы оптимизации, благодаря которым массивы работают очень быстро. Но все они утратят эффективность, если мы перестанем работать с массивом как с «упорядоченной коллекцией данных» и начнём использовать его как обычный объект. Массивы тщательно настроены в движках JavaScript для работы с однотипными упорядоченными данными, поэтому, пожалуйста, используйте их именно в таких случаях. Если вам нужны произвольные ключи, вполне возможно, лучше подойдёт обычный объект { }.

👉 Файлы урока - https://fls.guru/files/tutorials/js/js-array.zip

🔴 Карта канала: http://bit.ly/36r29xV
🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle
🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat)
🔴 Facebook: https://www.facebook.com/freelancerlifestyle
🔴 Instagram: https://www.instagram.com/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 - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle

🤟 Живи, а работай в свободное время! ©

Тэги:

#фрилансер_по_жизни #javascript #js #уроки_javascript #javascript_уроки #Уроки_JAVASCRIPT_с_нуля #основы_javascript #уроки_js #уроки_js_2020 #уроки_js_для_начинающих #js_уроки_специалист #javascript_с_нуля #javascript_для_начинающих #js_уроки #javascript_курс #javascript_основы #массивы_javascript #многомерные_массивы_javascript #javascript_массивы_методы #массивы_и_объекты_в_javascript #массивы_и_функции_в_javascript #массивы_и_циклы_в_javascript #методы_массивов
Ссылки и html тэги не поддерживаются


Комментарии:

Arcadii Babici
Arcadii Babici - 06.09.2023 16:48

Спасибо за труды!😊

Ответить
Natalya Galyamova
Natalya Galyamova - 25.08.2023 18:50

Это самый лучший урок по методам массивов! Благодарю! 💐

Ответить
qurt.
qurt. - 18.08.2023 09:50

самый понятный видеоурок по методу reduce. спасибо за труд.

Ответить
Филипп Житнюк
Филипп Житнюк - 20.07.2023 16:29

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

Ответить
Libertarian Communist
Libertarian Communist - 09.07.2023 13:57

1. Длина будет 4, так как это просто ссылка на массив и изменятся оба массива.
2. let users = ['puk', 'srenk'];
users.push('shmyak');
users.splice(users.indexOf('srenk'), 1, 'shpunk');
console.log(users.shift());
users.unshift('masha', 'pasha');
3. let arr = ['Ваня', 'Иштван', 'Оля'];
let el = arr.splice(arr.indexOf('Иштван'), 1)[0];
console.log(el);
4. let str = 'Ваня, Иштван, Оля';
let arr = str.split(', ');
console.log(arr);
5. Если не указывать начальное значение аргументом в reduce, то оно просто равняется первому элементу (9), item'ом же оказывается второй элемент (2). После же выполнения console.log previous станет undefined, так как лог ничего не возвращает.

Ответить
Alexandr S.
Alexandr S. - 08.06.2023 00:28

Дякую. Думав ніколи не зрозумію, як працювати з масивами))) Як завжди все на висоті!

Ответить
Юрій Даньо
Юрій Даньо - 29.05.2023 01:08

Жека, велике спасибі за такий класний контент. Чекаю з нетерпінням WordPress.

Ответить
Илья
Илья - 22.05.2023 17:00

А как поменять местами два элемента в массиве ?

Ответить
Кирилл Королев
Кирилл Королев - 26.04.2023 13:53

"Давайте не будем лохматить бабушку" - возьму на вооружение 🤣😂

Ответить
АУ ЯН
АУ ЯН - 19.04.2023 13:41

Тем кто, как и я, сразу не въехал в метод reduce, мои пояснения к первому примеру:
// Шаг №1. previousValue = initial=0, item = 1,
// Шаг №2. previousValue = return 1го круга = 1 + previousValue на старте=1 + 0, item = 2,
// Шаг №3. previousValue = return 2га круга = 2 + previousValue 1го круга= 2 + 1+0, item = 3,
// Шаг №4. previousValue = return 3го круга = 3 + previousValue 2го круга= 3 + 2+1+0 , item = 4, их сумма = 10
Надеюсь помог 😊

Ответить
АУ ЯН
АУ ЯН - 13.04.2023 10:52

Сенсею Евгению, как обычно, лайк и благодарность, за его прекрасный труд. Но синтаксис у методов такой, что я бы точно нихуя не понял, если бы не примеры сенсея! Какие сволочи его придумывали, он же написан максимально не понятно, не понятнее только если добавить иероглифы!

Ответить
Martinenko Alex
Martinenko Alex - 12.04.2023 18:02

Жека крут как всегда! Привет из Одессы! Добра и мирного неба!

Ответить
Вика Оношко
Вика Оношко - 08.04.2023 21:49

Спасибо огромное.Как обычно круто!!!!!!!!

Ответить
LASAGNA
LASAGNA - 18.03.2023 22:30

Решение . Задачи №2

// Создаем массив с элементами 'ваня' и 'Иштван'
let users = ['ваня', 'Иштван'];

// Добавляем "Оля" в конец
users.push('Оля');

// Находим индекс элемента "Иштван"
let index = users.indexOf('Иштван');

// Если нашли, то заменяем его на "Петя"
if (index !== -1) {
users[index] = 'Петя';
}

// Удаляем первый элемент массива и показываем его
// let firstUser = users.shift();
//или
let firstUser = users.splice(0, 1);
console.log(firstUser); // 'ваня'

// Вставляем "Маша" и "Паша" в начало массива
users.splice(0, 0, 'Маша', 'Паша');
//или
//users.unshift('Маша', 'Паша');


console.log(users); // ['Маша', 'Паша', 'Петя', 'Оля']

Ответить
Yeva
Yeva - 14.03.2023 22:34

Домашка. Задача 5. Не 'arrTwo', a 'arr'. В противном случае, PreviousValue ничему не равен)) Опечатался.

Ответить
Bob
Bob - 07.03.2023 15:59

Я не очень понял про function(item, index, array)
Как массив понимает какие аргументы использовать?

Ответить
Дар'я
Дар'я - 03.03.2023 12:16

Ви - надзвичайний вчитель!

Ответить
Oleh Sokolov
Oleh Sokolov - 02.03.2023 20:55

Большое спасибо!! Очень помогает в изчении! Респект ))))

Ответить
Назар
Назар - 23.02.2023 21:36

Никто не думал над решением задачки №3 в контексте если мы не знаем позиции/индекса "Иштван"?
Как по мне решение больше схоже данной конструкцией:
const users = ["Ваня", "ff", "Иштван", "Оля"];

const ishtvan = users.splice(users.indexOf("Иштван"), 1);

console.log(ishtvan);
console.log(users);


//В данном случае, даже добавив новый элемент или изменив порядок всё будет работать

Ответить
Sorin Lungu
Sorin Lungu - 15.02.2023 21:01

хорошо хоть что наш Ваня не поменялся на Дашу

Ответить
Faradenza
Faradenza - 12.02.2023 22:32

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

Ответить
Илья Корж
Илья Корж - 08.02.2023 23:57

в мене сорт відсортував цифри у зростанні без функції .

Ответить
Сливон Депозитов
Сливон Депозитов - 25.01.2023 14:51

В параметр previousValue, при каждом следующем шаге перебора, записывается результат функции (с помощью return)
============================================================================================================
sort :
1) сравнивается правый элемент с левым (не наоборот). Т.е. в [2, 6, 0, 9] - аргументами 'a' и 'b' будут '6' и '2' соответственно.
2) если результат функции-компарэра (при очередном последовательном сравнении двух элементов) возвращает ПОЛОЖИТЕЛЬНОЕ число - сортировка поставит b по меньшему индексу, чем a. ОТРИЦАТЕЛЬНОЕ - сортировка поставит a по меньшему индексу, чем b, то есть, a идёт первым. Если 0 - сортировка оставит a и b неизменными по отношению друг к другу.

Ответить
Radridzi Popadzuki
Radridzi Popadzuki - 22.01.2023 15:57

Ой, вэй!!! Чувствую на массивах мои полномочия "всё"))))))
Хотя, если раза три пересмотреть на разной скорости, может и победююю эту тему. Не думаю, что это будет сложнее, чем найти принципиальные отличия Новосвободненской и Майкопской культур на госэкзамене, к которому не готовился из-за гулянок и микса из патологической лени и тупости))))

Ответить
Alan Puch
Alan Puch - 19.01.2023 10:25

Большое спасибо Евгений, очень полезное видео.

Ответить
Мария Зеленская
Мария Зеленская - 15.01.2023 19:05

спасибо большое!!! каждое слово в конспект!👍

Ответить
Михаил
Михаил - 14.01.2023 23:11

Хочу добавить, что не указана самая главная особенность метода lastIndexOf(), а именно возвращение последнего индекса, по которому элемент может быть найден в массиве.
Допустим у нас есть массив arr = ['Ваня', 'Иштван', 'Петя', 'Иштван',];
дальше попробуем найти Иштвана:
console.log(arr.lastIndexOf('Иштван')); // Получим 3, а не 1, так как последние появление в массиве было под индексом 3
но если мы начнем искать со второго индекса(Петя), то получим другой результат:
console.log(arr.lastIndexOf('Иштван', 2)); // Получим 1, а не 3, так как ищем с конца к началу (2->1->0)

Ответить
Евгений Повещенко
Евгений Повещенко - 14.01.2023 13:29

Эх Жека, жаль нет у тебя курса по Java (

Ответить
Максим да
Максим да - 06.01.2023 22:25

тут є пасхалка якась, яку повʼязати можуть історики. задля цікавості подивився хто такий іштван. а ще оля, вона ж княгиня ольга. десь за тих самих часів була.
Автор, якщо массони сховали від нас таємний сенс - потребуємо пояснення!

Ответить
MADARA SAN
MADARA SAN - 23.12.2022 19:11

Разбейте урок на 3-4 части при просмотре если смотреть залпом можно расстроиться и впасть в депрессию от сложности материала

Ответить
Alexandr Lukashevich
Alexandr Lukashevich - 23.12.2022 00:29

5 задание дано с опечатками: название массива, с которым работает функция и вывод значения переменной previousValue. При такой записи у меня получается undefined.

переписал вот так:
//Задача 5
let arr5 = [3,5,7];
let qwe = arr5.reduce(function(previousValue, item, index, arr) {
return previousValue;
});
console.log(qwe);

Ответить
Дмитро Целуйко
Дмитро Целуйко - 13.12.2022 17:27

Дякую за відео! Як завжди - просто топ!

Ответить
RED
RED - 08.12.2022 19:34

2#

let arr = ['Ваня', 'Иштван']
arr.push ('Оля');

let setArr = arr.indexOf('Иштван', 0)
arr.splice(setArr, 1, 'Петя')
console.log(arr)

console.log(arr.shift())
console.log(arr)

arr.unshift('Маша', 'Паша')
console.log(arr)

Ответить
Sorstrommen
Sorstrommen - 04.12.2022 21:28

Всем Салам Алейкум, у меня работает метод sort и на number, может быть обнова и теперь можно так делать ?

Ответить
Максим Рєзніченко
Максим Рєзніченко - 02.12.2022 12:41

Amazing! я вражений

Ответить
#ЧУДОТЕХНИКИ с Георгием Беловым
#ЧУДОТЕХНИКИ с Георгием Беловым - 01.12.2022 16:21

Огромное спасибо за эту колоссальную и прекрасно выполненную работу!

Ответить
daniyar g
daniyar g - 06.11.2022 17:05

поставил лайк за Иштвана😂

Ответить
Andeveloper
Andeveloper - 30.10.2022 17:15

есть один вопрос к первой задаче
а если записать максимально компактно ?
let arr = ['name', 'name', 'name',];
console.log(newArr = arr.push('name'));
есть какая-то разница ?
vs code выполнил без ошибок = 4
хоть и нет length...

Ответить
Галина Кузнецова
Галина Кузнецова - 28.10.2022 08:54

Спасибо,супер!Всё понятно

Ответить
Andrii Shymkiv
Andrii Shymkiv - 26.10.2022 20:02

Дякую!

Ответить
Татьяна
Татьяна - 16.10.2022 23:48

Добрый вечер. Я начала изучать JS, с сентября прохожу онлайн курсы. Скажите пожалуйста, как мне сделать так, чтобы я тоже так могла в Консоли смотреть результат своего кода. Это программа у меня есть. Мне нужно просто сохранять файл в js формате. А как его потом открывать в браузере? Просто выбирать Открыть с помощью ? Или как-то по другому?

Ответить
Konstantin
Konstantin - 07.10.2022 00:22

почему при сортировке методом sort(fn), у нас в консоль дважды выводится сравнение 8 и 22?

Ответить
BE HAPPY
BE HAPPY - 30.09.2022 00:54

А почему для копирования массива не использовать спред оператор?

Ответить
Влад Цяпка
Влад Цяпка - 22.09.2022 15:57

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

Ответить
Vlad Dubovyi
Vlad Dubovyi - 13.09.2022 11:18

получим 4

Ответить
Mayhem
Mayhem - 08.09.2022 18:10

Задача №5 на внимательность? :)
вместо arrTwo должно быть arr ? Правильно?

Ответить
СМЕРТЬ TV
СМЕРТЬ TV - 06.09.2022 21:43

Очень интересно,полезно и доходчиво ! спасибо! с меня лайкосик

Ответить
Андрій Мендель
Андрій Мендель - 15.08.2022 13:17

Спасибо!!!Разобрался, законспектировал. Иду дальше.

Ответить