JavaScript | Как получить индекс элемента в массиве?
Для примера возьмём массив из строк, чтобы сравнивать буквы, а не числа. Так легче понять. Всего 10 элементов в массиве.
Десять строк в массиве — JavaScript
Как узнать под каким индексом находится элемент в массиве?
В этом нам поможет метод прототипов объекта Array — findIndex(). Он проверяет элементы массива по какому-то определённому условию. Если « условие выполняется «(true) и элемент находится в массиве, тогда возвращается его индекс (целое положительное число или 0). Если « условие НЕ выполняется «(false) и элемент не найден в массиве, тогда возвращается «-1».
Важно отметить, что если в массиве будет несколько одинаковых значений у разных элементов, то метод findIndex() достанет только самый первый из них.
И ещё, метод findIndex() создаёт новый массив и не изменяет тот, на котором вызывается. Это важно для сохранности данных.
Решаем вопрос
Пробуем получить индекс элемента, у которого значение «zx»
Для каждого элемента i мы проверили условие, что i равняется строковому значению. Когда метод находил совпадения, тогда он возвращал номер индекса, существующего элемента.
Метод findIndex вернул индексы — JavaScript
Пробуем получить индекс элемента, которого нет в массиве
Метод findIndex не нашёл элементы по значению — JavaScript
Если в массиве несколько одинаковых значений?
Добавим несколько одинаковых элементов в массив:
12 строк в массиве — JavaScript
Только индекс первого совпадения — JavaScript
Информационные ссылки
findIndex() — метод прототипов объекта Array
Работа с массивами в JavaScript
Статья, в которой рассмотрены различные моменты, связанные с использованием массивов в JavaScript.
Как удалить элемент массива
Удаление элемента (ов) из массива осуществляется одним из следующих методов:
Как удалить массив
Для того чтобы удалить массив, хранящейся в некоторой переменной, достаточно присвоить ей другое значение.
Как добавить элемент в массив
Для добавления элемента в массив можно воспользоваться одним из следующих методов:
Как вывести массив
Для того чтобы вывести массив в некоторый элемент на веб-странице его предварительно необходимо преобразовать в строку.
Например, вывести содержимое некоторого массива в элемент с id=»array» :
Как создать пустой массив
Создание пустого массива осуществляется следующими конструкциями:
Как очистить массив
Для того чтобы удалить все элементы из некоторого массива можно воспользоваться одним из следующих способов:
Как объединить массивы
Как узнать является ли объект массивом
Для того чтобы узнать какой тип данных содержит переменная можно воспользоваться одной из следующих конструкций:
Как узнать индекс элемента в массиве
Как найти максимальное значение массива
Для того чтобы найти максимальное значение массива можно воспользоваться следующей конструкцией:
Как найти минимальное значение массива
Для того чтобы найти минимальное значение массива можно воспользоваться следующей конструкцией:
Как заполнить массив с помощью метода fill
Метод fill() предназначен для заполнения массива или его части с помощью указанного значения:
Перемешать массив
Для того чтобы перемешать элементы в массиве можно воспользоваться следующей функцией:
Скопировать массив
Для того чтобы скопировать массив используйте следующий код:
Сортировка числового массива по убыванию
Для сортировки числового массива по убыванию можно использовать метод sort() :
Сортировка числового массива по возрастанию
Для сортировки числового массива по возрастанию можно использовать метод sort() :
Как проверить существование элемента в массиве
Сумма значений элементов массива
Определение суммы элементов числового массива:
Как создать двумерный и многомерный массивы в JavaScript
Готовых функций для создания и работы с двумерными и многомерными массивами в JavaScript нет. Их создание осуществляется посредством того, что каждый элемент первоначального массива в свою очередь тоже должен является массивом.
Например, создадим массив 5×5:
Например, создадим массив 3×2:
Например, создадим пустой двумерный массив:
Например, спроектируем функцию arrayTable, предназначенную для создания табличного массива:
Например, создадим трехмерный массив 3×3×3:
Работа с массивами в JavaScript
Массив в JavaScript – это глобальный объект, который используется для хранения данных. Массивы состоят из упорядоченных коллекций или списков и используют нумерованные индексы (начиная с 0) для доступа к определенным элементам.
Массивы очень полезны, поскольку они хранят несколько значений в одной переменной, что может уменьшить объем кода и упорядочить его, сделать код читабельным и более простым в поддержке. Массив может содержать любой тип данных, включая числа, строки и объекты.
Чтобы понять, в чем преимущества массивов, попробуйте присвоить названия океанов отдельным переменным. Откройте файл oceans.js и добавьте:
// Assign the five oceans to five variables
const ocean1 = «Pacific»;
const ocean2 = «Atlantic»;
const ocean3 = «Indian»;
const ocean4 = «Arctic»;
const ocean5 = «Antarctic»;
Такой код быстро станет очень большим, его будет неудобно читать и поддерживать.
Массив решает эту проблему так:
// Assign the five oceans
let oceans = [
«Pacific»,
«Atlantic»,
«Indian»,
«Arctic»,
«Antarctic»,
];
Вместо того чтобы создавать 5 переменных, вы можете поместить все компоненты в одну переменную. Массивы хранятся в квадратных скобках [].
Чтобы получить доступ к какому-либо компоненту, укажите его индекс:
// Print out the first item of the oceans array
oceans[0];
Pacific
Данный мануал научит создавать массивы, индексировать их, а также добавлять, изменять, удалять и выводить элементы массива и использовать циклы в массивах.
Создание массива
Создать массив в JavaScript можно двумя способами:
Попробуйте создать массив с видами акул через литерал массива, который инициализируется с помощью []. Создайте файл sharks.js и добавьте в него:
// Initialize array of shark species with array literal
let sharks = [
«Hammerhead»,
«Great White»,
«Tiger»,
];
Такой же массив можно создать с помощью конструктора массивов:
// Initialize array of shark species with array constructor
let sharks = new Array(
«Hammerhead»,
«Great White»,
«Tiger»,
);
Оба метода создадут массив. Однако литерал массива (квадратные скобки) является гораздо более распространенным и предпочтительным методом, так как конструктор new Array() может стать причиной несогласованности, и программа будет выдавать неожиданные результаты.
Вывести весь массив можно так:
// Print out the entire sharks array
sharks;
[ ‘Hammerhead’, ‘Great White’, ‘Tiger’ ]
Массивы часто используются для группировки списков похожих типов данных, но технически они могут содержать любое сочетание значений, включая другие массивы.
// Initialize array of mixed datatypes
let mixedData = [
«String»,
null,
7,
[
«another»,
«array»,
],
];
Теперь нужно разобраться, как массивы индексируются.
Примечание: Последний элемент в массиве может быть с конечной запятой или без нее. Обычно их пропускают, но многие предпочитают включать их в свой код, поскольку это упрощает управление версиями и элементами в массиве. Обратите внимание, что конечные запятые не допускаются в файлах JSON.
Читайте также: Основы работы с JSON
Индексация массивов
Если вы знакомы с индексацией строк в JavaScript, вы знаете общий подход к индексации массивов.
В массивах нет пар «ключ/ значение». Они индексируются целыми числами, начиная с 0. Вот пример массива SeaCreatures (файл seacreatures.js):
let seaCreatures = [
«octopus»,
«squid»,
«shark»,
«seahorse»,
«starfish»,
];
Вот как индексируются его элементы:
| octopus | squid | shark | seahorse | starfish |
| 0 | 1 | 2 | 3 | 4 |
Первый элемент, octopus, имеет индекс 0. Последний элемент, starfish, имеет индекс 4. Индексация начинается с 0, а не с 1, как мы привыкли считать в жизни.
Чтобы узнать, сколько элементов содержит массив, используйте свойство length.
Как видите, массив индексируется числами 0-4, а свойство length выводит фактическое количество элементов в массиве, начиная счет с 1.
Чтобы узнать индекс определенного элемента в массиве, используйте метод indexOf().
Индексы соответствуют элементам в массиве и позволяют получить доступ к каждому элементу отдельно.
Доступ к элементам массива
Доступ к элементу в массиве JavaScript можно получить, обратившись к номеру индекса элемента в квадратных скобках.
Вы уже значете, что 0 всегда будет выводить первый элемент в массиве. Чтобы найти последний элемент, нужно использовать операцию со свойством length и поместить ее результат как новый индексный номер.
Если запрашиваемый элемент не существует, вы получите значение undefined.
Чтобы получить доступ к элементам во вложенном массиве, нужно также указать номер индекса, соответствующий элементу во вложенном массиве:
В приведенном выше примере мы обратились к массиву в позиции 1 переменной nestedArray, а затем к элементу в позиции 0 во вложенном массиве.
Добавление элемента в массив
Переменная seaCreatures содержит 5 элементов, которые индексируются числами от 0 до 4.
Чтобы добавить новый элемент в массив, присвойте ему значение следующего индекса:
seaCreatures[5] = «whale»;
seaCreatures;
[ ‘octopus’,
‘squid’,
‘shark’,
‘seahorse’,
‘starfish’,
‘whale’ ]
Если при добавлении элемента вы случайно пропустите индекс, это создаст неопределенный элемент в массиве.
seaCreatures[7] = «pufferfish»;
seaCreatures;
[ ‘octopus’,
‘squid’,
‘shark’,
‘seahorse’,
‘starfish’,
‘whale’,
,
‘pufferfish’ ]
Получить доступ к неопределенному элементу массива не получится:
Таких ошибок можно избежать с помощью метода push(), который добавляет элемент в конец массива:
// Append lobster to the end of the seaCreatures array
seaCreatures.push(«lobster»);
seaCreatures;
[ ‘octopus’,
‘squid’,
‘shark’,
‘seahorse’,
‘starfish’,
,
‘whale’,
‘pufferfish’,
‘lobster’ ]
Есть также метод unshift(), который добавляет элемент в начало массива:
// Append dragonfish to the beginning of the seaCreatures array
seaCreatures.unshift(«dragonfish»);
seaCreatures;
[ ‘dragonfish’,
‘octopus’,
‘squid’,
‘shark’,
‘seahorse’,
‘starfish’,
‘whale’,
,
‘pufferfish’,
‘lobster’ ]
Удаление элемента из массива
Чтобы удалить определенный элемент из массива, нужно использовать метод splice(). Попробуйте удалить случайно добавленный неопределенный элемент из массива seaCreatures.
seaCreatures.splice(7, 1);
seaCreatures;
[ ‘dragonfish’,
‘octopus’,
‘squid’,
‘shark’,
‘seahorse’,
‘starfish’,
‘whale’,
‘pufferfish’,
‘lobster’ ]
Метод splice() принимает два параметра. Первый параметр – индекс элемента, который нужно удалить (в данном случае это 7), а второй – количество удаляемых элементов (1).
Метод splice() изменит исходную переменную. Если вы хотите, чтобы исходная переменная оставалась неизменной, используйте slice() и присвойте результат новой переменной.
let newArray = slice(7, 1);
Метод pop() удаляет последний элемент массива:
// Remove the last item from the seaCreatures array
seaCreatures.pop();
seaCreatures;
[ ‘dragonfish’,
‘octopus’,
‘squid’,
‘shark’,
‘seahorse’,
‘starfish’,
‘whale’,
‘pufferfish’ ]
Первый элемент массива можно удалить с помощью метода shift():
// Remove the first item from the seaCreatures array
seaCreatures.shift();
seaCreatures;
[ ‘octopus’,
‘squid’,
‘shark’,
‘seahorse’,
‘starfish’,
‘whale’,
‘pufferfish’ ]
Методы pop() и shift() позволяют удалять элементы с начала и конца массивов. Рекомендуется по возможности использовать метод pop(), так как он сохраняет исходные номера индексов остальных элементов массива.
Изменение элементов в массиве
Перезаписать любое значение в массиве и назначить новое значение можно с помощью оператора присваивания (как в переменных).
// Assign manatee to the first item in the seaCreatures array
seaCreatures[0] = «manatee»;
seaCreatures;
[ ‘manatee’,
‘squid’,
‘shark’,
‘seahorse’,
‘starfish’,
‘whale’,
‘pufferfish’ ]
Также для этого можно использовать метод splice() с новым параметром. К примеру, чтобы изменить элемент seahorse (индекс 3), можно удалить его и добавить новый элемент на его место.
// Replace seahorse with sea lion using splice method
seaCreatures.splice(3, 1, «sea lion»);
seaCreatures();
[ ‘manatee’,
‘squid’,
‘shark’,
‘sea lion’,
‘starfish’,
‘whale’,
‘pufferfish’ ]
Итерация массива
Итерация массива выполняется с помощью ключевого слова for и свойства length.
Для примера попробуйте создать массив shellfish и вывести каждый индекс и значение в консоль.
// Create an array of shellfish species
let shellfish = [
«oyster»,
«shrimp»,
«clam»,
«mussel»,
];
// Loop through the length of the array
for (let i = 0; i
Также можно использовать для этого цикл for…of, новую функцию JavaScript.
// Create an array of aquatic mammals
let mammals = [
«dolphin»,
«whale»,
«manatee»,
];
// Loop through each mammal
for (let mammal of mammals) <
console.log(mammal);
>
dolphin
whale
manatee
Цикл for…of не возвращает индексы элементов в массиве. Но, как правило, он является более простым и быстрым способом итерации массива.
Использование циклов позволяет выводить все значения массива (например, при отображении элементов базы данных на веб-сайте).
Заключение
Массивы – базовая часть программирования в JavaScript. В этом мануале вы узнали, как создать массив и как индексируются массивы. Также вы научились выполнять некоторые из наиболее распространенных задач: создание, удаление и изменение элементов, итерация массивов.
Array
Массив ( Array ) в JavaScript является глобальным объектом, который используется для создания массивов; которые представляют собой высокоуровневые спископодобные объекты.
Создание массива
Доступ к элементу массива по индексу
Итерирование по массиву
Добавление элемента в конец массива
Удаление последнего элемента массива
Удаление первого элемента массива
Добавление элемента в начало массива
Поиск номера элемента в массиве
Удаление элемента с определённым индексом
Удаление нескольких элементов, начиная с определённого индекса
Создание копии массива
Синтаксис
Описание
Доступ к элементам массива
Аналогично, к свойствам объекта, являющимся зарезервированными словами(!) можно получить доступ только посредством скобочной нотации:
Взаимосвязь свойства length с числовыми свойствами
При установке свойства в массиве, если свойство имеет действительный индекс и этот индекс выходит за пределы текущих границ массива, движок соответствующим образом обновит свойство length :
Увеличиваем свойство length
Однако, уменьшение свойства length приведёт к удалению элементов.
Создание массива с использованием результата сопоставления
Свойства и элементы, возвращаемые из данного сопоставления, описаны ниже:
Методы массивов
Массивы предоставляют множество методов. Чтобы было проще, в этой главе они разбиты на группы.
Добавление/удаление элементов
Мы уже знаем методы, которые добавляют и удаляют элементы из начала или конца:
splice
Как удалить элемент из массива?
Так как массивы – это объекты, то можно попробовать delete :
Поэтому для этого нужно использовать специальные методы.
Метод arr.splice(str) – это универсальный «швейцарский нож» для работы с массивами. Умеет всё: добавлять, удалять и заменять элементы.
Этот метод проще всего понять, рассмотрев примеры.
В следующем примере мы удалим 3 элемента и заменим их двумя другими.
Здесь видно, что splice возвращает массив из удалённых элементов:
Метод splice также может вставлять элементы без удаления, для этого достаточно установить deleteCount в 0 :
В этом и в других методах массива допускается использование отрицательного индекса. Он позволяет начать отсчёт элементов с конца, как тут:
slice
Он возвращает новый массив, в который копирует элементы, начиная с индекса start и до end (не включая end ). Оба индекса start и end могут быть отрицательными. В таком случае отсчёт будет осуществляться с конца массива.
concat
Метод arr.concat создаёт новый массив, в который копирует данные из других массивов и дополнительные значения.
Он принимает любое количество аргументов, которые могут быть как массивами, так и простыми значениями.
Если аргумент argN – массив, то все его элементы копируются. Иначе скопируется сам аргумент.
Обычно он просто копирует элементы из массивов. Другие объекты, даже если они выглядят как массивы, добавляются как есть:
Для корректной обработки в объекте должны быть числовые свойства и length :
Перебор: forEach
Метод arr.forEach позволяет запускать функцию для каждого элемента массива.
Например, этот код выведет на экран каждый элемент массива:
А этот вдобавок расскажет и о своей позиции в массиве:
Результат функции (если она вообще что-то возвращает) отбрасывается и игнорируется.
Поиск в массиве
Далее рассмотрим методы, которые помогут найти что-нибудь в массиве.
indexOf/lastIndexOf и includes
Методы arr.indexOf, arr.lastIndexOf и arr.includes имеют одинаковый синтаксис и делают по сути то же самое, что и их строковые аналоги, но работают с элементами вместо символов:
Кроме того, очень незначительным отличием includes является то, что он правильно обрабатывает NaN в отличие от indexOf/lastIndexOf :
find и findIndex
Представьте, что у нас есть массив объектов. Как нам найти объект с определённым условием?
Здесь пригодится метод arr.find.
Его синтаксис таков:
Функция вызывается по очереди для каждого элемента массива:
В реальной жизни массивы объектов – обычное дело, поэтому метод find крайне полезен.
filter
На тот случай, если найденных элементов может быть много, предусмотрен метод arr.filter(fn).
Преобразование массива
Перейдём к методам преобразования и упорядочения массива.
Метод arr.map является одним из наиболее полезных и часто используемых.
Он вызывает функцию для каждого элемента массива и возвращает массив результатов выполнения этой функции.
Например, здесь мы преобразуем каждый элемент в его длину:
sort(fn)
Вызов arr.sort() сортирует массив на месте, меняя в нём порядок элементов.
Не заметили ничего странного в этом примере?
По умолчанию элементы сортируются как строки.
Функция должна для пары значений возвращать:
Например, для сортировки чисел:
Теперь всё работает как надо.
Давайте возьмём паузу и подумаем, что же происходит. Упомянутый ранее массив arr может быть массивом чего угодно, верно? Он может содержать числа, строки, объекты или что-то ещё. У нас есть набор каких-то элементов. Чтобы отсортировать его, нам нужна функция, определяющая порядок, которая знает, как сравнивать его элементы. По умолчанию элементы сортируются как строки.
Кстати, если мы когда-нибудь захотим узнать, какие элементы сравниваются – ничто не мешает нам вывести их на экран:
В процессе работы алгоритм может сравнивать элемент с другими по нескольку раз, но он старается сделать как можно меньше сравнений.
На самом деле от функции сравнения требуется любое положительное число, чтобы сказать «больше», и отрицательное число, чтобы сказать «меньше».
Это позволяет писать более короткие функции:
Помните стрелочные функции? Можно использовать их здесь для того, чтобы сортировка выглядела более аккуратной:
Будет работать точно так же, как и более длинная версия выше.
reverse
Метод arr.reverse меняет порядок элементов в arr на обратный.
Он также возвращает массив arr с изменённым порядком элементов.
split и join
В примере ниже таким разделителем является строка из запятой и пробела.
У метода split есть необязательный второй числовой аргумент – ограничение на количество элементов в массиве. Если их больше, чем указано, то остаток массива будет отброшен. На практике это редко используется:
Вызов split(s) с пустым аргументом s разбил бы строку на массив букв:
reduce/reduceRight
Методы arr.reduce и arr.reduceRight похожи на методы выше, но они немного сложнее. Они используются для вычисления какого-нибудь единого значения на основе всего массива.
Функция применяется по очереди ко всем элементам массива и «переносит» свой результат на следующий вызов.
При вызове функции результат её вызова на предыдущем элементе массива передаётся как первый аргумент.
Этот метод проще всего понять на примере.
Тут мы получим сумму всех элементов массива всего одной строкой:
Давайте детальнее разберём, как он работает.
Поток вычислений получается такой:
В виде таблицы, где каждая строка –- вызов функции на очередном элементе массива:
| 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 не может отличить простой объект от массива:
Большинство методов поддерживают «thisArg»
Этот параметр не объяснялся выше, так как очень редко используется, но для наиболее полного понимания темы мы обязаны его рассмотреть.
Вот полный синтаксис этих методов:
Например, вот тут мы используем метод объекта army как фильтр, и thisArg передаёт ему контекст:
Итого
Шпаргалка по методам массива:
Для добавления/удаления элементов:
Для поиска среди элементов:
Для перебора элементов:
Для преобразования массива:
Изученных нами методов достаточно в 99% случаев, но существуют и другие.
Полный список есть в справочнике MDN.
На первый взгляд может показаться, что существует очень много разных методов, которые довольно сложно запомнить. Но это гораздо проще, чем кажется.
Внимательно изучите шпаргалку, представленную выше, а затем, чтобы попрактиковаться, решите задачи, предложенные в данной главе. Так вы получите необходимый опыт в правильном использовании методов массива.
Всякий раз, когда вам будет необходимо что-то сделать с массивом, а вы не знаете, как это сделать – приходите сюда, смотрите на таблицу и ищите правильный метод. Примеры помогут вам всё сделать правильно, и вскоре вы быстро запомните методы без особых усилий.
Задачи
Переведите текст вида border-left-width в borderLeftWidth
То есть дефисы удаляются, а все слова после них получают заглавную букву.
