Как вывести измененный массив

Массивы в JavaScript

В программировании очень часто возникает задача хранения списка похожих значений, например, названий всех дней недели. Можно было бы создавать для хранения каждого названия свою переменную, но это было бы не очень удобно — понадобилось бы целых 7 переменных, по одной для каждого дня недели.

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

Для создания массива используются квадратные скобки:

Пока созданный нами массив не содержит никаких данных. Заполним его названиями дней недели:

Каждое значение списка, который мы записали в массив, в нашем случае каждый день недели, называется массива.

Элементы разделяются между собой запятой. После этой запятой можно ставить пробелы, а можно и не ставить (более принято ставить, ставьте).

Обратите внимание на то, что названия дней недели представляют собой строки и поэтому взяты в кавычки. Кроме строк в массиве можно хранить числа, и их в кавычки мы не берем:

Кроме строк и чисел в массиве можно хранить все допустимые типы данных JavaScript, а также смешивать их между собой в одном массиве, пример:

Создайте массив с элементами ‘a’ , ‘b’ и ‘c’ . Выведите его на экран с помощью функции alert , а также выведите его в консоль с помощью console.log .

Как вывести отдельный элемент массива

Обращение к элементам массива осуществляется подобно обращениям к символам строки. Каждый элемент массива имеет свой номер: первый элемент — номер 0 , второй — номер 1 и так далее. Эти номера называются элементов массива. Смотрите пример:

Создайте массив с элементами ‘a’ , ‘b’ , ‘c’ . Выведите на экран каждый из этих элементов.

Создайте массив с элементами массив с элементами ‘a’ , ‘b’ , ‘c’ , ‘d’ . Выведите с его помощью на экран строку ‘a+b+c+d’ .

Создайте массив с элементами 1 , 2 и 3 . Выведите на экран сумму этих элементов.

Создайте массив с элементами 2 , 5 , 3 , 9 . Умножьте первый элемент массива на второй, а третий элемент на четвертый. Результаты сложите, присвойте переменной result . Выведите на экран значение этой переменной.

Длина массива

Длина массива, так же, как и длина строки находится с помощью свойства length :

Создайте массив с произвольными элементами. Выведите на экран количество элементов в этом массиве.

Последний элемент массива

Последний элемент массива также получается аналогично последнему символу строки:

Создайте массив с произвольными элементами. Выведите на экран последний элемент этого массива.

Изменение массива

Элементы массивов, в отличие от символов строк, можно изменять:

Создайте массив с элементами ‘a’ , ‘b’ , ‘c’ . Запишите вместо первого элемента число 1 , вместо второго — 2 , вместо третьего — 3 .

Перезапись элементов

Можно также прочитывать текущее значение элемента, выполнять с ним какие-то операции и записывать измененное значение обратно в этот элемент:

Предыдущий код можно переписать через оператор += :

Создайте массив с числами. Прибавьте к каждому элементу массива число 3 . Выведите на экран измененный массив.

Инкремент и декремент

Можно также применять операции инкремента и декремента:

Создайте массив с элементами 1 , 2 и 3 . С помощью оператора ++ увеличьте каждый элемент массива на единицу.

Заполнение массива

Элементы в массив не обязательно добавлять сразу в момент объявления этого массива. Можно вначале объявить этот массив пустым, а затем добавить в него необходимые элементы, вот так:

Массив не обязательно должен быть изначально пустым — там уже что-то может быть, но мы все равно можем добавлять новые элементы:

С помощью описанного приема создайте массив с элементами 1 , 2 и 3 .

Пусть дан такой массив:

Добавьте ему в конец элементы 4 и 5 .

Несуществующие элементы

Обращение к несуществующему элементу массива вернет undefined . Никакой ошибки при этом не будет. Давайте посмотрим на примере.

Пусть у нас в массиве 3 элемента. Давайте обратимся к несуществующему элементу, например, к элементу с номером 10 :

Разреженный массив

Пусть у нас есть некоторый пустой массив:

Давайте добавим к этому массиву еще один элемент:

Давайте проговорим то, каким образом мы добавили новый элемент в массив: мы знаем, что в нем 3 элемента, и, так как нумерация элементов начинается с нуля, то следующий по порядку элемент будет иметь ключ 3 , поэтому мы записывали новое значение в элемент с этим ключом.

Но что будет, если взять не следующий по порядку ключ, а какой-то другой? В этом случае мы получим с дырой. Давайте посмотрим на примере. Запишем значение в элемент с ключом 4 :

А теперь запишем значение в элемент с ключом 5 :

Как вы видите, новое значение добавляется в конец массива, но между уже существующими значениями и новым появляется дыра, которая заполняется значением undefined . На практике это означает увеличение длины массива:

Пусть дан такой массив:

Узнайте длину этого массива с помощью свойства .

Источник

Методы массивов

Массивы предоставляют множество методов. Чтобы было проще, в этой главе они разбиты на группы.

Добавление/удаление элементов

Мы уже знаем методы, которые добавляют и удаляют элементы из начала или конца:

• arr.push(. items) – добавляет элементы в конец,
• arr.pop() – извлекает элемент из конца,
• arr.shift() – извлекает элемент из начала,
• arr.unshift(. items) – добавляет элементы в начало.

splice

Как удалить элемент из массива?

Так как массивы – это объекты, то можно попробовать delete :

Вроде бы, элемент и был удалён, но при проверке оказывается, что массив всё ещё имеет 3 элемента arr.length == 3 .

Это нормально, потому что всё, что делает delete obj.key – это удаляет значение с данным ключом key . Это нормально для объектов, но для массивов мы обычно хотим, чтобы оставшиеся элементы сдвинулись и заняли освободившееся место. Мы ждём, что массив станет короче.

Поэтому для этого нужно использовать специальные методы.

Метод arr.splice(str) – это универсальный «швейцарский нож» для работы с массивами. Умеет всё: добавлять, удалять и заменять элементы.

Он начинает с позиции index , удаляет deleteCount элементов и вставляет elem1, . elemN на их место. Возвращает массив из удалённых элементов.

Этот метод проще всего понять, рассмотрев примеры.

Начнём с удаления:

Легко, правда? Начиная с позиции 1 , он убрал 1 элемент.

В следующем примере мы удалим 3 элемента и заменим их двумя другими.

Здесь видно, что splice возвращает массив из удалённых элементов:

Метод splice также может вставлять элементы без удаления, для этого достаточно установить deleteCount в 0 :

В этом и в других методах массива допускается использование отрицательного индекса. Он позволяет начать отсчёт элементов с конца, как тут:

slice

Метод arr.slice намного проще, чем похожий на него arr.splice .

Он возвращает новый массив, в который копирует элементы, начиная с индекса start и до end (не включая end ). Оба индекса start и end могут быть отрицательными. В таком случае отсчёт будет осуществляться с конца массива.

Это похоже на строковый метод str.slice , но вместо подстрок возвращает подмассивы.

Можно вызвать slice и вообще без аргументов: arr.slice() создаёт копию массива arr . Это часто используют, чтобы создать копию массива для дальнейших преобразований, которые не должны менять исходный массив.

concat

Метод arr.concat создаёт новый массив, в который копирует данные из других массивов и дополнительные значения.

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

В результате мы получаем новый массив, включающий в себя элементы из arr , а также arg1 , arg2 и так далее…

Если аргумент argN – массив, то все его элементы копируются. Иначе скопируется сам аргумент.

Обычно он просто копирует элементы из массивов. Другие объекты, даже если они выглядят как массивы, добавляются как есть:

…Но если объект имеет специальное свойство Symbol.isConcatSpreadable , то он обрабатывается concat как массив: вместо него добавляются его числовые свойства.

Для корректной обработки в объекте должны быть числовые свойства и length :

Перебор: forEach

Метод arr.forEach позволяет запускать функцию для каждого элемента массива.

Например, этот код выведет на экран каждый элемент массива:

А этот вдобавок расскажет и о своей позиции в массиве:

Результат функции (если она вообще что-то возвращает) отбрасывается и игнорируется.

Поиск в массиве

Далее рассмотрим методы, которые помогут найти что-нибудь в массиве.

indexOf/lastIndexOf и includes

Методы arr.indexOf, arr.lastIndexOf и arr.includes имеют одинаковый синтаксис и делают по сути то же самое, что и их строковые аналоги, но работают с элементами вместо символов:

• arr.indexOf(item, from) ищет item , начиная с индекса from , и возвращает индекс, на котором был найден искомый элемент, в противном случае -1 .
• arr.lastIndexOf(item, from) – то же самое, но ищет справа налево.
• arr.includes(item, from) – ищет item , начиная с индекса from , и возвращает true , если поиск успешен.

Обратите внимание, что методы используют строгое сравнение === . Таким образом, если мы ищем false , он находит именно false , а не ноль.

Если мы хотим проверить наличие элемента, и нет необходимости знать его точный индекс, тогда предпочтительным является arr.includes .

Кроме того, очень незначительным отличием includes является то, что он правильно обрабатывает NaN в отличие от indexOf/lastIndexOf :

find и findIndex

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

Здесь пригодится метод arr.find.

Его синтаксис таков:

Функция вызывается по очереди для каждого элемента массива:

• item – очередной элемент.
• index – его индекс.
• array – сам массив.

Если функция возвращает true , поиск прерывается и возвращается item . Если ничего не найдено, возвращается undefined .

Например, у нас есть массив пользователей, каждый из которых имеет поля id и name . Попробуем найти того, кто с id == 1 :

В реальной жизни массивы объектов – обычное дело, поэтому метод find крайне полезен.

Обратите внимание, что в данном примере мы передаём find функцию item => item.id == 1 , с одним аргументом. Это типично, дополнительные аргументы этой функции используются редко.

Метод arr.findIndex – по сути, то же самое, но возвращает индекс, на котором был найден элемент, а не сам элемент, и -1 , если ничего не найдено.

filter

Метод find ищет один (первый попавшийся) элемент, на котором функция-колбэк вернёт true .

На тот случай, если найденных элементов может быть много, предусмотрен метод arr.filter(fn).

Синтаксис этого метода схож с find , но filter возвращает массив из всех подходящих элементов:

Преобразование массива

Перейдём к методам преобразования и упорядочения массива.

Метод arr.map является одним из наиболее полезных и часто используемых.

Он вызывает функцию для каждого элемента массива и возвращает массив результатов выполнения этой функции.

Например, здесь мы преобразуем каждый элемент в его длину:

sort(fn)

Вызов arr.sort() сортирует массив на месте, меняя в нём порядок элементов.

Он возвращает отсортированный массив, но обычно возвращаемое значение игнорируется, так как изменяется сам arr .

Не заметили ничего странного в этом примере?

Порядок стал 1, 15, 2 . Это неправильно! Но почему?

По умолчанию элементы сортируются как строки.

Буквально, элементы преобразуются в строки при сравнении. Для строк применяется лексикографический порядок, и действительно выходит, что «2» > «15» .

Чтобы использовать наш собственный порядок сортировки, нам нужно предоставить функцию в качестве аргумента arr.sort() .

Функция должна для пары значений возвращать:

Например, для сортировки чисел:

Теперь всё работает как надо.

Давайте возьмём паузу и подумаем, что же происходит. Упомянутый ранее массив arr может быть массивом чего угодно, верно? Он может содержать числа, строки, объекты или что-то ещё. У нас есть набор каких-то элементов. Чтобы отсортировать его, нам нужна функция, определяющая порядок, которая знает, как сравнивать его элементы. По умолчанию элементы сортируются как строки.

Метод arr.sort(fn) реализует общий алгоритм сортировки. Нам не нужно заботиться о том, как он работает внутри (в большинстве случаев это оптимизированная быстрая сортировка). Она проходится по массиву, сравнивает его элементы с помощью предоставленной функции и переупорядочивает их. Всё, что остаётся нам, это предоставить fn , которая делает это сравнение.

Кстати, если мы когда-нибудь захотим узнать, какие элементы сравниваются – ничто не мешает нам вывести их на экран:

В процессе работы алгоритм может сравнивать элемент с другими по нескольку раз, но он старается сделать как можно меньше сравнений.

На самом деле от функции сравнения требуется любое положительное число, чтобы сказать «больше», и отрицательное число, чтобы сказать «меньше».

Это позволяет писать более короткие функции:

Помните стрелочные функции? Можно использовать их здесь для того, чтобы сортировка выглядела более аккуратной:

Будет работать точно так же, как и более длинная версия выше.

reverse

Метод arr.reverse меняет порядок элементов в arr на обратный.

Он также возвращает массив arr с изменённым порядком элементов.

split и join

Ситуация из реальной жизни. Мы пишем приложение для обмена сообщениями, и посетитель вводит имена тех, кому его отправить, через запятую: Вася, Петя, Маша . Но нам-то гораздо удобнее работать с массивом имён, чем с одной строкой. Как его получить?

Метод str.split(delim) именно это и делает. Он разбивает строку на массив по заданному разделителю delim .

В примере ниже таким разделителем является строка из запятой и пробела.

У метода split есть необязательный второй числовой аргумент – ограничение на количество элементов в массиве. Если их больше, чем указано, то остаток массива будет отброшен. На практике это редко используется:

Вызов split(s) с пустым аргументом s разбил бы строку на массив букв:

Вызов arr.join(glue) делает в точности противоположное split . Он создаёт строку из элементов arr , вставляя glue между ними.

reduce/reduceRight

Если нам нужно перебрать массив – мы можем использовать forEach , for или for..of .

Если нам нужно перебрать массив и вернуть данные для каждого элемента – мы используем map .

Методы arr.reduce и arr.reduceRight похожи на методы выше, но они немного сложнее. Они используются для вычисления какого-нибудь единого значения на основе всего массива.

Функция применяется по очереди ко всем элементам массива и «переносит» свой результат на следующий вызов.

• previousValue – результат предыдущего вызова этой функции, равен initial при первом вызове (если передан initial ),
• item – очередной элемент массива,
• index – его индекс,
• array – сам массив.

При вызове функции результат её вызова на предыдущем элементе массива передаётся как первый аргумент.

Звучит сложновато, но всё становится проще, если думать о первом аргументе как «аккумулирующем» результат предыдущих вызовов функции. По окончании он становится результатом reduce .

Этот метод проще всего понять на примере.

Тут мы получим сумму всех элементов массива всего одной строкой:

Здесь мы использовали наиболее распространённый вариант reduce , который использует только 2 аргумента.

Давайте детальнее разберём, как он работает.

1. При первом запуске sum равен initial (последний аргумент reduce ), то есть 0 , а current – первый элемент массива, равный 1 . Таким образом, результат функции равен 1 .
2. При втором запуске sum = 1 , и к нему мы добавляем второй элемент массива ( 2 ).
3. При третьем запуске sum = 3 , к которому мы добавляем следующий элемент, и так далее…

Поток вычислений получается такой:

В виде таблицы, где каждая строка –- вызов функции на очередном элементе массива:

sum	current	result
первый вызов	0	1	1
второй вызов	1	2	3
третий вызов	3	3	6
четвёртый вызов	6	4	10
пятый вызов	10	5	15

Здесь отчётливо видно, как результат предыдущего вызова передаётся в первый аргумент следующего.

Мы также можем опустить начальное значение:

Результат – точно такой же! Это потому, что при отсутствии initial в качестве первого значения берётся первый элемент массива, а перебор стартует со второго.

Таблица вычислений будет такая же за вычетом первой строки.

Но такое использование требует крайней осторожности. Если массив пуст, то вызов reduce без начального значения выдаст ошибку.

Поэтому рекомендуется всегда указывать начальное значение.

Метод arr.reduceRight работает аналогично, но проходит по массиву справа налево.

Array.isArray

Массивы не образуют отдельный тип языка. Они основаны на объектах.

Поэтому typeof не может отличить простой объект от массива:

…Но массивы используются настолько часто, что для этого придумали специальный метод: Array.isArray(value). Он возвращает true , если value массив, и false , если нет.

Большинство методов поддерживают «thisArg»

Почти все методы массива, которые вызывают функции – такие как find , filter , map , за исключением метода sort , принимают необязательный параметр thisArg .

Этот параметр не объяснялся выше, так как очень редко используется, но для наиболее полного понимания темы мы обязаны его рассмотреть.

Вот полный синтаксис этих методов:

Значение параметра thisArg становится this для func .

Например, вот тут мы используем метод объекта army как фильтр, и thisArg передаёт ему контекст:

Если бы мы в примере выше использовали просто users.filter(army.canJoin) , то вызов army.canJoin был бы в режиме отдельной функции, с this=undefined . Это тут же привело бы к ошибке.

Вызов users.filter(army.canJoin, army) можно заменить на users.filter(user => army.canJoin(user)) , который делает то же самое. Последняя запись используется даже чаще, так как функция-стрелка более наглядна.

Итого

Шпаргалка по методам массива:

Для добавления/удаления элементов:

• push (. items) – добавляет элементы в конец,
• pop() – извлекает элемент с конца,
• shift() – извлекает элемент с начала,
• unshift(. items) – добавляет элементы в начало.
• splice(pos, deleteCount, . items) – начиная с индекса pos , удаляет deleteCount элементов и вставляет items .
• slice(start, end) – создаёт новый массив, копируя в него элементы с позиции start до end (не включая end ).
• concat(. items) – возвращает новый массив: копирует все члены текущего массива и добавляет к нему items . Если какой-то из items является массивом, тогда берутся его элементы.

Для поиска среди элементов:

• indexOf/lastIndexOf(item, pos) – ищет item , начиная с позиции pos , и возвращает его индекс или -1 , если ничего не найдено.
• includes(value) – возвращает true , если в массиве имеется элемент value , в противном случае false .
• find/filter(func) – фильтрует элементы через функцию и отдаёт первое/все значения, при прохождении которых через функцию возвращается true .
• findIndex похож на find , но возвращает индекс вместо значения.

Для перебора элементов:

• forEach(func) – вызывает func для каждого элемента. Ничего не возвращает.

Для преобразования массива:

• map(func) – создаёт новый массив из результатов вызова func для каждого элемента.
• sort(func) – сортирует массив «на месте», а потом возвращает его.
• reverse() – «на месте» меняет порядок следования элементов на противоположный и возвращает изменённый массив.
• split/join – преобразует строку в массив и обратно.
• reduce(func, initial) – вычисляет одно значение на основе всего массива, вызывая func для каждого элемента и передавая промежуточный результат между вызовами.

• Array.isArray(arr) проверяет, является ли arr массивом.

Обратите внимание, что методы sort , reverse и splice изменяют исходный массив.

Изученных нами методов достаточно в 99% случаев, но существуют и другие.

Функция fn вызывается для каждого элемента массива аналогично map . Если какие-либо/все результаты вызовов являются true , то метод возвращает true , иначе false .

arr.fill(value, start, end) – заполняет массив повторяющимися value , начиная с индекса start до end .

arr.copyWithin(target, start, end) – копирует свои элементы, начиная со start и заканчивая end , в собственную позицию target (перезаписывает существующие).

Полный список есть в справочнике MDN.

На первый взгляд может показаться, что существует очень много разных методов, которые довольно сложно запомнить. Но это гораздо проще, чем кажется.

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

Всякий раз, когда вам будет необходимо что-то сделать с массивом, а вы не знаете, как это сделать – приходите сюда, смотрите на таблицу и ищите правильный метод. Примеры помогут вам всё сделать правильно, и вскоре вы быстро запомните методы без особых усилий.

Задачи

Переведите текст вида border-left-width в borderLeftWidth

Напишите функцию camelize(str) , которая преобразует строки вида «my-short-string» в «myShortString».

То есть дефисы удаляются, а все слова после них получают заглавную букву.

Источник