Меню

Js как найти индекс объекта в массиве

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

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

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

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

  • 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 : вместо него добавляются его элементы:

Перебор: 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

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

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

  • 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) реализует общий алгоритм сортировки. Нам не нужно заботиться о том, как он работает внутри (в большинстве случаев это оптимизированная быстрая сортировка или Timsort). Она проходится по массиву, сравнивает его элементы с помощью предоставленной функции и переупорядочивает их. Всё, что остаётся нам, это предоставить fn , которая делает это сравнение.

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

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

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

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

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

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

Помните алгоритм сравнения строк? По умолчанию, он сравнивает буквы по их кодам.

Для многих алфавитов лучше использовать метод str.localeCompare , для правильной сортировки букв, таких как Ö .

Например, давайте отсортируем несколько стран на немецком языке:

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 похожи на методы выше, но они немного сложнее. Они используются для вычисления какого-нибудь единого значения на основе всего массива.

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

  • accumulator – результат предыдущего вызова этой функции, равен 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/reduceRight(func, initial) – вычисляет одно значение на основе всего массива, вызывая func для каждого элемента и передавая промежуточный результат между вызовами.
  • Array.isArray(arr) проверяет, является ли arr массивом.

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

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

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

Эти методы ведут себя примерно так же, как операторы || и && : если fn возвращает истинное значение, arr.some() немедленно возвращает true и останавливает перебор остальных элементов; если fn возвращает ложное значение, arr.every() немедленно возвращает false и также прекращает перебор остальных элементов.

Мы можем использовать every для сравнения массивов:

Источник статьи: http://learn.javascript.ru/array-methods

Изучаем JavaScript: поиск в массиве с помощью методов indexOf и lastIndexOf

В статье рассказывается о том, как использовать методы JavaScript indexOf и lastIndexOf для определения расположения элемента внутри массива.

Поиск элемента в массиве — знакомство с методом indexOf

Чтобы определить расположение элемента в массиве, можно воспользоваться методом indexOf() . Он возвращает индекс первого вхождения элемента, либо -1 , если он не найден.

Ниже приведен синтаксис метода indexOf() :

Метод indexOf() принимает два аргумента. searchElement -это элемент, который нужно найти в массиве. fromIndex – это индекс массива, с которого нужно начать поиск.

Аргумент fromIndex в качестве значения может принимать как положительное, так и отрицательное целое число. Если значение аргумента fromIndex будет отрицательным, метод indexOf() начнет поиск по всему массиву плюс значение fromIndex . Если опустить аргумент fromIndex , то метод начнет поиск с элемента 0 .

Учтите, что метод JavaScript array indexOf() при сравнении searchElement с элементами в массиве, использует алгоритм строгого равенства , схожий с оператором “ тройное равно ” (===) .

Примеры применения метода indexOf()

Предположим, что есть массив scores , в котором содержится шесть чисел:

В следующем примере метод indexOf() используется для поиска элементов в массиве scores :

В примере используется fromIndex с отрицательными значениями:

Предположим, что есть массив объектов. У каждого из них два свойства: name и age :

Следующие выражение возвращает -1 , даже если у первого элемента массива guests и searchElement будут одинаковые значения свойств name и age . Так как это два разных объекта:

Иногда нужно находить индексы всех упоминаний элемента в массиве. В приведенном ниже примере для этого в функции find() используется метод массива JavaScript indexOf() :

В следующем примере функция find() используется для возврата массива с позициями числа 10 в массиве scores :

Поиск элемента в массиве — знакомство с методом lastIndexOf()

У массивов есть еще один метод — lastIndexOf() , который предлагает почти тот же функционал, что и indexOf() .

Синтаксис метода lastIndexOf() :

Метод возвращает индекс последнего вхождения searchElement в массиве. Если элемент не найден, будет возвращено значение -1 .

В отличие от метода JavaScript indexOf() , lastIndexOf() сканирует массив в обратном направлении, начиная от значения fromIndex .

Представленное ниже выражение возвращает последние индексы чисел 10 и 20 в массиве scores :

Поиск элемента в массиве — примеры использования метода lastIndexOf()

Так как число 50 не находится в массиве, следующее выражение вернет -1 .

Мы научились использовать методы JavaScript indexOf() string и lastIndexOf() для поиска элементов в массиве.

Валентин Сейидов автор-переводчик статьи « JavaScript Array indexOf and lastIndexOf: Locating an Element in an Array »

Источник статьи: http://www.internet-technologies.ru/articles/javascript-metody-indexof-i-lastindexof-poisk-elementa-v-massive.html

Четыре метода поиска в массивах JavaScript

В JavaScript имеется множество полезных способов поиска элементов в массивах. Вы всегда можете использовать простой цикл for , но в ES6+ есть много методов циклического перебора массива, позволяющих легко найти все необходимое.

Какие же из множества разных методов использовать в каждом случае? Например, нужно ли вам знать при поиске, есть ли вообще в массиве такой элемент? Хотите ли вы получить индекс элемента или сам элемент?

Мы расскажем о нескольких разных методах, но важно понимать, что все эти методы являются встроенными методами прототипа Array. Это означает, что вам просто нужно прикрепить их к любому массиву, используя точечную нотацию. Также это означает, что данные методы недоступны для объектов или чего-либо еще, кроме массивов (хотя есть пересечение со строками).

Мы рассмотрим следующие методы массивов:

includes

Метод .includes() возвращает логическое значение и позволяет определить, есть ли в массиве указанный элемент. Он выдает простой ответ true или false . Базовый синтаксис выглядит так:

Как видите, в нашем примере у нас был только один параметр — valueToFind. Это значение, совпадение с которым нужно было найти в массиве. Дополнительный параметр fromIndex — это число, показывающее, от какого индекса нужно начинать поиск (значение по умолчанию 0, так что поиск выполняется во всем массиве). Итак, поскольку в нашем примере элемент ‘thick scales’ находится на индексе 0, следующий код выдаст значение false: alligator.includes(‘thick scales’, 1); потому что он выполняет поиск, начиная с индекса 1 и далее.

Теперь нужно отметить несколько важных вещей. Этот метод .includes() использует строгое сравнение. Если взять предыдущий пример, это означает, что следующий код выдаст значение false: alligator.includes(’80’); Это связано с тем, что хотя 80 == ’80’ имеет значение true, 80 === ’80’ имеет значение false — разные типы не проходят строгое сравнение.

Чем метод .find() отличается от метода includes()? Если в нашем примере мы просто заменим “includes” на “find”, мы получим следующее сообщение об ошибке:

Это связано с тем, что метод find требует передачи функции. Метод find не будет просто использовать простой оператор сравнения как это делает “includes()”. Вместо этого он будет передавать каждый элемент в функцию и смотреть, какой результат она возвращает: true или false. Итак, хотя это сработает: alligator.find(() => ‘thick scales’); , вы наверное захотите поместить в функцию собственный оператор сравнения, чтобы она возвращала актуальный результат.

Эта простая функция в нашем методе find ищет каждый элемент массива с псевдонимом ‘el’, который мы присвоили, и останавливается, когда находит первый результат, дающий значение true. В нашем случае true имеет свойство длины менее 12 (у чисел нет свойства длины). Разумеется, вы можете сделать эту функцию настолько сложной, насколько это необходимо, чтобы условие true соответствовало вашим потребностям.

Обратите внимание, что этот код не возвращает true . Метод find возвращает не логическое значение, а первый совпадающий элемент. Если совпадающего элемента нет, то есть, если ни один элемент не соответствует критериям, определенным в вашей функции, она возвращает значение undefined . Обратите внимание, что функция возвращает только первое совпадение, так что если критериям соответствует несколько элементов, функция выведет только первый из них. Если бы в нашем примере была другая строка длиной меньше 12 после ‘4 feet tall’, результат бы не изменился.

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

Мы знаем, что в нашем массиве есть 3 разных элемента, соответствующих первому условию (typeof el === ‘string’). Если бы это было единственное условие, метод бы возвратил первый результат, ‘thick scales’. Однако отличие заключается в том, что только у одного элемента есть индекс 2, и это элемент ‘4 foot tall’.

Если говорить об индексах, метод .findIndex() очень похож на этот. Этот метод также принимает функцию, но, как вы можете догадаться, он возвращает индекс совпадающего элемента, а не сам совпадающий элемент.

indexOf

Как и метод .includes() , метод .indexOf() использует строгое сравнение, а не функцию как метод .find() . Однако, в отличие от includes() , он возвращает индекс элемента, а не логическое значение. Вы также можете указать, с какого индекса массива можно начать поиск.

Я считаю indexOf() очень полезным методом. Это быстрый и удобный метод, позволяющий узнать, существует ли элемент в массиве, и где именно в массиве он находится. Как он показывает, существует ли элемент? Если он возвращает положительное число, мы знаем, что элемент существует, а если он возвращает значение -1, мы понимаем, что такого элемента нет.

Как видите, хотя мы могли бы получить эту же информацию с помощью методов find() или findIndex() , здесь нам нужно писать намного меньше кода. Нам не нужно писать функцию для сравнения, поскольку она уже входит в метод indexOf .

Как и другие методы, indexOf() возвращает индекс первого найденного совпадающего элемента. JavaScript позволяет использовать альтернативный метод массива, .lastIndexOf() . Как вы можете догадаться, он делает то же, что и метод indexOf() , но начинает с последнего индекса массива и движется назад. Также вы можете указать второй параметр, но помните, что индексы не меняются просто потому, что вы используете другой метод.

Бонус: filter

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

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

Заключение

Самый удобный для меня метод поиска — это метод find() , но, как видите, все зависит от конкретной ситуации.

  • Нужно ли вам просто узнать, есть ли такой элемент? Используйте .includes() .
  • Вы хотите получить сам элемент? Используйте .find() или .filter() , если вам нужно несколько элементов.
  • Хотите найти индекс элемента? Используйте .indexOf() или findIndex() для более сложного поиска.

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

If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.

Источник статьи: http://www.digitalocean.com/community/tutorials/js-array-search-methods-ru

JavaScript | Как получить индекс элемента в массиве?

Для примера возьмём массив из строк, чтобы сравнивать буквы, а не числа. Так легче понять. Всего 10 элементов в массиве.

Десять строк в массиве — JavaScript

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

В этом нам поможет метод прототипов объекта Array — findIndex(). Он проверяет элементы массива по какому-то определённому условию. Если » условие выполняется «(true) и элемент находится в массиве, тогда возвращается его индекс (целое положительное число или 0). Если » условие НЕ выполняется «(false) и элемент не найден в массиве, тогда возвращается «-1».

Важно отметить, что если в массиве будет несколько одинаковых значений у разных элементов, то метод findIndex() достанет только самый первый из них.

И ещё, метод findIndex() создаёт новый массив и не изменяет тот, на котором вызывается. Это важно для сохранности данных.

Решаем вопрос

Пробуем получить индекс элемента, у которого значение «zx»

Для каждого элемента i мы проверили условие, что i равняется строковому значению. Когда метод находил совпадения, тогда он возвращал номер индекса, существующего элемента.

Метод findIndex вернул индексы — JavaScript

Пробуем получить индекс элемента, которого нет в массиве

Метод findIndex не нашёл элементы по значению — JavaScript

Если в массиве несколько одинаковых значений?

Добавим несколько одинаковых элементов в массив:

12 строк в массиве — JavaScript

Теперь, если мы попробуем получить индекс элемента, который содержит «as» , то мы получим только индекс 3. Индексы 10 и 11 мы не увидим.

Только индекс первого совпадения — JavaScript

Источник статьи: http://efim360.ru/javascript-kak-poluchit-indeks-elementa-v-massive/

Поиск элементов в массиве JavaScript

Для поиска по массиву в JavaScript существует несколько методов прототипа Array, не считая что поиск можно выполнить и методами для перебора массива и в обычном цикле.

Итак, мы сегодня рассмотрим следующие варианты:

  • Array.includes()
  • Array.indexOf()
  • Array.find()
  • Array.findIndex()
  • Array.filter()
  • Array.forEach()

Array.includes() — есть ли элемент в массиве

Данный метод ищет заданный элемент и возвращает true или false , в зависимости от результата поиска. Принимает два параметра:

  • element — то, что мы будем искать
  • fromIndex (необязательный) — с какого индекса начинать поиск. По умолчанию с 0.

Как видно из примера выше, в первом случае мы получим true , т.к. начали с нулевого элемента массива. Во втором случае мы передали второй параметр — индекс, с которого нужно начать поиск — и получили false , т.к. дальше элемент не был найден.

Array.indexOf() — индекс искомого элемента

Данный метод, в отличие от предыдущего, возвращает индекс первого найденного совпадения. В случае если элемент не найден, будет возвращено число -1

Также принимает два параметра:

  • element — элемент, который мы будем искать
  • fromIndex (необязательный) — с какого индекса начинать поиск. По умолчанию с 0.

Как видно из примера выше, в первом случае мы получаем 0, т.к. сразу нашли первый элемент массива (первое совпадение, дальше поиск уже не выполняется). Во втором случае 4, т.к. начали поиск с индекса 1 и нашли следующее совпадение. В третьем примере мы получили результат -1, т.к. поиск начали с индекса 2, а элемент Orange в нашем массиве под индексом 1.

Так как данный метод возвращает индекс или -1, мы можем присвоить результат в переменную для дальнейшего использования:

Чтобы произвести какие-то действия над найденным элементом массива, мы можем использовать следующий синтаксис:

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

Array.find() — найти элемент по условию

Данный метод callback и thisArg в качестве аргументов и возвращает первое найденное значение.

Callback принимает несколько аргументов:
item — текущий элемент массива
index — индекс текущего элемента
currentArray — итерируемый массив

Данный метод полезен тем, что мы можем найти и получить сразу и искомый элемент, и его index

Также работа кода прекратиться как только будет найден нужный элемент и второй элемент (дубликат) не будет найден.

В случае если ничего не найдено будет возвращен undefined .

Array.findIndex() — найти индекс элемента в массиве

Этот метод похож на метод find() , но возвращать будет только индекс элемента, который соответствует требованию. В случае, если ничего не найдено, вернет -1

Ну и по аналогии с предыдущим методом, поиск завершается после первого совпадения.

Поиск всех совпадений в массиве

Метод filter() кроме всего остального также можно использовать для поиска по массиву. Предыдущие методы останавливаются при первом соответствии поиска, а данный метод пройдется по массиву до конца и найдет все элементы. Но данный метод вернет новый массив, в который войдут все элементы соответствующие условию.

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

Подробнее про метод JS filter() можете прочитать в этом посте.

Для этих же целей можно использовать метод forEach(), который предназначен для перебора по массиву:

В массив indexes мы получили индексы найденных элементов, это 0 и 4 элементы. Также в зависимости от вашей необходимости, можно создать объект, где ключом будет индекс, а значением сам элемент:

Поиск в массиве объектов

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

Первый способ. С использованием метода map для массива

В данном случае по массиву arr мы проходим и на каждой итерации из текущего элемента (а это объект со свойствами name и age ) возвращаем имя человека в новый массив и сразу же выполняем поиск по новому массиву на имя Anna. При совпадении нам будет возвращен индекс искомого элемента в массиве.

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

Заключение

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

Источник статьи: http://web-dev.guru/javascript/poisk-jelementov-v-massive-javascript/

Работа с массивами в JavaScript

Статья, в которой рассмотрены различные моменты, связанные с использованием массивов в JavaScript.

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

Удаление элемента (ов) из массива осуществляется одним из следующих методов:

  • .pop() — предназначен для удаления последнего элемента массива.
  • .shift() — предназначен для удаление первого элемента массива.
  • .splice() — может использоваться для удаления одного или нескольких элементов из массива, начиная с указанного.

Как удалить массив

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

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

Для добавления элемента в массив можно воспользоваться одним из следующих методов:

  • .push() — предназначен для добавления элемента в конец массива.
  • .unshift() — предназначен для добавления элемента в начало массива.
  • .splice() — может использоваться для добавления одного или нескольких элементов в массив, начиная с указанного.

Как вывести массив

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

Например, вывести содержимое некоторого массива в элемент с id=»array» :

Как создать пустой массив

Создание пустого массива осуществляется следующими конструкциями:

Как очистить массив

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

Как объединить массивы

Для того чтобы объединить 2 или больше массивов можно воспользоваться методом concat() . Этот метод не изменяет существующие массивы, он создаёт новый массив, содержащий элементы объединяемых массивов.

Как узнать является ли объект массивом

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

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

Для того чтобы найти некоторый элемент в массиве можно воспользоваться методом indexOf() . Значение, которое надо найти у элемента указывается в качестве первого параметра ( valueElement ). Данный параметр является обязательным. Кроме этого при необходимости можно указать индекс элемента ( startIndex ) в качестве 2 параметра данного метода, чтобы поиск элемента осуществлялся не с начала, а с указанного элемента.

В качестве результата метод indexOf() возвращает индекс найденного элемента или значение -1 . В том случае если указанное значение имеют несколько элементов, то данный метод возвращает индекс первого найденного элемента.

Как найти максимальное значение массива

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

Как найти минимальное значение массива

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

Как заполнить массив с помощью метода fill

Метод fill() предназначен для заполнения массива или его части с помощью указанного значения:

Перемешать массив

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

Скопировать массив

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

Сортировка числового массива по убыванию

Для сортировки числового массива по убыванию можно использовать метод sort() :

Сортировка числового массива по возрастанию

Для сортировки числового массива по возрастанию можно использовать метод sort() :

