Как проверить массив на наличие элемента в JavaScript?
Массив — это тип данных, который может содержать несколько значений в одной переменной. Это будет отличным решением при наличии списка разных элементов, которые хотите хранить. Сортировка разных элементов также помогает при поиске. Знание основных операций массивов важно для улучшения ваших навыков программирования. Рассмотрим пример массива:
Пример
html> html> body> h2>Массивы JavaScript h2> p id="demo"> p> script> var flowers = ["rose", "daisy", "lily"]; document.getElementById("demo").innerHTML = flowers; script> body> html>Довольно часто нам может понадобится проверить наличие элемента в массиве JavaScript. В этой статье мы расскажем о подобных методах.
Прежде всего мы ознакомимся с простым, но работающим решением. Нам понадобится указать оператор:
var array = [11, 20, 8, 6, 17]; var el = 6; //Element to be searched for(var i=0; ilength; i++) < if(el === array[i]) < console.log('Element Found'); > >Как видите массив переходит из index 0 в array.length — 1 index. Он работает следующим образом: в условном операторе if мы проверяем, равен ли элемент в массиве значению элемента в поиске. Если это так, печатаем ‘Element found’.
Теперь укажем условный оператор for и переменную, чтобы указать найден ли элемент.
var array = [11, 20, 8, 6, 17]; var el = 6; //Element to be searched var flag = 0; // Initially 0 - Not found for(var i=0; ilength; i++) < if(el === array[i]) < flag = 1; > > //Check if flag value changed. if(flag == 1) < console.log('Element Found'); > else < console.log('Element Not Found'); >Если элемент найден, значение flag будет изменен внутри условного оператора if, и именно таким образом мы можем сделать проверку на наличие элемента.
Теперь рассмотрим другой метод проверки, который сегодня часто используется. Этот метод называется includes().
Данный метод возвращает true, если массив содержит указанный элемент, а в противном случае — false:
var array = [11, 20, 8, 6, 17]; console.log( array.includes(6) ); //TrueРассмотрим другой пример:
Пример
html> html> body> h1>Array includes() h1> p>Проверьте, содержит ли массив "Daisy": p> p id="demo"> p> p>strong>Note: strong> Метод includes не поддерживается в Edge 13 (и более старых версиях). p> script> var fruits = ["Rose", "Daisy", "Lily", "Jasmine"]; var n = flowers.includes("Daisy"); document.getElementById("demo").innerHTML = n; script> body> html>Метод includes() чувствителен к регистру.
Есть еще один полезный метод. Метод indexOf method используется, чтобы найти индекс элемента массива. Он указывает, содержит ли массив указанный элемент. Если указанный элемент найден в методе JavaScript indexOf, он возвращает номер индекса данного элемента. Если элемент не найден, indexOf возвращает значение -1. Код будет иметь такой вид:
var myArray = ["Rose", "Lily", "Daisy", "Jasmine"]; if (myArray.indexOf(searchTerm) === -1) < console.log("element doesn't exist"); > else < console.log("element found"); >Эти два метода имеют два параметра: element и start.
| Параметр | Описание |
|---|---|
| element | Необходимый параметр. Элемент, который хотим найти. |
| start | Дополнительный параметр. По умолчанию — 0. Указывает, с какой позиции в массиве начать поиск. |
Как проверить есть ли элемент в массиве js
Для этого в JS существует метод includes() , который работает на массивах. Метод includes() принимает два аргумента, один из которых обязательный. Это искомый элемент. После выполнения метод возвращает true или false в зависимости от того, есть элемент в массиве или нет. Ниже я привёл пример использования данного метода:
const collection = ['something', 'hexlet', 'something else']; const isHexletInCollection = collection.includes('hexlet'); console.log(isHexletInCollection); // => true 08 сентября 2022
Для поиска элемента в массиве можно использовать метод indexOf() , если элемент не найден, он возвращает -1 , если найден — индекс элемента:
const collection = ['something', 'hexlet', 'something else']; const isHexletInCollection = arr.indexOf('hexlet') != -1; console.log(isHexletInCollection); // => true 18 октября 2022
Для того, чтобы проверить, есть ли элемент в массиве, могут помочь не только стандартные методы, о которых писали выше. К примеру, есть библиотека Lodash, в которой присутствуют методы для поиска элементов в массиве.
Метод _.indexOf()
Этот метод устроен достаточно хитро, его можно использовать в двух вариантах:
- Первый вариант использования:
const numbers = [1, 2, 1, 2]; const findNumber = 2; const findIndex = _.indexOf(numbers, findNumber); // => 1 //В переменной findIndex окажется число 1 (индекс искомого элемента). //Если число 2 бы не нашлось, что в переменную findIndex было бы присвоено -1. Как видно из примера выше, метод нашёл тот элемент, который встретился первым. Но, что делать, если в данном массиве есть и другие элементы, которые равны искомому?
Здесь начинается самое интересное. Данный метод может найти элемент, который равен искомому, но после определенного индекса.
- Второй вариант использования:
const numbers = [1, 2, 1, 2]; const findNumber = 2; const indexAfter = 2; const findIndex = _.indexOf(numbers, findNumber, indexAfter); // => 3 // Ищем число 2 после индекса 2. В итоге в переменной оказалось число 3. //Почему? 3 - индекс искомого числа, который встретился после второго индекса. Если вдруг вам нужно выполнить поиск элемента массива не слева направо, а наоборот, в библиотеке Lodash найдётся и такой метод.
Он работает ровно зеркально методу _.indexOf().
Метод _.lastIndexOf()
- Первый вариант использования:
const numbers = [1, 2, 1, 2]; const findNumber = 2; const findIndex = _.lastIndexOf(numbers, findNumber); // => 3 В переменную findIndex вернулся индекс совпадающего значения, но не от начала массива, а от его конца.
- Второй вариант использования:
const numbers = [1, 2, 1, 2]; const findNumber = 2; const indexAfter = 2; const findIndex = _.lastIndexOf(numbers, findNumber, indexAfter); // => 1 В переменную findIndex вернулся индекс совпадающего значения, после второго индекса (но опять же не от начала массива, а от его конца).
Как узнать, есть ли элемент в массиве?
Есть массив: [‘dog’, ‘cat’, ‘hamster’, ‘bird’, ‘fish’] , нужно вывести в консоль true , если массив содержит dog и false — если такой элемент отсутствует, но насколько я понимаю доступ к элементу в массиве проходит по номеру array[..] , каким образом можно проверить наличие того или иного элемента?
Отслеживать
13.7k 12 12 золотых знаков 43 43 серебряных знака 75 75 бронзовых знаков
задан 10 ноя 2015 в 22:21
353 2 2 золотых знака 4 4 серебряных знака 8 8 бронзовых знаков
– user176262
10 ноя 2015 в 22:28
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
Маленькая интродукция
Задача поиска элемента в массиве стоит перед всеми достаточно часто и хорошо бы расписать, как это можно сделать.
Ищут обычно в массиве элементы типа Number , String или Object . Естественно, самый быстрый способ поиска — по элементам типа Number , сравнение числа, даже очень большого, происходит очень быстро, гораздо проще проверить один элемент, чем лексиграфически сравнивать строки, а с объектами вообще другая история. Если мы ищем именно тот объект, который мы добавили в массив, то есть сравниваем ссылки — это так же быстро, как и сравнивать числа, а вот если же надо искать по свойствам объекта, то это может весьма и весьма затянуться. В особо сложных случаях, советую составлять какой-нибудь хэш объекта и строить отдельным массив-карту, в которой уже спокойно искать всё, что надо найти.
Разберем 6 способов сделать это на нативном JS разной новизны и 3 способа с их разбором на популярных фреймворках: jQuery, underscore и lodash.
Часть первая, нативная, в стиле аллегро
Для начала надо пройтись по родным возможностям языка и посмотреть, что можно сделать самим.
Поиск в лоб
Попробуем просто идти по элементам массива, пока мы не встретим то, что нам нужно. Как всегда самое простое решение является в среднем самым быстрым.
function contains(arr, elem) < for (var i = 0; i < arr.length; i++) < if (arr[i] === elem) < return true; >> return false; > Работает везде. Сравнивает строго, с помощью === . Легко можно заменить на == , бывает полезно, когда элементы массива разных типов, но может замедлить поиск. Его можно и модифицировать, добавив возможность начинать поиск элемента с конца. Шикарно ищет цифры, строки. Немного расширив, можно добавить возможность поиска элемента по своему условию (это поможет нам искать по свойствам объекта или, например, первый элемент, который больше 100500):
function contains(arr, pred) < for (var i = 0; i < arr.length; i++) < if (typeof pred == 'function' && pred(arr[i], i, arr) || arr[i] === elem) < return true; >> return false; > Array.prototype.indexOf()
Array.prototype.indexOf(searchElement[, fromIndex = 0]) — старый добрый метод, заставляющий всех мучиться со своей -1 в случае, когда элемента нет.
function contains(arr, elem)
function contains(arr, elem, from)
Array.prototype.lastIndexOf()
Array.prototype.lastIndexOf(searchElement[, fromIndex = arr.length — 1]) — справедливости ради надо рассказать и про него. Работает полностью аналогично Array.prototype.indexOf() , но только полностью наоборот (поиск идет в обратном порядке и fromIndex изначально отсчитывается с конца). Заменил конструкцию ret != -1 на !!~ret ради забавы.
function contains(arr, elem, from)
Array.prototype.find()
Array.prototype.find(callback[, thisArg]) — модный стильный и молодежный ES6, со всеми вытекающими:
function contains(arr, elem) < return arr.find((i) =>i === elem) != -1; > Возвращает элемент или -1 , если ничего не найдено. Ищет с помощью callback(elem, index, arr) , то есть, если эта функция вернет true , то это именно тот самый, искомый элемент. Конечно, эту функцию можно задавать самому, поэтому метод универсален.
Array.prototype.findIndex()
Array.prototype.findIndex(callback[, thisArg]) — полностью аналогичный предыдущему метод, за исключением того, что функция возвращает не элемент, а индекс. Забавы ради сделаю её с возможностью передать свою функцию:
function contains(arr, pred) < var f = typeof pred == 'function' ? pred : ( i =>i === pred ); return arr.findIndex(f) != -1; > Array.prototype.includes()
Array.prototype.includes(searchElement[, fromIndex]) — а это уже ES7, с ещё пока оочень сырой поддержкой. Наконец-то у нас будет специальный метод, чтобы узнать, есть ли элемент в массиве! Поздравляю!
arr.includes(elem); Это всё, что нужно, чтобы найти элемент. Аргументы у этой функции полностью аналогичны Array.prototype.indexOf() . А вот вернет он true в случае успеха и false в обратном. Естественно искать по свойствам объектов нельзя, для этого есть Array.prototype.find() . Должен быть самым быстрым, но. Возможно, что он и станет со временем самым быстрым.
Часть вторая, со вниманием, но чужая и в стиле сонаты
Теперь, наконец, можно поговорить об этой же теме, но в контексте парочки фреймворков! Говорят, что всегда хорошо посмотреть сначала, как делают другие, перед тем, как начнешь делать это сам. Может это откроет нам глаза на что-нибудь интересное!
jQuery
jQuery.inArray(value, array [, fromIndex ]) — между прочим весьма быстрый метод, по тестам.
Использует внутри строгое равенство === и возвращает -1 , если ничего не нашел, а если все таки нашёл, то вернет его индекс. Для удобства и одинаковости обернем её в функцию:
function contains(arr, elem)
А теперь поговорим, как она работает. Вот, что она представляет из себя в версии 2.1.3 :
inArray: function( elem, arr, i )
Где indexOf это вот это:
// Use a stripped-down indexOf as it's faster than native // http://jsperf.com/thor-indexof-vs-for/5 indexOf = function( list, elem ) < var i = 0, len = list.length; for ( ; i < len; i++ ) < if ( list[i] === elem ) < return i; >> return -1; > Забавный комментарий говорит, что так быстрее, чем родной Array.prototype.indexOf() (могу предположить, что из-за отсутствия всех проверок) и предлагает посмотреть тесты производительности.
По сути — это самый первый способ из первой части.
Underscore
_.contains(list, value) — вот такой метод предлагает нам популярная библиотека для работы с коллекциями. То же самое, что и _.include(list, value) .
Использует === для сравнения. Вернёт true , если в list содержится элемент, который мы ищем. Если list является массивом, будет вызван метод indexOf.
_.contains = _.include = function(obj, target) < if (obj == null) return false; if (nativeIndexOf && obj.indexOf === nativeIndexOf) return obj.indexOf(target) != -1; return any(obj, function(value) < return value === target; >); >; Где nativeIndexOf — штука, которая говорит, что Array.prototype.indexOf() существует, а obj.indexOf === nativeIndexOf говорит, что list — массив. Теперь понятно, почему этот метод медленнее, чем jQuery.inArray() , просто обертка над Array.prototype.indexOf() . Ничего интересного.
Lodash
_.includes(collection, target, [fromIndex=0]) — вот последняя надежда на новые мысли, от второй знаменитейшей библиотеки для работы с коллекциями. То же самое, что _.contains() и _.include() .
Возвращает true , если содержит и false если нет. fromIndex индекс элемента, с которого начинаем поиск.
function includes(collection, target, fromIndex, guard) < var length = collection ? getLength(collection) : 0; if (!isLength(length)) < collection = values(collection); length = collection.length; >if (typeof fromIndex != 'number' || (guard && isIterateeCall(target, fromIndex, guard))) < fromIndex = 0; >else < fromIndex = fromIndex < 0 ? nativeMax(length + fromIndex, 0) : (fromIndex || 0); >return (typeof collection == 'string' || !isArray(collection) && isString(collection)) ? (fromIndex -1) : (!!length && getIndexOf(collection, target, fromIndex) > -1); > guard — служебный аргумент. Сначала находится длина коллекции, выбирается fromIndex , а потом. нет, не Array.prototype.indexOf() ! Для поиска в строке используется String.prototype.indexOf() , а мы идем дальше в _.getIndexOf() и в результате попадём в ло-дашскую имплементацию indexOf() :
function indexOf(array, value, fromIndex) < var length = array ? array.length : 0; if (!length) < return -1; >if (typeof fromIndex == 'number') < fromIndex = fromIndex < 0 ? nativeMax(length + fromIndex, 0) : fromIndex; >else if (fromIndex) < var index = binaryIndex(array, value); if (index < length && (value === value ? (value === array[index]) : (array[index] !== array[index]))) < return index; >return -1; > return baseIndexOf(array, value, fromIndex || 0); > Она интересна тем, что fromIndex может принимать значения как Number , так и Boolean и если это всё таки значение булевого типа и оно равно true , то функция будет использовать бинарный поиск по массиву! Прикольно. Иначе же выполнится indexOf() попроще:
function baseIndexOf(array, value, fromIndex) < if (value !== value) < return indexOfNaN(array, fromIndex); >var index = fromIndex - 1, length = array.length; while (++index < length) < if (array[index] === value) < return index; >> return -1; > Интересный ход для случая, когда мы ищем NaN (напомню, что из-за досадной ошибки он не равен сам себе). Выполнится indexOfNaN() , и действительно ни один из всех способов описанных ранее не смог бы найти NaN , кроме тех, естественно, где мы могли сами указать функцию для отбора элементов.
Можно предложить просто обернуть _.indexOf() для поиска элемента:
function contains(arr, elem, fromIndex)
Где fromIndex будет либо индексом откуда начинаем искать, либо true , если мы знаем, что arr отсортирован.
Заключение, хотя и в стиле интермеццо
И да, все эти варианты имеют смысл, только если момент с поиском данных част в вашем алгоритме или поиск происходит на очень больших данных. Вот приведу ниже несколько тестов на поиск элементов типа Number и String в массивах длинной 1000000 (миллион) элементов для трех случаев, когда элемент находится вначале массива, в середине (можно считать за среднюю по палете ситуацию) и в конце (можно считать за время поиска отсутствующего элемента, кроме метода с Array.prototype.lastIndexOf() ).
- Number , 1000000 элементов, искомый элемент в начале;
- Number , 1000000 элементов, искомый элемент в середине;
- Number , 1000000 элементов, искомый элемент в конце;
- String , 1000000 элементов, искомый элемент в начале;
- String , 1000000 элементов, искомый элемент в середине;
- String , 1000000 элементов, искомый элемент в конце.
Результаты тестов могут сильно зависеть от версии браузера, да и от самих браузеров, как этого избежать не знаю, но рекомендую протестить на нескольких.
Видно, что в среднем везде выигрывает первый способ из первой части (написанный собственноручно), а второе место обычно делят lоdash и Array.prototype.includes() .
Да, прошу заметить, что если взбредёт в голову искать NaN , то это может не получиться почти во всех методах, так как NaN !== NaN .
JavaScript | Как проверить есть ли элемент в массиве?
Нужно воспользоваться методом includes() для объектов-прототипов Array . Метод includes() может принимать два параметра. Первым параметром всегда будет искомый элемент. После выполнения возвращает true или false.
Например, у нас есть массив:
var massiv = [44, 555, 6666, 7]
Проверяем наличие в массиве числа 333: massiv.includes(333) --Результат-- false
Проверяем наличие в массиве числа 555: massiv.includes(555) --Результат-- true
Информационные ссылки
Стандарт ECMAScript — Раздел «23.1.3.13 Array.prototype.includes ( searchElement [ , fromIndex ] )» — https://tc39.es/ecma262/#sec-array.prototype.includes
Вам также может понравиться
Опубликовано 11.09.2021
ECMAScript | Список и Запись | Типы спецификации
Список Тип Список (List) используется для объяснения оценки списков аргументов (раздел 13.3.8) в выражениях new, в вызовах функций и в других алгоритмах, […]
Опубликовано 24.01.2022
JavaScript | Как сложить все числа в массиве?
Сложение чисел массива методом reduce() massiv.reduce((a,b)=>a+b) или massiv.reduce((a,b)=>b+a) Мы передаём первым параметром функцию, которая возвращает нам результат сложения предыдущего значения со следующим. […]
Опубликовано 29.07.2020
Тип события mouseenter пользовательского интерфейса MouseEvent
Тип события мыши mouseenter Интерфейс MouseEvent Синх / Асин Синхронный Всплытие Нет Надежные цели Element Отменяемый Нет Сдержанный Нет Действие по умолчанию […]
Опубликовано 07.11.2020
document.getElementsByTagName(«param»)
Команда document.getElementsByTagName(«param») возвращает HTML-коллекцию HTML-элементов со страницы (документа). Элементы коллекции тянут за собой всех потомков. Забор данных осуществляется в древовидном порядке, […]