Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Массив

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

Обзор методов

Обилие методов не означает автоматически, что начинающему программисту непременно необходимо "зазубрить" их все, в этом нет никакой необходимости. Во-первых, запоминание и понимание методов будет постепенно приходить по мере постоянного использования их в своей практике написания кода. Со временем многие основные потребные вам методы вы будете знать и так хорошо, а все остальные можно легко подсмотреть в документации. Во-вторых, не надо зацикливаться и забивать голову многочисленными названиями и частными вариантами синтаксиса методов. Гораздо важнее сформировать в голове приблизительную картину того, что вообще могут делать рассматриваемые методы с массивами, т.е. сделать мысленную классификацию методов по базовому типу воздействия, например так:

  • добавление элементов в начало или конец массива, удаление элементов из начала или конца массива (shift, unshift, pop, push). Эта группа методов позволяет работать с массивом как с очередью (метод доступа FIFO) или стеком (метод доступа LIFO). Давайте подробнее рассмотрим это на примере:

    // инициализируем демонстрационный массив
    const planets = ['Mercury', 'Venus', 'Earth', 'Mars'];
    
    // Очередь является упорядоченным набором данных, организованным по принципу FIFO ('first in - first out'), т.е. добавление элементов всегда происходит в конец очереди, а извлечение (удаление) элементов - из её начала:
    
    // push добавляет один или несколько элементов в конец массива
    // и возвращает длину изменённого (мутированного) массива
    // (если точнее, то метод возвращает обновлённое свойство length массива,
    // являющееся значением самого последнего индекса, увеличенным на единицу)
    planets.push('Jupiter'); // возвращаемое значение: 5
    planets.push('Saturn', 'Uranus'); // возвращаемое значение: 7
    console.log(planets); // => [ 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus' ]
    
    // shift удаляет первый элемент массива и возвращает его значение
    planets.shift(); // удалили элемент из начала массива, возвращаемое значение: 'Mercury'
    planets.shift(); // ещё раз удалили элемент из начала массива, возвращаемое значение: 'Venus'
    console.log(planets); // => [ 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus' ]
    
    // Стек является упорядоченным набором данных, организованным по принципу LIFO ('last in - first out'), т.е. добавление и удаление элементов всегда происходит из конца такой коллекции:
    
    // добавим элемент в конец массива уже известным нам способом
    planets.push('Neptune'); // возвращаемое значение: 6
    console.log(planets); // => [ 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune' ]
    
    // pop удаляет последний элемент массива и возвращает его значение
    planets.pop(); // возвращаемое значение: 'Neptune'
    planets.pop(); // возвращаемое значение: 'Uranus'
    console.log(planets); // => [ 'Earth', 'Mars', 'Jupiter', 'Saturn' ]
    
  • рассмотренная в курсах "золотая троица" функций высшего порядка (map, filter, reduce, к которой ещё можно добавить reduceRight). После того, как мы на практике Хекслет реализовали их вручную самостоятельно, никаких затруднений в пользовании встроенными в язык методами (их аналогами "из коробки") быть не должно.

    // reduceRight - зеркальное отражение reduce, осуществляет свёртку, обрабатывая элементы справа налево
    const planets = ['Меркурий', 'Венера', 'Земля', 'Марс'];
    const closer = planets.reduceRight((acc, planet) => `${acc} ${planet}`, 'всё ближе к Солнцу:'); // 'всё ближе к Солнцу: Марс   Земля Венера Меркурий'
    const further = planets.reduce((acc, planet) => `${acc} ${planet}`, 'всё дальше от Солнца:'); // 'всё дальше от Солнца: Меркурий   Венера Земля Марс'
    
  • за "превращение" строки в массив, а так же за обратное действие отвечают, соответственно, split и join

    const planets = 'Mercury,Venus,Earth,Mars';
    console.log(planets.split(',')); // => [ 'Mercury', 'Venus', 'Earth', 'Mars' ]
    console.log(planets.split(',').join('-')); // => 'Mercury-Venus-Earth-Mars'
    
  • поиск в массиве и проверка соблюдения условий элементами массива (find, findIndex, indexOf, lastIndexOf, some, every, includes...)

    // includes определяет наличие элемента в массиве, возвращая true/false
    const planets = ['Mercury', 'Venus', 'Earth', 'Mars'];
    planets.includes('Earth'); // true
    planets.includes('Earth', 3); // ищет, начиная с 3-й индексной позиции, поэтому false
    planets.includes('Saturn'); // false
    
  • сортировка массива (sort, reverse...) и др. более или менее распространённые операции с массивами.

Попробуйте дополнительно произвести иное деление, введя "свой" классификационный признак, всё индивидуально, вооружитесь мнемоникой - и вперёд! :) С подобным пониманием уже будет не так сложно, как казалось, работать с документацией, которая может содержать от нескольких десятков до нескольких сотен функций по обозначенной теме.

К последнему утверждению следует добавить, что, как правило, существуют сторонние библиотеки, позволяющие не "изобретая велосипед" пользоваться множеством готовых функций "на все случаи жизни". Одной из наиболее актуальных на текущей момент javascript-библиотек является lodash, в которой реализованы различные функции по работе с массивами, коллекциями, строками и другими объектами языка. Не менее важно, что эта библиотека предоставляет множество неизменяющих (иммутабельных) функций высшего порядка, поддерживающих функциональный стиль программирования. Подробнее ознакомиться со всеми возможностями lodash можно на сайте библиотеки, а здесь мы в качестве примера приведём весьма часто используюмую на практике функцию flatten, которая содержимое вложенных элементов-массивов исходного массива делает элементами самого исходного массива (т.е. как бы "выравнивает" его). :) Звучит непонятно, но давайте просто посмотрим на код:

// обратите внимание, что далее рассматриваемые функции являются неизменяющими,
// поэтому они, не изменяя передаваемый им в качестве аргумента массив 'arr', будут возвращать новый массив
const arr = [1, 2, [1.1, 1.2, [2.1, [3.1, 3.2]]], 3];

// '_' - переменная, задаваемая при подключении lodash, через которую мы можем обращаться к разным функциям библиотеки
const flattenArr = _.flatten(arr);
console.log(flattenArr); // => [1, 2, 1.1, 1.2, [2.1, [3.1, 3.2]], 3]

// как видно из предыдущего примера, нам удалось 'выровнять' все элементы на один уровень ниже лежащих массивов.
// Однако элементы более глубоко лежащих массивов остались невыровненными.
// Для полного выравнивания существует метод 'flattenDeep'
const flattenDeepArr = _.flattenDeep(arr);
console.log(flattenDeepArr); // => [1, 2, 1.1, 1.2, 2.1, 3.1, 3.2, 3]

// с помощью 'flattenDepth(array, depth)' можно управлять уровнем 'глубины выравнивания',
// который указывается во втором параметре depth
console.log( _.flattenDepth(arr, 1)); // => [1, 2, 1.1, 1.2, [2.1, [3.1, 3.2]], 3]
console.log( _.flattenDepth(arr, 2)); // => [1, 2, 1.1, 1.2, 2.1, [3.1, 3.2], 3]
console.log( _.flattenDepth(arr, 3)); // => [1, 2, 1.1, 1.2, 2.1, 3.1, 3.2, 3]

Изменяемость VS Неизменяемость

Модификация массива (изменение объекта в императивном стиле), когда есть возможность писать код в функциональном, неизменяемом (иммутабельном), стиле - очень часто является не самым удачным решением, потому что это ведёт к изменению состояния программы, излишне усложняя её. Поэтому, при изучении методов всегда обращайте внимание, изменяют ли они исходный массив или нет. Например, большинство функций высшего порядка, будучи применёнными к массиву, результатом возвращают новый массив, оставляя исходный нетронутым. А вот sort, как сказано в документации, сортирует элементы массива на месте, возвращая необратимым образом модифицированный исходный массив (поэтому такую сортировку лучше сделать на копии массива, полученной с помощью slice). Возьмём для примера типичную ситуацию, когда необходимо добавить новый элемент в массив, и рассмотрим как справиться с этой задачей на примeре изменяющего метода push и неизменяющего concat:

push

// push изменяет (мутирует) массив, добавляя один (или более) элементов в его конец,
// и возвращает новую длину массива
const colours = ['red', 'orange', 'yellow'];
colours.push('green'); // возвращаемое значение: 4
console.log(colours); // теперь colours - [ 'red', 'orange', 'yellow', 'green' ]

concat

// concat возвращает новый массив, содержащий элементы исходного массива + элементы,
// переданные в качестве аргументов
const colours = ['red', 'orange', 'yellow'];
const myFavColours = colours.concat('green');

console.log(colours);
// colours остался неизменен - [ 'red', 'orange', 'yellow' ]

console.log(myFavColours);
// новый массив myFavColours - [ 'red', 'orange', 'yellow', 'green' ]

// аргументом можно передать и массив значений
console.log(myFavColours.concat(myFavColours));
// => [ 'red', 'orange', 'yellow', 'green', 'red', 'orange', 'yellow', 'green' ]

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, даст возможность обращаться за помощью к менторам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг». Защита от спама reCAPTCHA «Конфиденциальность» и «Условия использования».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг». Защита от спама reCAPTCHA «Конфиденциальность» и «Условия использования».