Как проверить существование элемента в массиве

Для того чтобы проверить есть ли указанный элемент в массиве или нет можно воспользоваться методом indexOf() .

Сумма значений элементов массива

Определение суммы элементов числового массива:

Как создать двумерный и многомерный массивы в JavaScript

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

Например, создадим массив 5×5:

Например, создадим массив 3×2:

Например, создадим пустой двумерный массив:

Например, спроектируем функцию arrayTable, предназначенную для создания табличного массива:

Например, создадим трехмерный массив 3×3×3:

Источник статьи: http://itchief.ru/javascript/working-with-arrays

Array.prototype.findIndex()

Сводка

Метод findIndex() возвращает индекс в массиве, если элемент удовлетворяет условию проверяющей функции. В противном случае возвращается -1.

Также смотрите метод find() , который возвращает значение найденного в массиве элемента вместо его индекса.

Синтаксис

Параметры

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

Текущий обрабатываемый элемент в массиве.

Индекс текущего обрабатываемого элемента в массиве.

Массив, по которому осуществляется проход.

Необязательный параметр. Значение, используемое в качестве this при выполнении функции callback .

Описание

Метод findIndex вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве, до тех пор, пока она не вернёт true . Если такой элемент найден, метод findIndex немедленно вернёт индекс этого элемента. В противном случае, метод findIndex вернёт -1. Функция callback вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались.

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

Если в метод findIndex был передан параметр thisArg , при вызове callback он будет использоваться в качестве значения this . В противном случае в качестве значения this будет использоваться значение undefined .

Метод findIndex не изменяет массив, для которого он был вызван.

Диапазон элементов, обрабатываемых методом findIndex , устанавливается до первого вызова функции callback . Элементы, добавленные в массив после начала выполнения метода findIndex , не будут посещены функцией callback . Если существующие, непосещение элементы массива изменяются функцией callback , их значения, переданные в функцию, будут значениями на тот момент времени, когда метод findIndex посетит их; удалённые элементы посещены не будут.

Примеры

Пример: поиск индекса простого числа в массиве

Следующий пример находит в массиве индекс элемента, являющийся простым числом (либо возвращает -1, если в массиве нет простых чисел).

Полифил

Этот метод был добавлен в спецификации ECMAScript 6 и пока может быть недоступен во всех реализациях JavaScript. Однако, вы можете использовать следующий кусочек кода в качестве полифила:

Источник статьи: http://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

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

Введение — Что искать?

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

  1. Искать значение элемента
  2. Искать значения элементов
  3. Искать индекс элемента
  4. Искать индексы элементов

№ 0 — Искать элемент массива

В массиве могут быть не только примитивы, но и сложные объекты с разным уровнем вложенности.

Предположим, что мы хотим найти в этом массиве объектов такой ПЕРВЫЙ элемент, который содержит строку ‘Дима’. Причём мы хотим чтобы нам вернулся весь объект целиком. Как это сделать?

Нас в принципе интересует ЛЮБОЙ ОДИН объект из данного массива, а не все возможные.

Для этого нужно использовать метод find()

№ 1 — Искать значение элемента

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

То есть когда алгоритм бежит по массиву и находит первое встречное нужное нам значение, то алгоритм просто возвращает нам ИСТИНУ (true). Мы как-бы убедились, что такое значение УЖЕ СУЩЕСТВУЕТ и можно делать другую часть задач.

Для такого варианта лучше всего подходит метод includes() для экземпляров класса Array .

Пример работы метода includes в массиве — JavaScript

Пример из жизни

Вы строите одноэтажные дома. У вас есть база данных людей, которые заказывали у вас услугу строительства дома. К вам пришёл человек с жалобой на оказанную услугу спустя 15 лет. Вы знаете его ФИО. Вы пробегаете по массиву и сопоставляете ФИО. Вам нужно проверить в массиве человека.

Если этот человек действительно заказывал услугу у вас, то вам вернётся TRUE (истина). После этого вы можете предложить ему экспертизу.

Если этот человек НЕ заказывал услугу у вас, то вам вернётся FALSE (ложь). После этого вы можете предложить ему поискать документы, в которых указана другая строительная компания, а не ваша.

№ 2 — Искать значения элементов

Это тот случай в котором мы уже знаем, какое значение хотим найти в массиве, но нас больше всего интересует вопрос сколько таких значений присутствует в массиве? Мы хотим сосчитать количество повторений.

