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

Back end — 08/10/2022 · 50 Comments



Массив – это особый подвид объектов. Он позволяет нам хранить данные, но, в отличии от объектов, мы можем управлять этими данными более гибко. Как работать с массивами и применять различные методы мы сейчас и разберемся! Но то, что действительно делает массивы особенными – это их внутреннее представление. Движок 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

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

50 Comments

  1. Ну все, дальше DOM!
    🔴 Карта канала: 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

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

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

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

  12. Часто слышал , что при изучении одного языка программирования , остальные языки покажутся легче , так как имеют много похожего друг с другом. Так вот , всем тем кто учит сейчас js , могу сказать , что изучив досконально его на новые языки вы будете тратить где-то на 60% времени меньше , пусть это будет дополнительной мотивацией!

  14. У тебя ошибка в lastIndexOf он не считывает индекс с право на лево счет ведется точно так же как и indexOf, просто если в массиве 2 или более одинаковых искомых значений он выдает индекс последнего значения, от того и last в названии, новички которые так же застрянут на этом как и я, получат ценный опыт, что лучше проводить проверку, на разных ресурсах, а не только в одном, а то как я заметил некоторые люди вдохновились твоим видео. Если что я пишу это просто чтоб помочь новичкам, которые тоже застрянут, а не чтоб оскорбить автора, иначе не учился бы по его видео, вообщем спасибо бро)

  15. Смотрю Женю уже после того, как прошёл тему на learn javascript, становится и понятно, что говорит, и помогает как-то более легко запомнить и упорядочить информацию)

  16. Меня немного напрягает что иногда есть не нужная информация, например много очевидно понятных вещей, также изучение особых ситуаций, которые встречаются крайне редко и если нужно их решить, то всегда есть интернет, я посмотрел и понял курс дня за 4, но могло быть быстрее если бы вы опустили такие моменты. Во всяком случае спасибо)

  17. домашнее задание для тех у кого нет возможности проверить или что то не получается или вдруг кто захочет посмотреть как его выполнил я
    (ДАННОЕ ДОМАШНЕЕ ЗАДАНИЕ НЕ ЯВЛЯЕТСЯ НА 100% ПРАВИЛЬНЫМ! у каждого может быть свой вариант..)
    1.задание:
    4
    2. задание
    let users = ['Ваня', 'Иштван'];

    users.push('Оля');

    let keyName = users.indexOf('Иштван');

    if (keyName => 0) {

    users.splice(keyName,1, 'Петя');

    } else {

    console.log('Имя Петя не найдено');

    }

    console.log(users.shift());

    users.unshift('Маша', 'Паша');

    console.log(users);

    3. задание
    let users = ['Ваня', 'Иштван', 'Оля'];

    let deleteArray = users.splice(1,1);
    4. задание
    let str = 'Ваня,Иштван,Оля';
    let array = str.split(',')
    5. задание
    выведет ошибку ведь мы неправильно обращаемся к массиву…

  18. " Не будем лохматить бабушку" ТОП, а якщо серйозно то матеріал як завжди класний , дякую ти викладач від Бога

  19. Добрий день. Дуже дякую за те, що ви робите. Дуже цікаво та доступно розповідаєте. Підкажіть будь ласка. Як можна перебрати масив від невеликого числа до великого, використовуючи цикл for і if?

  23. 22:32 я наверное психом стану под конец, если доживу, каким образом console.log понимает, что принимается за "а" а что за "б", не понятен не один способ

  24. ДОМАшка:
    1) 4
    2) users = ["Ваня", "Иштван"];

    users.push("Оля");

    console.log(users);

    users.splice(users.indexOf('Иштван'), users.indexOf('Иштван'), 'Петя');

    console.log(users);

    let removed = users.splice(0, 1);

    console.log(removed);

    users.unshift("Маша", "Паша");

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

    let removed = arr.splice(arr.indexOf('Иштван'), 1);

    console.log(removed);
    4) let str = 'Ваня,Иштван,Оля';

    let arr = str.split(',');

    console.log(arr);
    5) 9.

  27. // Задача №1.
    //получим длину массива 4 тк в нем 4 элемента

    // Задача №2.
    let users = ['Ваня', 'Иштван',];

    console.log(users);

    // задаем массив и проверяем что у нас есть

    users.push('Оля');

    console.log(users);

    //добавляем Олю и проверяем

    position=users.indexOf( 'Иштван' )

    users.splice(position, 1, 'Петя');

    console.log(users);

    // определяем позицию Иштвана (индекс) чтобы этот код работал для любого массива независимо от того где именно находится значение Иштван. соответственно заменяем учитывая эту позицию из переменной. последней строкой проверяем "чокаво"

    let removed = users.splice(0, 1);

    console.log(removed);

    console.log(users);

    //удаляем первый элемент в переменную и показываем элемент и что осталось в массиве

    users.unshift('Маша', 'Паша');

    console.log(users);

    //вставляем спереди 2 элемента и выводим для проверки

    // Задача №3.

    // Удалить элемент 'Иштван' и возвратить его в переменную

    let arr2 = ['Ваня', 'Иштван', 'Оля',];

    position2=arr2.indexOf( 'Иштван' )

    let removed2 = arr2.splice(position2, 1);

    console.log(removed2);

    console.log(arr2);
    // тут аналогично первому заданию удаляем Иштван в переменную предварительно определив его позицию чтобы работало для любого массива независимо от положения и длины и выдаем переменную и то что осталось в массиве

    // Задача №4.

    //Сделать из строки массив

    let str = 'Ваня,Иштван,Оля';

    console.log(str);

    let arr3 = str.split(',');

    console.log(arr3);
    // тут все просто, только использовать верный оператор

    // Задача №5.

    // Чему равен previousValue в начале работы метода?

    let arrTwo = [9, 2, 8,];

    let reduceValue = arrTwo.reduce(function (previousValue, item, index, array) {

    console.log(previousValue);

    });

    //равен первому элементу то есть 9

  31. давайте ставить лайки по больше, репостить и тд, чтоб

    Женя продолжал делать уроки по js 😭😭😭

    Они действительно помогают, полезные

  32. 1. 4;

    2. let users = ["Ваня", "Иштван"];

    users.push("Оля");

    console.log(users);

    users.splice(1, 1, "Петя");

    console.log(users);

    delete users[0];

    console.log(users);

    users.unshift("Маша", "Паша");

    console.log(users);

    3.

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

    let removed = arr.splice(1, 1);

    console.log(removed);

    4. let str = 'Ваня,Иштван,Оля';

    let arr = str.split(',');

    console.log(arr);

    5. 9.

  33. Доброго вечора, ми з України!)
    Домашка:
    1) 4;

    2) let users = ["Ваня", "Іштван",];
    users.push("Оля");
    users[1] = "Петя";
    let removed = users.shift();
    console.log(removed);
    users.unshift("Маша", "Паша");

    3) let remove = are.splice(1, 1);
    console.log(remove);

    4) let str = ("Ваня, Іштван, Оля");
    let arr = str.split(",");
    console.log(arr);

    5) 9

    Дякую за урок!!!

  34. В очередной раз огромное спасибо! Жека, подача темы на уровне, правда не все понял, ну ниче, пойду практиковать, лайк

  37. А почему find поиск в массиве именно объектов? Вроде же с помощью него можно искать вообще все что угодно

  38. Домашка:
    2 – частично:
    let users = ['Ваня', 'Иштван'];

    users.push('Оля');

    console.log(users);

    users.forEach(function(item, index, array) {

    if (item === 'Иштван') {

    console.log(`Новое имя Иштвана: под номером ${index}`);

    users.splice(index, 1, 'Петя', );

    }

    console.log(`${item} находится на ${index} позиции в ${array}`);

    })

    console.log(users);

  42. 40 минут про массивы, а когда я в школу устраивался мне говорили объяснить их за 5 для дошкольников))

  43. Может кому нибудь поможет мое решние 2 задачки
    let users = ["Van", "Isht"];

    users.push("Ola");

    let loc = users.indexOf("Isht");

    users[loc] = "Petr";

    let buff = users[0];

    users.shift();

    console.log(buff);

    users.unshift("Masha", "Pasha");

    console.log(users);

  44. 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" – будет вторым элементом массива;

  45. Хм, Иштван- наверное популярное имя в Ужгороде? Спасибо за классный урок! Все буде Україна! 💙💛

  46. И наконец, домашка!

    Задача №1:
    Длинна равна 4ём, ведь создавая новый ключ к массиву, мы работаем с тем же массивом. И делая изменения по одному ключу, можно считывать результат по другому.

    Задача №2:
    let arr = ['Ваня', 'Иштван',]; //создали массив
    users.push('Оля'); //добавили Олю
    простым решением замены станет users.splice(1, 1, 'Петя');
    Но что, если В массиве у Иштвана есть тезка? Давайте попробуем заменить всех. Для этого выполним цикл while, который будет искать индекс Иштвана методом users.indexOf('Иштван') и заменять его Петей уже знакомым методом из простого решения users.splice(users.indexOf('Иштван'), 1, 'Петя'). Наш цикл будет выполняться, пока существование такого типа, как Иштван = true. users.includes('Иштван'). Итак:
    while (users.includes('Иштван')) {

    users.splice(users.indexOf('Иштван'), 1, 'Петя');

    };
    console.log(users.shift()); //удалим первый элемент и сразу выведем его в консоль
    users.unshift('Маша', 'Паша'); //добавим в начало двух, надеюсь, замечательных людей.

    Задача №3:
    Очень хотелось снова начать изымать всех Иштванов, но одного раза достаточно.
    let removed = arr.splice(arr.indexOf('Иштван'), 1); //Иштван не спрячется, даже если прыгнет на другой Индекс

    Задача №4:
    let arr = str.split(','); //берешь и преобразуешь без заморочек

    Задача№5:
    Ну на самом деле ошибку, ведь arrTwo мы не задавали. Не знаю, это задача на внимательность или еще что-то. Если же заменить arrTwo на объявленный ранее arr, то в previousValue запишется первый элемент массива из-за того, что не указан initial после функции. Ответ 9.

    Спасибо за материал и старания, вторая задача дала пусть и небольшой, но простор для размышлений. Побольше бы подобных, да, на закрепление, но и для повторения предыдущих уроков в связке.
    Всем мира, искренне переживаю за Жеку, его моральное здоровье и устойчивость. Конечно и безопасность всего народа. Сожалею на протяжении уже многих лет о том, что творит страна в которой я родился и вырос. С 2014 страданий своих граждан стало мало и вzор упал на соседей. Всех неравнодушных крепко обнял.

  47. Эх, Женя, это всё так нужно этому миру, спасибо ) Желаю, чтобы побыстрее всё закончилось.

  48. Без шуток. Я читал learnJS и люто не понимал, как бы не пробовал перечитывать снова и снова..
    А потом просто посмотрел это видео. И всё. Теперь я разобрался во всех методах.
    Спасибо огромное автору! Подписался! Очень хорошо объясняете!

  50. все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье

Leave a Reply

© 2023 53GB