Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>19 июн 2024</li>

3 <li>0</li>

4 </ul>Перебираем, сортируем, фильтруем и делаем с массивами всякое.

5 Иллюстрация: Оля Ежак для Skillbox Media

6 Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

7 Это статья для начинающих фронтенд-разработчиков, которые изучают JavaScript и перешли к методам массивов. Рассмотрим основные из них.

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

9 Во второй части мы по группам разберём основные методы работы с массивами. Будем объяснять простым языком, начиная с лёгких методов.

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

11 Содержание

12 <ul><li><a>Настройка рабочего окружения</a></li>

13 <li><a>Методы для добавления и извлечения элементов</a></li>

14 </ul><ul><li><a>unshift()</a></li>

15 <li><a>push()</a></li>

16 <li><a>shift()</a></li>

17 <li><a>pop()</a></li>

18 <li><a>splice()</a></li>

19 </ul><ul><li><a>Методы для формирования новых массивов на основе существующих</a></li>

20 </ul><ul><li><a>slice()</a></li>

21 <li><a>concat()</a></li>

22 <li><a>filter()</a></li>

23 <li><a>map()</a></li>

24 </ul><ul><li><a>Методы для проверок и итераций по массиву</a></li>

25 </ul><ul><li><a>forEach()</a></li>

26 <li><a>every()</a></li>

27 <li><a>some()</a></li>

28 </ul><ul><li><a>Методы для поиска элементов и индексов в массиве</a></li>

29 </ul><ul><li><a>indexOf()</a></li>

30 <li><a>lastIndexOf()</a></li>

31 <li><a>includes()</a></li>

32 <li><a>find()</a></li>

33 </ul><ul><li><a>Методы для преобразования массивов</a></li>

34 </ul><ul><li><a>sort()</a></li>

35 <li><a>reverse()</a></li>

36 <li><a>reduce()</a></li>

37 </ul><ul><li><a>Практика по массивам</a></li>

38 </ul><ul><li><a>Задача на добавление и извлечение элементов</a></li>

39 <li><a>Задача на создание массивов из текущих</a></li>

40 <li><a>Задача на метод forEach()</a></li>

41 <li><a>Задача на методы every() и includes()</a></li>

42 <li><a>Задача на метод sort()</a></li>

43 <li><a>Задача на метод reduce()</a></li>

44 </ul><ul><li><a>Что дальше</a></li>

45 </ul>Интерпретатор JavaScript встроен в любой браузер, поэтому для работы с ним не нужно ничего дополнительно устанавливать. Достаточно открыть браузер, перейти в консоль разработчика и уже можно начинать писать код.

46 Если у вас установлен Google Chrome, то сперва откройте какую-то страницу. После кликните правой кнопкой мыши на этой странице и выберите в контекстном меню пункт Просмотреть код. Перед вами появится окно с инструментами разработчика, в котором нужно выбрать вкладку Консоль.

47 Вкладка "Консоль" в инструментах разработчика Google Chrome. Введите любую строку или число и убедитесь, что интерпретатор JavaScript работаетСкриншот: Google Chrome / Skillbox MediaВы можете оставаться в консоли разработчика, но рекомендуем выделить несколько минут на настройку и запустить JavaScript в редакторе<a>VS Code</a>.

48 Для начала откройте терминал на вашем компьютере и выполните команду:

49 node --versionЕсли появилось сообщение об ошибке, значит, на вашем компьютере не установлена<a>Node.js</a> - платформа для выполнения JS-кода вне браузера:

50 Пример сообщения об ошибке, если на компьютере не установлена платформа Node.jsСкриншот: Windows PowerShell / Skillbox MediaNode.js можно скачать с <a>официального сайта</a>и установить как обычную программу. После установки перезапустите терминал и убедитесь, что вместо сообщения об ошибке на экране высвечивается номер версии.

51 Главная страница официального сайта Node.jsСкриншот:<a>Node.js</a>/ Skillbox MediaНомер версии платформы Node.js после её установки на компьютерСкриншот: Windows PowerShell / Skillbox MediaЗакрывайте терминал, он нам больше не понадобится. Дальше мы будем работать в редакторе VS Code -<a>скачайте</a>и установите его, если нужно.

52 В VS Code перейдите в маркетплейс расширений и установите Code Runner - у вас появится кнопка запуска кода в правом верхнем углу окна редактора.