В этом нам поможет метод filter() , который возвращает новый массив элементов с отобранными значениями по условию. Когда мы получаем новый массив, то у него всегда можем узнать длину. Длина будет, как раз, тем самым количеством повторений.

Пример работы метода filter в массиве — JavaScript

Пример из жизни

У нас есть интернет-магазин. Мы продаём строительный крепёж (шурупы, болты, гвозди, гайки и т.п..). Есть список заказов.

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

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

Если мы увидим, что за месяц товар был куплен 122 раза, а его на складе 0 кг, тогда нам нужно увеличить закупаемое количество до 750 кг. Этот товар популярен.

№ 3 — Искать индекс элемента

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

С этой работой хорошо справляется метод findIndex() .

Пример работы метода findIndex в массиве — JavaScript

Пример из жизни

Мы в библиотеке. Нам нужна любая книга о муравьях. Мы делаем запрос в базу и получаем объект книги. Как это выглядит с технической стороны?

У нас есть несколько объектов книг (имитация базы данных):

Массив книг с животными — JavaScript

В этом случае мы посылаем только часть информации в надежде получить всё остальное. Частью информации является запрос названия книги — «Муравьи».

В ответ нам приходит номер индекса первого подходящего элемента массива.

findIndex вернут индекс 2 — JavaScript

Но по факту само название книги или его индекс в базе данных нас мало интересует. Нам же нужен текст. Мы хотим получить информацию.

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

Третий элемент массива — JavaScript

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

Текст найденной книги — JavaScript

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

Зачем мы так сделали? Почему одна а не все? Представьте, что у вас в базе данных лежат не книги, а разметка всех HTML-страниц сайтов в интернете. Вы хотите отыскать какую-то информацию, которая может встречаться на страницах в сети. Скорее всего под ваш запрос будет найдено огромное количество документов. Если вы захотите получить их все разом, то этот процесс может надолго затянуться и вы не увидите вообще ничего (просто устанете ждать).

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

Но в ряде случаев одним результатом не обойтись, читайте далее.

№ 4 — Искать индексы элементов

Этот вариант поиска предполагает возврат индексов элементов массива, которые соответствуют заданному условию отбора. То есть мы хотим точно знать под каким индексом находится каждый элемент, подходящий под условие. Для решения этой задачи нам нужно использовать метод entries() для объектов-прототипов Array.

Метод entries() пробегает по массиву и возвращает итератор массива, в котором при обходе будут «вытащены» индексы. (По умолчанию мы не видим индексов массивов). Для «вытаскивания» индексов из итератора нам нужно передать его в метод from() конструктора Array . Либо использовать оператор спред «. «

Например, мы хотим получить индексы элементов со значениями 5. Как это сделать?

Пример работы метода entries и map в массиве — JavaScript

В обоих случаях мы получим индексы элементов

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

Выполним сбор информации о счетах Пети:

Индексы счетов Пети — JavaScript

В базе данных счетов под индексами 0, 3 и 4 будут лежать суммы. Их можно будет достать по отдельности, например:

Сейчас мы знаем какие суммы хранит Петя и на каких счетах. Если Петя «накосячит» по жизни, то теперь его в любой момент можно легко поставить на место. Например можно обнулить его счета.

У Пети больше нет денег — JavaScript

У Пети больше нет денег — Петю «Обнулили». Это был показательный пример того, зачем нужно собирать индексы элементов массива по заданным условиям. Если знаешь индекс массиве, то можешь поменять значение под ним.

Пример из жизни

Мы производим автомобили. В цехах работают роботы-сборщики. Люди только смотрят в мониторы — следят за общим процессом. Дилеры стали возвращать нам нашу продукцию по рекламации. Конечные покупатели стали слышать стук в двигателе после 2000 км пробега. Мы собрали данные о 25000 автомобилей от дилеров и принимаем решение отозвать автомобили, для устранения неисправности.

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

Мы делаем выборки в массиве по станкам и понимаем, что 21000 автомобилей работали с деталью станка № 4, 3000 авто с № 3 и 1000 авто с № 5. Мы почти на 100% уверены, что проблему нужно искать у станка № 4.

Мы собираем инженеров и конструкторов и идём в производственный цех. Мы смотрим на потолок, а оттуда капает вода прямо на станок № 4. Некоторые брызги затрагивают станок № 5. А под станком № 3 образовалась огромная лужа. Мы выявляем неисправность и благодарим JavaScript программиста, который написал алгоритм поиска дефектного станка.

Источник статьи: http://efim360.ru/javascript-poisk-v-massive/

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *