Как проверить массив на наличие элемента в JavaScript?
Массив — это тип данных, который может содержать несколько значений в одной переменной. Это будет отличным решением при наличии списка разных элементов, которые хотите хранить. Сортировка разных элементов также помогает при поиске. Знание основных операций массивов важно для улучшения ваших навыков программирования. Рассмотрим пример массива:
Пример
Довольно часто нам может понадобится проверить наличие элемента в массиве JavaScript. В этой статье мы расскажем о подобных методах.
Прежде всего мы ознакомимся с простым, но работающим решением. Нам понадобится указать оператор:
Как видите массив переходит из index 0 в array.length — 1 index. Он работает следующим образом: в условном операторе if мы проверяем, равен ли элемент в массиве значению элемента в поиске. Если это так, печатаем ‘Element found’.
Теперь укажем условный оператор for и переменную, чтобы указать найден ли элемент.
Если элемент найден, значение flag будет изменен внутри условного оператора if, и именно таким образом мы можем сделать проверку на наличие элемента.
Теперь рассмотрим другой метод проверки, который сегодня часто используется. Этот метод называется includes().
Данный метод возвращает true, если массив содержит указанный элемент, а в противном случае — false:
Как узнать, есть ли элемент в массиве?
Есть массив: [‘dog’, ‘cat’, ‘hamster’, ‘bird’, ‘fish’] , нужно вывести в консоль true , если массив содержит dog и false — если такой элемент отсутствует, но насколько я понимаю доступ к элементу в массиве проходит по номеру array[..] , каким образом можно проверить наличие того или иного элемента?
Маленькая интродукция
Задача поиска элемента в массиве стоит перед всеми достаточно часто и хорошо бы расписать, как это можно сделать.
Ищут обычно в массиве элементы типа Number , String или Object . Естественно, самый быстрый способ поиска — по элементам типа Number , сравнение числа, даже очень большого, происходит очень быстро, гораздо проще проверить один элемент, чем лексиграфически сравнивать строки, а с объектами вообще другая история. Если мы ищем именно тот объект, который мы добавили в массив, то есть сравниваем ссылки — это так же быстро, как и сравнивать числа, а вот если же надо искать по свойствам объекта, то это может весьма и весьма затянуться. В особо сложных случаях, советую составлять какой-нибудь хэш объекта и строить отдельным массив-карту, в которой уже спокойно искать всё, что надо найти.
Разберем 6 способов сделать это на нативном JS разной новизны и 3 способа с их разбором на популярных фреймворках: jQuery, underscore и lodash.
Часть первая, нативная, в стиле аллегро
Для начала надо пройтись по родным возможностям языка и посмотреть, что можно сделать самим.
Поиск в лоб
Попробуем просто идти по элементам массива, пока мы не встретим то, что нам нужно. Как всегда самое простое решение является в среднем самым быстрым.
Работает везде. Сравнивает строго, с помощью === . Легко можно заменить на == , бывает полезно, когда элементы массива разных типов, но может замедлить поиск. Его можно и модифицировать, добавив возможность начинать поиск элемента с конца. Шикарно ищет цифры, строки. Немного расширив, можно добавить возможность поиска элемента по своему условию (это поможет нам искать по свойствам объекта или, например, первый элемент, который больше 100500):
Array.prototype.indexOf()
Array.prototype.indexOf(searchElement[, fromIndex = 0]) — старый добрый метод, заставляющий всех мучиться со своей -1 в случае, когда элемента нет.
Поддерживается он везде, кроме IE <= 7, но это уже давно забытая шутка. Данный метод выполняет поиск элемента строго от меньшего индекса к большему, применяя при сравнении === . Увы, по свойствам объекта мы так искать не сможем. arr.indexOf(searchElement, fromIndex) принимает два аргумента, первый searchElement — это элемент который ищем, а второй, fromIndex , индекс с которого начнем искать (отрицательный говорит интерпретатору начинать поиск с arr.length + fromIndex индекса). Аккуратней, если вы укажете fromIndex больше длины массива, метод нераздумывая вернёт -1 .
Array.prototype.lastIndexOf()
Array.prototype.lastIndexOf(searchElement[, fromIndex = arr.length — 1]) — справедливости ради надо рассказать и про него. Работает полностью аналогично Array.prototype.indexOf() , но только полностью наоборот (поиск идет в обратном порядке и fromIndex изначально отсчитывается с конца). Заменил конструкцию ret != -1 на !!
ret ради забавы.
Array.prototype.find()
Array.prototype.find(callback[, thisArg]) — модный стильный и молодежный ES6, со всеми вытекающими:
Возвращает элемент или -1 , если ничего не найдено. Ищет с помощью callback(elem, index, arr) , то есть, если эта функция вернет true , то это именно тот самый, искомый элемент. Конечно, эту функцию можно задавать самому, поэтому метод универсален.
Array.prototype.findIndex()
Array.prototype.findIndex(callback[, thisArg]) — полностью аналогичный предыдущему метод, за исключением того, что функция возвращает не элемент, а индекс. Забавы ради сделаю её с возможностью передать свою функцию:
Array.prototype.includes()
Array.prototype.includes(searchElement[, fromIndex]) — а это уже ES7, с ещё пока оочень сырой поддержкой. Наконец-то у нас будет специальный метод, чтобы узнать, есть ли элемент в массиве! Поздравляю!
Это всё, что нужно, чтобы найти элемент. Аргументы у этой функции полностью аналогичны Array.prototype.indexOf() . А вот вернет он true в случае успеха и false в обратном. Естественно искать по свойствам объектов нельзя, для этого есть Array.prototype.find() . Должен быть самым быстрым, но. Возможно, что он и станет со временем самым быстрым.
Часть вторая, со вниманием, но чужая и в стиле сонаты
Теперь, наконец, можно поговорить об этой же теме, но в контексте парочки фреймворков! Говорят, что всегда хорошо посмотреть сначала, как делают другие, перед тем, как начнешь делать это сам. Может это откроет нам глаза на что-нибудь интересное!
jQuery
jQuery.inArray(value, array [, fromIndex ]) — между прочим весьма быстрый метод, по тестам.
Использует внутри строгое равенство === и возвращает -1 , если ничего не нашел, а если все таки нашёл, то вернет его индекс. Для удобства и одинаковости обернем её в функцию:
А теперь поговорим, как она работает. Вот, что она представляет из себя в версии 2.1.3 :
Где indexOf это вот это:
Забавный комментарий говорит, что так быстрее, чем родной Array.prototype.indexOf() (могу предположить, что из-за отсутствия всех проверок) и предлагает посмотреть тесты производительности.
По сути — это самый первый способ из первой части.
Underscore
_.contains(list, value) — вот такой метод предлагает нам популярная библиотека для работы с коллекциями. То же самое, что и _.include(list, value) .
Использует === для сравнения. Вернёт true , если в list содержится элемент, который мы ищем. Если list является массивом, будет вызван метод indexOf.
Где nativeIndexOf — штука, которая говорит, что Array.prototype.indexOf() существует, а obj.indexOf === nativeIndexOf говорит, что list — массив. Теперь понятно, почему этот метод медленнее, чем jQuery.inArray() , просто обертка над Array.prototype.indexOf() . Ничего интересного.
Lodash
_.includes(collection, target, [fromIndex=0]) — вот последняя надежда на новые мысли, от второй знаменитейшей библиотеки для работы с коллекциями. То же самое, что _.contains() и _.include() .
Возвращает true , если содержит и false если нет. fromIndex индекс элемента, с которого начинаем поиск.
guard — служебный аргумент. Сначала находится длина коллекции, выбирается fromIndex , а потом. нет, не Array.prototype.indexOf() ! Для поиска в строке используется String.prototype.indexOf() , а мы идем дальше в _.getIndexOf() и в результате попадём в ло-дашскую имплементацию indexOf() :
Она интересна тем, что fromIndex может принимать значения как Number , так и Boolean и если это всё таки значение булевого типа и оно равно true , то функция будет использовать бинарный поиск по массиву! Прикольно. Иначе же выполнится indexOf() попроще:
Интересный ход для случая, когда мы ищем NaN (напомню, что из-за досадной ошибки он не равен сам себе). Выполнится indexOfNaN() , и действительно ни один из всех способов описанных ранее не смог бы найти NaN , кроме тех, естественно, где мы могли сами указать функцию для отбора элементов.
Можно предложить просто обернуть _.indexOf() для поиска элемента:
Где fromIndex будет либо индексом откуда начинаем искать, либо true , если мы знаем, что arr отсортирован.
Заключение, хотя и в стиле интермеццо
И да, все эти варианты имеют смысл, только если момент с поиском данных част в вашем алгоритме или поиск происходит на очень больших данных. Вот приведу ниже несколько тестов на поиск элементов типа Number и String в массивах длинной 1000000 (миллион) элементов для трех случаев, когда элемент находится вначале массива, в середине (можно считать за среднюю по палете ситуацию) и в конце (можно считать за время поиска отсутствующего элемента, кроме метода с Array.prototype.lastIndexOf() ).
Результаты тестов могут сильно зависеть от версии браузера, да и от самих браузеров, как этого избежать не знаю, но рекомендую протестить на нескольких.
Видно, что в среднем везде выигрывает первый способ из первой части (написанный собственноручно), а второе место обычно делят lоdash и Array.prototype.includes() .
Да, прошу заметить, что если взбредёт в голову искать NaN , то это может не получиться почти во всех методах, так как NaN !== NaN .
Проверьте, содержит ли массив значение в JavaScript
Часто мы оказываемся в ситуации, чтобы проверить, содержит ли массив значение в JavaScript. Несмотря на то, что функции поиска могут быть закодированы с помощью базовых синтаксисов JavaScript с использованием циклов, полезно знать встроенные функции, доступные для поиска по массиву в JavaScript, их использование, типы возврата и поведение. Это значительно упрощает нашу задачу, поскольку нам нужно меньше писать код. Функциональность будет более эффективной и менее подверженной ошибкам со встроенными функциями. Давайте посмотрим, как искать элемент в массиве.
Использование функции .indexOf() для проверки наличия значения в массиве в JavaScript
Функция .indexOf() — это часто используемая функция в javascript. Он хорошо работает при поиске элемента в массиве или даже в строке.
Синтаксис
Параметр
Для поиска требуется элемент в качестве параметра. И необязательный параметр, который сообщает функции индекс, с которого должен начинаться поиск (начиная с 0 ). Если мы предоставим отрицательное значение, это будет означать, что поиск будет начинаться с конца массива в указанной позиции.
Возвращаемое значение
Функция возвращает индекс искомого элемента, начиная с 0 в массиве, если ей удалось найти элемент. В противном случае он вернет -1 , указывая на то, что элемент не может быть найден. Если в массиве более одного совпадения, то функция .indexOf() вернет индекс первого совпадения.
Поддержка браузера
Функция .indexOf() поддерживается всеми основными версиями браузеров.
Применение
Использование функции indexOf() для массива выглядит следующим образом.
Для функции поиска мы проверяем, не превышает ли возвращаемый тип .indexOf (searchText) значение -1 . Если да, то результат поиска должен быть true иначе false . Давайте посмотрим на тот же пример, рассмотренный выше, чтобы проверить, существует ли элемент в массиве.
Использование функции .includes() для проверки наличия значения в массиве в JavaScript
Функция includes() в JavaScript проверяет, присутствует ли данный элемент в массиве. Возвращает логическое значение. Следовательно, он лучше всего подходит для проверки условия если .
Синтаксис
Параметр
Функция принимает два параметра. Обычно мы используем эту функцию в виде .includes(searchString) . Параметр searchString — это элемент, который мы хотим найти, а параметр index относится к индексу массива, начиная с которого следует искать. Параметр index не является обязательным.
Возвращаемое значение
.includes() возвращает true , если searchString найден как элемент массива. Если не найден, функция возвращает false.
Поддержка браузера
Функция .includes() работает почти во всех веб-браузерах, кроме Internet Explorer. Следовательно, если ваш проект поддерживается IE, возможно, вам придется воспользоваться функцией indexOf() .
Применение
Давайте посмотрим на применение includes() в массиве.
Функцию includes() можно напрямую использовать в условиях если , поскольку она возвращает логическое значение в качестве вывода. Приведенный выше пример можно использовать в условном если следующим образом. Просто имейте в виду, что этот код может не работать в IE, так как .includes() в нем не поддерживается.
Использование функции .find() для поиска элемента в массиве в JavaScript
Другой способ проверить наличие элемента в массиве — использовать функцию .find() . По сравнению с функциями .indexOf() и .includes() , .find() принимает функцию в качестве параметра и выполняет ее для каждого элемента массива. Он вернет первое значение, которому удовлетворяет условие, указанное в функции параметра.
Синтаксис
Параметр
Функция Array.find() принимает функцию в качестве входного параметра. Обычно в качестве параметров мы используем стрелочные функции. И эти стрелочные функции могут содержать проверки условий типа item => item> 21 . Еще один необязательный параметр — index , который представляет индекс текущей итерации. .Find() выполняет стрелочную функцию для каждого элемента массива. Следовательно, он предоставляет итератор в качестве аргумента функции стрелки для помощи в дальнейших условных проверках.
Возвращаемое значение
.find() немного отличается от функций indexOf() , includes() в javascript. Он возвращает значение элемента, если он найден, иначе функция возвращает undefined.
Поддержка браузера
Как и функция .includes() , .find() работает почти во всех веб-браузерах, кроме Internet Explorer. Следовательно, мы должны быть уверены, что наш проект не поддерживается для IE, прежде чем планировать использовать такие функции для операций с массивами.
Применение
Обратитесь к следующему использованию в массиве.
Нас может немного удивить результат age.find (i => i> 21) , поскольку он возвращает 43 вместо 23 , которое было следующим по величине числом после 21 в age . множество. Обратите внимание, что функция .find() возвращает следующий элемент, который удовлетворяет условию, указанному в функции массива, в хронологическом порядке. Для поиска элемента с блоком if мы можем использовать следующий код.
Использование функции .filter() для поиска элемента в массиве в JavaScript
Функция .filter() в основном используется в операциях обработки массивов. Особенно, когда речь идет о фильтрации элементов, удовлетворяющих критерию, вне массива. Он возвращает массив элементов, удовлетворяющих критериям, определенным в функции, переданной в качестве аргумента.
Синтаксис
Имеет тот же синтаксис, что и Array.find() .
Параметр
Функция Array.filter() принимает в качестве параметра встроенную функцию или стрелочную функцию. Стрелочная функция будет содержать критерии фильтра. Функция .filter() выполняет стрелочную функцию для каждого элемента массива и возвращает элементы, которые удовлетворяют условиям, указанным в стрелочной функции. Стрелочная функция будет иметь на входе keyword , а текущую итерацию — как index .
Возвращаемое значение
В отличие от функций поиска по массиву, которые мы видели до сих пор, .filter() возвращает массив, содержащий элементы, удовлетворяющие условиям, указанным в стрелочной функции. Если элемент найден, возвращаемый массив будет содержать необходимые элементы, иначе функция вернет пустой массив.
Поддержка браузера
Функция .filter() поддерживается всеми браузерами, включая Internet Explorer. Таким образом, вы можете использовать функцию .filter() , не беспокоясь о ожидаемой поддержке браузером.
Использование: Использование этой функции следующее
Как видно из результата, функция filter() возвращает массив. Если нам нужно найти элемент в массиве, мы можем использовать функцию filter() , как показано в следующем примере кода. Мы используем атрибут .length массива, возвращаемого функцией filter() , чтобы определить, может ли он найти элемент или нет. Если функция возвращает пустой массив, это означает, что не удалось найти ключевое слово для поиска.
Использование простого цикла for для поиска элемента
Мы можем найти элемент в массиве с помощью базовых методов javascript, условия if и цикла for . Следующий код вернет истину, если элемент найден, иначе вернет ложь. Если один и тот же элемент встречается более чем один раз, функция возвращает только первое совпадение.
Работа с массивами в 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, предназначенную для создания табличного массива: