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

Array.prototype.find()

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

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

Если вам нужно найти позицию элемента или наличие элемента в массиве, используйте Array.prototype.indexOf() или Array.prototype.includes() соответственно.

Синтаксис

arr.find(callback[, thisArg])

Параметры

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

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

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

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

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

Возвращаемое значение

Значение элемента из массива, если элемент прошёл проверку, иначе undefined .

Описание

Метод find вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве, до тех пор, пока она не вернёт true . Если такой элемент найден, метод find немедленно вернёт значение этого элемента. В противном случае, метод find вернёт undefined . До Firefox 34 функция callback не вызывалась для «дырок» в массивах (bug 1058394).

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

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

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

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

Примеры

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

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

function isPrime(element, index, array)  var start = 2; while (start  Math.sqrt(element))  if (element % start++  1)  return false; > > return element > 1; > console.log([4, 6, 8, 12].find(isPrime)); // undefined, не найдено console.log([4, 5, 8, 12].find(isPrime)); // 5 

Полифил

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

// https://tc39.github.io/ecma262/#sec-array.prototype.find if (!Array.prototype.find) < Object.defineProperty(Array.prototype, 'find', < value: function(predicate) < // 1. Let O be ? ToObject(this value). if (this == null) < throw new TypeError('"this" is null or not defined'); >var o = Object(this); // 2. Let len be ? ToLength(? Get(O, "length")). var len = o.length >>> 0; // 3. If IsCallable(predicate) is false, throw a TypeError exception. if (typeof predicate !== 'function') < throw new TypeError('predicate must be a function'); >// 4. If thisArg was supplied, let T be thisArg; else let T be undefined. var thisArg = arguments[1]; // 5. Let k be 0. var k = 0; // 6. Repeat, while k < len while (k < len) < // a. Let Pk be ! ToString(k). // b. Let kValue be ? Get(O, Pk). // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). // d. If testResult is true, return kValue. var kValue = o[k]; if (predicate.call(thisArg, kValue, k, o)) < return kValue; >// e. Increase k by 1. k++; > // 7. Return undefined. return undefined; >, configurable: true, writable: true >); >

Спецификации

Specification
ECMAScript Language Specification # sec-array.prototype.find

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

• Array.prototype.findIndex() Экспериментальная возможность
• Array.prototype.every()

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 4 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

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

Есть массив: [‘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() ).

1. Number , 1000000 элементов, искомый элемент в начале;
2. Number , 1000000 элементов, искомый элемент в середине;
3. Number , 1000000 элементов, искомый элемент в конце;
4. String , 1000000 элементов, искомый элемент в начале;
5. String , 1000000 элементов, искомый элемент в середине;
6. String , 1000000 элементов, искомый элемент в конце.

Результаты тестов могут сильно зависеть от версии браузера, да и от самих браузеров, как этого избежать не знаю, но рекомендую протестить на нескольких.

Видно, что в среднем везде выигрывает первый способ из первой части (написанный собственноручно), а второе место обычно делят lоdash и Array.prototype.includes() .

Да, прошу заметить, что если взбредёт в голову искать NaN , то это может не получиться почти во всех методах, так как NaN !== NaN .

Array.prototype.includes()

Метод includes() определяет, содержит ли массив определённый элемент, возвращая в зависимости от этого true или false .

Интерактивный пример

Синтаксис

arr.includes(searchElement[fromIndex = 0])

Параметры

Позиция в массиве, с которой начинать поиск элемента searchElement . При отрицательных значениях поиск производится начиная с индекса array.length + fromIndex по возрастанию. Значение по умолчанию равно 0.

Возвращаемое значение

Примеры

[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true [1, 2, NaN].includes(NaN); // true 

fromIndex больше или равен длине массива

Если fromIndex больше или равен длине массива, то возвращается false . При этом поиск не производится.

var arr = ["a", "b", "c"]; arr.includes("c", 3); // false arr.includes("c", 100); // false 

Вычисленный индекс меньше нуля 0

Если fromIndex отрицательный, то вычисляется индекс, начиная с которого будет производиться поиск элемента searchElement . Если вычисленный индекс меньше нуля, то поиск будет производиться во всём массиве.

// длина массива равна 3 // fromIndex равен -100 // вычисленный индекс равен 3 + (-100) = -97 var arr = ["a", "b", "c"]; arr.includes("a", -100); // true arr.includes("b", -100); // true arr.includes("c", -100); // true 

Использование includes() в качестве общих метода

includes() специально сделан общим. Он не требует, чтобы this являлся массивом, так что он может быть применён к другим типам объектов (например, к массивоподобным объектам). Пример ниже показывает использование метода includes() на объекте arguments.

(function ()  console.log([].includes.call(arguments, "a")); // true console.log([].includes.call(arguments, "d")); // false >)("a", "b", "c"); 

Полифил

// https://tc39.github.io/ecma262/#sec-array.prototype.includes if (!Array.prototype.includes)  Object.defineProperty(Array.prototype, "includes",  value: function (searchElement, fromIndex)  if (this == null)  throw new TypeError('"this" is null or not defined'); > // 1. Let O be ? ToObject(this value). var o = Object(this); // 2. Let len be ? ToLength(? Get(O, "length")). var len = o.length >>> 0; // 3. If len is 0, return false. if (len === 0)  return false; > // 4. Let n be ? ToInteger(fromIndex). // (If fromIndex is undefined, this step produces the value 0.) var n = fromIndex | 0; // 5. If n ≥ 0, then // a. Let k be n. // 6. Else n < 0,// a. Let k be len + n. // b. If k < 0, let k be 0.var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); function sameValueZero(x, y)  return ( x === y || (typeof x === "number" && typeof y === "number" && isNaN(x) && isNaN(y)) ); > // 7. Repeat, while k < lenwhile (k  len)  // a. Let elementK be the result of ? Get(O, ! ToString(k)). // b. If SameValueZero(searchElement, elementK) is true, return true. if (sameValueZero(o[k], searchElement))  return true; > // c. Increase k by 1. k++; > // 8. Return false return false; >, >); > 

Если требуется поддержка устаревших движков JavaScript, которые не поддерживают Object.defineProperty , то наилучшим решением будет вообще не делать полифил для методов Array.prototype , так как не получится сделать их неперечисляемыми.

Спецификации

Specification
ECMAScript Language Specification # sec-array.prototype.includes

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

• TypedArray.prototype.includes() (en-US)
• String.prototype.includes()
• Array.prototype.indexOf()
• Array.prototype.find()
• Array.prototype.findIndex()

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

Вам также может понравиться

Опубликовано 29.01.2021

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

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

Опубликовано 02.05.2022

JavaScript | Из каких символов состоит текст (строка)?

Представим, что у нас есть некоторый текст. Пусть это будет товар интернет-магазина и его описание. Нам этот текст пришёл в виде строки […]

Опубликовано 09.09.2020

JavaScript | Как превратить HTMLCollection в Array? (Коллекцию HTML элементов в массив)

Одной командой Array.from(ТВОЯ HTML КОЛЛЕКЦИЯ) Когда мы используем метод getElementsByTagName() интерфейса Document, мы получаем массиво-подобный объект интерфейса HTMLCollection. В чём тут […]

Опубликовано 07.09.2020

JavaScript | Чем отличается click от onclick?

onclick — это обработчик события click — это событие В чём концептуальная разница? Обработчик события (onclick) мы вешаем на элемент в […]