53 Расширение Code Runner после установки из маркетплейса VS CodeСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaПочти готово. Создайте в редакторе папку, поместите в неё файл с любым именем и расширением .js. Напишите проверочную команду, запустите Code Runner и убедитесь, что JS-код выполнился в редакторе:

54 console.log('Привет, массив!');Пример выполнения JS-кода в редакторе VS CodeСкриншот:<a>Visual Studio Code</a>/ Skillbox MediaТеперь у вас есть всё необходимое для изучения методов массивов. Последняя рекомендация и начинаем: в VS Code под каждую группу методов рекомендуем создавать отдельный файл. Так будет удобно.

55 Для начала объявим переменную и добавим в неё массив с фруктами:

56 const fruits = ['?', '?', '?', '?', '?'];Теперь внесём во фруктовый массив первую запись.

57 Обратимся к переменной с нашим массивом, через точечную запись получим доступ к методу unshift() и перечислим нужные элементы:

58 array.unshift(element1, ..., elementN)Новые элементы попадут в начало массива, и длина массива изменится:

59 const fruits = ['?', '?', '?', '?', '?']; fruits.unshift('Список покупок:'); console.log(fruits); // '[ Список покупок:', '?', '?', '?', '?', <'?' ]Воспользуемся методом push() и добавим элементы в конец массива:

60 arraypush(element1, ..., elementN)const fruits = ['Список покупок:', '?', '?', '?', '?', '?']; fruits.push('Итого: 3000 рублей'); console.log(fruits); // ['Список покупок:', '?', '?', '?', '?', '?', 'Итого: 3000 рублей']Мы передумали добавлять запись в начало массива, но не хотим её потерять. В таких случаях помогает метод shift(): он извлекает первый элемент и, если нужно, позволяет его поместить в новую переменную:

61 array.shift()const fruits = ['Список покупок:', '?', '?', '?', '?', '?', 'Итого: 3000 рублей']; const firstElement = fruits.shift(); // Массив без первого элемента console.log(fruits); // [ '?', '?', '?', '?', '?', 'Итого: 3000 рублей' ] // Первый элемент, сохранённый в отдельной переменной console.log(firstElement); // Список покупок:С помощью метода pop() удалим последний элемент из конца массива, но только теперь не будем сохранять запись в отдельную переменную:

62 array.pop()const fruits = ['?', '?', '?', '?', '?', 'Итого: 3000 рублей']; fruits.pop(); // Массив после извлечения последнего элемента console.log(fruits); // [ '?', '?', '?', '?', '?' ]Метод splice() изменяет содержимое массива и может выглядеть запутанно:

63 array.splice(start, [deleteCount, item1, item2, ...])Однако если разбираться в синтаксисе по частям, то ничего сложного:

64 <ul><li>start - это начальный индекс элемента массива, с которого мы хотим начать изменения. Данный параметр может принимать отрицательные индексы, которые указывают на позицию элемента с конца массива.</li>

65 <li>deleteCount - это количество элементов, которые мы хотим удалить из массива. Если указать 0, то все элементы останутся. А если не указать никакого значения, то метод удалит все элементы начиная со стартового индекса - того, что мы записали в параметре start.</li>

66 <li>item1, item2, … - это список новых элементов, которые нужно добавить после стартового индекса. Эти элементы указывать необязательно.</li>

67 </ul>Теперь посмотрим на примерах варианты использования метода splice().

68 В первую очередь удалим несколько элементов из середины массива:

69 const fruits = ['?', '?', '?', '?', '?']; // Удаляем два элемента начиная с индекса 1 fruits.splice(1, 2); console.log(fruits); // [ '?', '?', '?' ]Заполним массив новыми элементами вместо удалённых:

70 const fruits = ['?', '?', '?']; // Добавляем два новых элемента начиная с индекса 1 fruits.splice(1, 0, '?', '?'); console.log(fruits); // [ '?', '?', '?', '?', '?' ]Заменим несколько старых элементов на новые:

71 const fruits = ['?', '?', '?', '?', '?']; // Меняем два элемента начиная с индекса 3 fruits.splice(3, 2, '?', '?'); console.log(fruits); // [ '?', '?', '?', '?', '?' ]Оставим в массиве только два фрукта, а остальные удалим:

72 const fruits = ['?', '?', '?', '?', '?']; // Удаляем все элементы начиная с индекса 2 fruits.splice(2); console.log(fruits); // [ '?', '?' ]Все методы этой группы возвращают новый массив, сохраняя неизменными исходные данные. Создадим исходный массив, на котором попрактикуемся:

73 const animals = ['?', '?', '?', '?', '?'];Метод slice() позволяет скопировать часть элементов в новый массив:

74 array.slice([start, end]);Разбираемся в синтаксисе:

75 <ul><li>start - это стартовый индекс, с которого начинается копирование элементов. Если не указать, то всё начнётся с нулевого индекса.</li>

76 <li>end - это конечный индекс, до которого будут копироваться элементы. Если не указать, то скопируются все элементы от стартового индекса до конца выбранного массива.</li>

77 </ul>Стартовый и конечный индексы могут принимать отрицательные аргументы. Это будет означать, что отсчёт элементов нужно проводить с конца массива.

78 const animals = ['?', '?', '?', '?', '?']; // Формируем новый массив из диких животных const wildAnimals = animals.slice(2, 4); console.log(wildAnimals); // ['?', '?']Метод concat() объединяет несколько массивов в один и при необходимости позволяет добавить к ним любые дополнительные значения:

79 array.concat (arg1, arg2, ..., argN)const animals = ['?', '?', '?', '?', '?']; const birds = ['?', '?', '?']; // Массив с птицами const fish = ['?', '?', '?']; // Массив с рыбами // Новый объединённый массив с двумя записями const combinedArray = animals.concat('добавим птиц =>', birds, 'не забудем про рыб =>', fish); console.log(combinedArray); // ['?', '?', '?', '?', '?', добавим птиц =>''?', '?', '?', ;'не забудем про рыб =>''?', '?''?']Метод filter() перебирает массив и выбирает из него элементы, которые проходят проверку по заданному условию. Это условие записывается в <a>функции обратного вызова (колбэк-функции)</a>. Если ни один элемент не будет соответствовать условию, то метод filter() создаст новый пустой массив:

80 array.filter(callback)const animals = ['?', '?', '?', '?', '?']; // Выбираем из животных только хищников const predators = animals.filter(animal => animal === '?' || animal === '?'); console.log(predators); // ['?', '?']А вот пример формирования пустого массива:

81 const animals = ['?', '?', '?', '?', '?']; // Выбираем из животных только слонов const elephants = animals.filter(animal => animal === '?'); // Слонов в исходном массиве не оказалось console.log(elephants); // []Метод map() обращается к каждому элементу исходного массива, меняет их через<a>функцию обратного вызова</a>и записывает результат в новый массив:

82 array.map(callback)const animals = ['?', '?', '?', '?', '?']; // Вакцинируем наших животных const vaccinatedAnimals = animals.map(animal => `${animal}?`); console.log(vaccinatedAnimals); // ['??', '??', '??', '??', '??']Методы этой группы не создают и не изменяют исходный массив. Они лишь выполняют определённые действия с переданным массивом и возвращают запрашиваемый результат. Попрактикуемся на транспортных средствах:

83 const vehicles = ['?', '?', '?', '?', '?', '?️', '?', '?', '✈️', '?'];Метод forEach() перебирает каждый элемент массива с помощью<a>функции обратного вызова</a>. Однако в отличие от map(), метод forEach() не возвращает новый массив и не изменяет текущий. То есть вы можете что-то сделать с каждым элементом, посмотреть результат и не записывать его в новый массив. Это удобный аналог<a>цикла for в JavaScript</a>для работы с массивами.

84 array.forEach(callback)Допустим, мы хотим посмотреть список транспортных средств в массиве. Мы пока ничего не планируем делать, и вот для этого подходит forEach():

85 const vehicles = ["?", "?", "?", "?", "?", "?️", "?", "?", "✈️", "?"]; vehicles.forEach((vehicle) => console.log(vehicle)); /* * ? * ? * ? * ? * ? * ?️ * ? * ? * ✈️ * ? */Если мы перепишем код с помощью<a>цикла for</a>, то получится более громоздко. Ещё различие: forEach() всегда доходит до конца и перебираем все элементы массива. А вот цикл for можно остановить<a>оператором break</a>. Поэтому в массивах хорошей практикой считается использовать forEach() вместо for.

86 const vehicles = ["?", "?", "?", "?", "?", "?️", "?", "?", "✈️", "?"]; for (let i = 0; i < vehicles.length; i++) { console.log(vehicles[i]); } /* * ? * ? * ? * ? * ? * ?️ * ? * ? * ✈️ * ? */Метод every() проходится<a>функцией обратного</a>вызова по всему массиву и возвращает<a>булево значение</a>true, если каждый элемент удовлетворяет условию. Если есть хотя бы одно несовпадение - метод every() вернёт false:

87 array.every(callback)// Общий список транспортных средств const vehicles = ["?", "?", "?", "?", "?", "?️", "?", "?", "✈️", "?"]; // Создаём функцию обратного вызова для метода every. Она проверяет, является ли переданное транспортное средство (vehicle) наземным const isLandTransport = (vehicle) => { // Список наземных транспортных средств const landTransports = ["?", "?", "?", "?", "?", "?️", "?", "?"]; // Цикл перебора всех наземных транспортных средств в массиве landTransports for (let i = 0; i < landTransports.length; i++) { // Если текущее транспортное средство (vehicle) совпадает с элементом из landTransports, то возвращается значение true if (vehicle === landTransports[i]) { return true; } } // Если ни одно из наземных транспортных средств не совпадает с vehicle, то возвращается значение false return false; }; // Используем метод every для проверки всех элементов массива vehicles const allLandTransport = vehicles.every(isLandTransport); console.log(allLandTransport); // Результат false, потому что в массиве есть ✈️ самолёт и ? корабльМетод some() после перебора массива возвращает true, если хотя бы один элемент соответствует условию. Если совпадений нет - метод вернёт false. Ещё важно знать, что метод some() останавливается на первом совпадении и не перебирает все элементы - ищет хотя бы один подходящий элемент:

88 array.some(callback)const vehicles = ["?", "?", "?", "?", "?", "?️", "?", "?", "✈️", "?"]; // Создаём функцию обратного вызова для метода some(). Она проверяет, является ли переданное транспортное средство (vehicle) воздушным const isAirTransport = (vehicle) => { const airTransports = ["✈️", "?", "?"]; return airTransports.some((transport) => transport === vehicle); }; // Используем метод some() для проверки наличия хотя бы одного воздушного транспортного средства в массиве vehicles const hasAirTransport = vehicles.some(isAirTransport); console.log(hasAirTransport); // true, так как в массиве есть ✈️ самолётЭта группа методов позволяет найти конкретный элемент, его индекс или убедиться, что он есть в массиве. Потренируемся искать спортинвентарь:

89 const sportsEquipment = ["⚽", "?", "?", "?", "?", "?", "?", "?", "?"];Метод indexOf принимает два аргумента: искомый элемент и индекс, с которого должен начинаться поиск. Если в массиве несколько одинаковых элементов, то indexOf вернёт только первый индекс. В случае если нужного элемента не будет, метод вернёт отрицательный индекс со значением -1:

90 array.indexOf(searchElement, [fromIndex])Объяснение синтаксиса:

91 <ul><li>searchElement - элемент, который мы хотим найти в массиве.</li>

92 <li>fromIndex - номер индекса, с которого должен стартовать поиск. Если этот параметр не указать, то поиск начнётся с начала массива.</li>

93 </ul>Найдём индекс первого баскетбольного мяча:

94 const sportsEquipment = ["⚽", "?", "?", "?", "?", "?", "?", "?", "?"]; // Второй аргумент не указываем, чтобы поиск начинался с начала const basketballIndex = sportsEquipment.indexOf("?"); console.log(basketballIndex); // 1Поищем индекс второго баскетбольного мяча:

95 const sportsEquipment = ["⚽", "?", "?", "?", "?", "?", "?", "?", "?"]; // Указываем второй аргумент, чтобы поиск начинался с третьего индекса const nextBasketballIndex = sportsEquipment.indexOf("?", 3); console.log(nextBasketballIndex); // 4Теперь попробуем отыскать элемент, которого нет в массиве:

96 const sportsEquipment = ["⚽", "?", "?", "?", "?", "?", "?", "?", "?"]; const tennisBallIndex = sportsEquipment.indexOf("?"); console.log(tennisBallIndex); // -1Метод lastIndexOf() работает практически так же, как и метод indexOf(). Разница только в том, что lastIndexOf() начинает поиск элемента с конца и возвращает индекс последнего вхождения указанного элемента в массиве:

97 array.lastIndexOf(searchElement, [fromIndex])Разыщем индекс последнего баскетбольного мяча в массиве:

98 const sportsEquipment = ["⚽", "?", "?", "?", "?", "?", "?", "?", "?"]; const lastBasketballIndex = sportsEquipment.lastIndexOf("?"); console.log(lastBasketballIndex); // 8Добавим к методу lastIndexOf() второй аргумент и посмотрим результат:

99 const sportsEquipment = ["⚽", "?", "?", "?", "?", "?", "?", "?", "?"]; // Найдём индекс последнего вхождения теннисной ракетки (?), начиная с индекса 2 const lastTennisRacketIndex = sportsEquipment.lastIndexOf("?", 2); console.log(lastTennisRacketIndex); // -1, до индекса 2 "?" нет // Метод проверил нулевой, первый и второй индекс: "⚽", "?", "?"Немного изменим второй аргумент, чтобы элемент попал в выборку:

100 const sportsEquipment = ["⚽", "?", "?", "?", "?", "?", "?", "?", "?"]; // Найдём индекс последнего вхождения теннисной ракетки (?) начиная с индекса 3 const lastTennisRacketIndex = sportsEquipment.lastIndexOf("?", 3); console.log(lastTennisRacketIndex); // 3Метод includes() возвращает<a>булево значение</a>true или false. Результат зависит от того, присутствует ли нужный элемент в массиве или же нет. Опционально можно указать индекс, с которого метод начнём проверку:

101 array.includes(searchElement, [fromIndex])const sportsEquipment = ["⚽", "?", "?", "?", "?", "?", "?", "?", "?"]; // Проверяем, есть ли в массиве баскетбольный мяч (?) const hasBasketball = sportsEquipment.includes("?"); console.log(hasBasketball); // true // Проверяем, есть ли в массиве теннисный мяч (?) const hasTennisBall = sportsEquipment.includes("?"); console.log(hasTennisBall); // false // Проверяем, есть ли в массиве баскетбольный мяч (?), начиная с 4-го индекса const hasBasketballFromIndex = sportsEquipment.includes("?", 4); console.log(hasBasketballFromIndex); // trueМетод find() принимает в качестве аргумента<a>функцию обратного вызова</a>, которая определяет условия для поиска элемента. Если нужный элемент будет найден, то find() его вернёт. Однако если ни один элемент не будет соответствовать условию, то вернётся<a>undefined</a>(значение неопределённо):

102 array.find(callback)Поищем волейбольный мяч:

103 const sportsEquipment = ["⚽", "?", "?", "?", "?", "?", "?", "?", "?"]; const firstVolleyball = sportsEquipment.find((equipment) => equipment === "?"); console.log(firstVolleyball); // ?Усложним условие и поищем что-то кроме мяча:

104 const sportsEquipment = ["⚽", "?", "?", "?", "?", "?", "?", "?", "?"]; const firstNonBall = sportsEquipment.find((equipment) => !["⚽", "?", "?", "?"].includes(equipment)); console.log(firstNonBall); // ?Эти методы позволяют сортировать, разворачивать и получать единое значение на основе массива. Поэкспериментируем с вредным фастфудом:

105 const foods = ["?", "?", "?", "?", "?", "?", "?", "?", "?", "?"];Метод sort() берёт исходный массив, сортирует его определённым образом и возвращает. То есть после применения метода исходный массив изменится.

106 По умолчанию элементы сортируются в лексикографическом порядке - как строки. Если в массиве будут числа, то метод sort() преобразует их в строки и после отсортирует по кодам символов<a>Unicode</a>. Это произойдёт и с эмодзи.

107 В нашем массиве есть бургер и пицца:

108 <ul><li>U+1F354 - юникод бургера ?</li>

109 <li>U+1F355 - юникод пиццы ?</li>

110 </ul>У символа бургера меньший юникод, поэтому в лексикографическом порядке сортировки он будет перед пиццей. Так же будет и с остальными эмодзи:

111 const foods = ["?", "?", "?", "?", "?", "?", "?", "?", "?", "?"]; // Сортируем массив foods в лексикографическом порядке foods.sort(); console.log(foods); // ['?', '?', '?', '?', '?', '?', '?', '?', '?', '?'] /** ? - Хот-дог - U+1F32D ? - Тако - U+1F32E ? - Гамбургер - U+1F354 ? - Кусок пиццы - U+1F355 ? - Картофель фри - U+1F35F ? - Спагетти - U+1F35D ? - Суши - U+1F363 ? - Кусок торта - U+1F370 ? - Зелёный салат - U+1F957 ? - Сэндвич - U+1F96A */Метод sort() позволяет сортировать массив по любому критерию, который вам нужен. Например, по длине строки: от меньшей к большей. Для этого мы должны создать<a>функцию обратного вызова</a>для сравнения длины строк. Переведём эмодзи в текст и посмотрим, как изменится порядок сортировки:

112 const foods = ["Пицца", "Гамбургер", "Хот-дог", "Картофель фри", "Салат", "Суши", "Спагетти", "Тако", "Сэндвич", "Торт"]; // Создаём функцию для получения длины строки const getStringLength = (str) => { return str.length; }; // Сортируем массив по длине строк foods.sort((a, b) => { return getStringLength(a) - getStringLength(b); }); console.log(foods); /** [ 'Суши', 'Тако', 'Торт', 'Пицца', 'Салат', 'Хот-дог', 'Сэндвич', 'Спагетти', 'Гамбургер', 'Картофель фри' ] */Метод reverse() переставляет порядок элементов в исходном массиве: последний элемент становится первым, первый - последним и так далее.

113 array.reverse()const foods = ["?", "?", "?", "?", "?", "?", "?", "?", "?", "?"]; foods.reverse(); console.log(foods); // ['?', '?', '?', '?', '?', '?', '?', '?', '?', '?']Теперь, если вы проверите индекс первого элемента, то им окажется кусок торта, а не пицца. Это значит, что порядок элементов в массиве изменился:

114 const foods = ["?", "?", "?", "?", "?", "?", "?", "?", "?", "?"]; foods.reverse(); console.log(foods[0]); // ?Метод reduce() применяет<a>функцию обратного вызова</a>последовательно для каждого элемента массива, сохраняет промежуточный результат и выводит общее значение. Это может быть объединённые строки, сумма чисел и так далее.

115 Разберём процесс по шагам:

116 <ul><li>Функция получает начальное значение.</li>

117 <li>Переходит к первому элементу массива и начальному значению.</li>

118 <li>Получается промежуточный результат, который становится новым начальным значением.</li>

119 <li>Функция переходит к следующему элементу массива и обновлённому начальному значению.</li>

120 <li>Процесс повторяется, пока функция не пройдёт по всем элементам.</li>

121 </ul>Метод reduce() самый сложный для понимания, поэтому далее массив с эмодзи мы заменим массивом чисел. Так будет проще понять его принцип:

122 const numbers = [1, 2, 3, 4, 5]; // Используем метод reduce() для нахождения суммы всех элементов const sum = numbers.reduce((accumulator, currentValue) => { // На каждой итерации добавляем текущее значение (currentValue) к аккумулятору (accumulator) return accumulator + currentValue; }, 0); // Начальное значение аккумулятора 0 console.log(sum); // 15Рассмотрим работу метода reduce() на каждом этапе итерации:

123 Накопленное значениеaccumulatorТекущее значение currentValueСуммаsumПервая итерация011Вторая итерация123Третья итерация336Четвёртая итерация6410Пятая итерация10515А вот так выглядит синтаксис метода reduce():

124 array.reduce(callback, [initialValue]);<ul><li>callback - это функция, которая будет вызываться для каждого элемента массива. Она может принимать четыре аргумента:</li>

125 </ul><ul><li>accumulator - это накопленное значение, которое обновляется после каждого вызова функции.</li>

126 <li>currentValue - текущий обрабатываемый элемент массива.</li>

127 <li>currentIndex - индекс текущего обрабатываемого элемента. Этот параметр не обязательный, если указано значение initialValue.</li>

128 <li>array - это сам массив, на котором мы вызываем метод reduce(). Это также необязательный параметр, если задано initialValue.</li>

129 </ul><ul><li>initialValue - это начальное значение аккумулятора, с которого начинается накопление. Если не передано, то начальным значением становится первый элемент массива и перебор идёт со второго элемента.</li>

130 </ul>Ниже будет код, которые поможет лучше разобраться в синтаксисе метода reduce(). Запустите его и посмотрите, что происходит на каждой итерации:

131 const numbers = [1, 2, 3, 4, 5]; // С помощью метода reduce() создаём строку с информацией о каждом элементе массива const result = numbers.reduce((accumulator, currentValue, currentIndex, array) => { // Выводим информацию о текущей итерации console.log(`Итерация ${currentIndex}:`); console.log(` Текущий элемент: ${currentValue}`); console.log(` Текущий индекс: ${currentIndex}`); console.log(` Исходный массив: [${array.join(', ')}]`); console.log(` Аккумулятор до: ${accumulator}`); // Формируем строку с информацией о текущем элементе и добавляем её к аккумулятору accumulator += `Элемент ${currentIndex + 1}: ${currentValue}\n`; console.log(` Аккумулятор после: ${accumulator}\n`); // Возвращаем обновлённый аккумулятор для следующей итерации return accumulator; }, ''); // Начальное значение аккумулятора - пустая строка // Итоговый результат console.log('Результат:\n' + result); /* Ожидаемый вывод в консоли: Итерация 0: Текущий элемент: 1 Текущий индекс: 0 Исходный массив: [1, 2, 3, 4, 5] Аккумулятор до: Аккумулятор после: Элемент 1: 1 Итерация 1: Текущий элемент: 2 Текущий индекс: 1 Исходный массив: [1, 2, 3, 4, 5] Аккумулятор до: Элемент 1: 1 Аккумулятор после: Элемент 1: 1 Элемент 2: 2 */Работа с массивами важна для эффективного программирования и изучения популярных фреймворков вроде<a>React</a>. Поэтому чем чаще вы практикуетесь, тем глубже погружаетесь в тему. В этом разделе мы собрали задачи на методы массивов, которые мы разбирали в статье.

132 Перед вами список покупок: ?, ?, ?, ?, ?, ?. Создайте для этого списка массив, а затем добавьте по одному новому овощу в начало и конец списка. Добавьте ещё овощей и уберите из массива все фрукты.

133 Решение

134 // Шаг 1: Создаём массив с тремя овощами и тремя фруктами const groceryList = ['?', '?', '?', '?', '?', '?']; // Шаг 2: Добавляем по одному овощу в начало и конец массива groceryList.unshift('?'); // Добавляем брокколи в начало groceryList.push('?'); // Добавляем баклажан в конец // Шаг 3: Заменяем три фрукта на овощи groceryList.splice(4, 3, '?', '?', '?️'); // Заменяем яблоко, банан и виноград на картофель, помидор и перец // Наш итоговый овощной массив console.log(groceryList); // ['?', '?', '?', '?', '?', '?', '?️', '?']В трёх зоопарках содержатся следующие виды животных:

135 <ul><li>В первом зоопарке: ? бурундук, ?️ белка, ? лев, ??? три орла, ? обезьяна, ? змея, ? сова, ? слон, ? черепаха, ? медведь.</li>

136 <li>Во втором зоопарке: ? панда, ? коала, ? утка, ? жираф, ??? три попугая, ? орёл, ? тигр, ? пингвин, ? осьминог, ? бабочка, ? ёж.</li>

137 <li>В третьем зоопарке: ? лягушка, ? обезьяна, ?? два орла, ??? три попугая, ? жираф, ? змея, ? черепаха, ? лиса.</li>

138 </ul>Поместите животных из каждого зоопарка в отдельный массив: zoo1, zoo2 и zoo3. Объедините все три массива в один общий - allAnimals.

139 Выберите из общего массива allAnimals всех ? орлов и ? попугаев. Сохраните их в новый массив eaglesParrots. Отправьте орлов и попугаев в ветклинику ? и сохраните результат в новом массиве treatedAnimals.

140 Решение

141 // Помещаем животных из каждого зоопарка в отдельный массив const zoo1 = ['?', '?️', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?']; const zoo2 = ['?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?']; const zoo3 = ['?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?']; // Объедините все три массива в один общий const allAnimals = zoo1.concat(zoo2, zoo3); // Выбираем из общего массива всех орлов и попугаев const eaglesParrots = allAnimals.filter(animal => animal === '?' || animal === '?'); // Отправляем орлов и попугаев в ветклинику ? const treatedAnimals = eaglesParrots.map(animal => `${animal}?`); console.log(treatedAnimals); // ['??', '??', '??', >'??', '??', '??', '??', <'??', '??', '??', '??', '??']У вас есть массив с различными транспортными средствами:

142 const vehicles = ["?", "?", "?", "?", "?", "?️", "?", "?", "✈️", "?"];Напишите программу, которая будет выводить информацию о каждом транспортном средстве в консоль в таком формате:

143 Транспортное средство <индекс>: <символ>Пример вывода:

144 Транспортное средство 1: ? Транспортное средство 2: ? Транспортное средство 3: ? ...Решение

145 const vehicles = ["?", "?", "?", "?", "?", "?️", "?", "?", "✈️", "?"]; // Пишем функцию для вывода информации о каждом транспортном средстве const displayVehicleInfo = (vehicle, index) => { // Выводим информацию в формате "Транспортное средство <индекс>: <символ>" console.log(`Транспортное средство ${index + 1}: ${vehicle}`); }; // Используем метод forEach для вызова функции displayVehicleInfo для каждого элемента массива vehicles.forEach((vehicle, index) => { displayVehicleInfo(vehicle, index); }); /** Транспортное средство 1: ? Транспортное средство 2: ? Транспортное средство 3: ? Транспортное средство 4: ? Транспортное средство 5: ? Транспортное средство 6: ?️ Транспортное средство 7: ? Транспортное средство 8: ? Транспортное средство 9: ✈️ Транспортное средство 10: ? */В разделе про метод every() мы использовали цикл for для перебора всех наземных транспортных средств. Перепишите код, чтобы вместо цикла в теле функции оказался метод includes(). Проверьте результат:

146 const vehicles = ["?", "?", "?", "?", "?", "?️", "?", "?", "✈️", "?"]; const isLandTransport = (vehicle) => { const landTransports = ["?", "?", "?", "?", "?", "?️", "?", "?"]; for (let i = 0; i < landTransports.length; i++) { if (vehicle === landTransports[i]) { return true; } } return false; }; const allLandTransport = vehicles.every(isLandTransport); console.log(allLandTransport); // false, в массиве есть ✈️ и ?Решение

147 const vehicles = ["?", "?", "?", "?", "?", "?️", "?", "?", "✈️", "?"]; const isLandTransport = (vehicle) => { const landTransports = ["?", "?", "?", "?", "?", "?️", "?", "?"]; // Проверяем, входит ли переданное транспортное средство в список наземных транспортных средств return landTransports.includes(vehicle); }; const allLandTransport = vehicles.every(isLandTransport); console.log(allLandTransport); // false, потому что в массиве есть ✈️ и ?У вас есть массив с блюдами. Отсортируйте его по длине строк: от меньшего описания блюд к большему. Результат выведите в консоль:

148 const foodDescriptions = [ "Салат Цезарь", "Паста Болоньезе", "Ролл Филадельфия", "Суп Том Ям", "Стейк Медиум", "Пицца Маргарита", "Чизкейк Нью-Йорк", "Хот-дог с сыром", "Суши Филадельфия", "Фруктовый салат", ];Решение

149 const foodDescriptions = [ "Салат Цезарь", "Паста Болоньезе", "Ролл Филадельфия", "Суп Том Ям", "Стейк Медиум", "Пицца Маргарита", "Чизкейк Нью-Йорк", "Хот-дог с сыром", "Суши Филадельфия", "Фруктовый салат", ]; // Создаём функцию для получения длины строки const getStringLength = (str) => { return str.length; }; // Сортируем массив по длине строк от меньшей к большей foodDescriptions.sort((a, b) => { return getStringLength(a) - getStringLength(b); }); console.log(foodDescriptions); /** [ 'Суп Том Ям', 'Салат Цезарь', 'Стейк Медиум', 'Паста Болоньезе', 'Пицца Маргарита', 'Хот-дог с сыром', 'Фруктовый салат', 'Ролл Филадельфия', 'Чизкейк Нью-Йорк', 'Суши Филадельфия' ] */У вас есть массив строк с фруктами. Посчитайте общее количество букв:

150 const fruits = ["яблоко", "банан", "киви", "манго", "груша"];Решение

151 const fruits = ["яблоко", "банан", "киви", "манго", "груша"]; const totalLetters = fruits.reduce((accumulator, currentValue) => { // Добавляем длину текущей строки к аккумулятору return accumulator + currentValue.length; }, 0); // Начальное значение аккумулятора 0 console.log(totalLetters); // 25Вы познакомились с основными методами массивов в JavaScript и их базовым синтаксисом. Для дальнейшего изучения массивов советуем обращаться к веб-документации<a>MDN Web Docs</a>от компании Mozilla.

152 <a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>