- Методы поиска в массивах JavaScript
- indexOf
- includes
- find
- filter
- Заключение
- Array.prototype.indexOf()
- Синтаксис
- Параметры
- Описание
- Примеры
- Пример: использование indexOf()
- Пример: нахождение всех вхождений элемента
- Полифил
- Спецификации
- Совместимость с браузерами
- Смотрите также
- JavaScript Array indexOf()
- See Also:
- Syntax
- Parameters
- Return Value
- Note
- More Examples
- Related Pages:
- Browser Support
Методы поиска в массивах JavaScript
Поиск в массиве — довольно несложная задача для программиста. На ум сразу приходит перебор через цикл for или бинарный поиск в отсортированном массиве, для элементов которого определены операции «больше» и «меньше». Но, как и любой высокоуровневый язык программирования, JavaScript предлагает разработчику встроенные функции для решения различных задач. В этой статье мы рассмотрим четыре метода поиска в массивах JavaScript : find , includes , indexOf и filter .
indexOf
indexOf — это функция поиска элемента в массиве . Этот метод с помощью перебора ищет искомый объект и возвращает его индекс или «-1», если не находит подходящий.
Функция имеет такой синтаксис:
Array.indexOf (search element, starting index)
- Array — массив;
- search element — элемент, который мы ищем;
- starting index — индекс, с которого начинаем перебор. Необязательный аргумент, по умолчанию работа функции начинается с индекса “0”, т.е. метод проверяет весь Array. Если starting index больше или равен Array.length, то метод сразу возвращает “-1” и завершает работу.
Если starting index отрицательный, то JS трактует это как смещение с конца массива: при starting index = “-1” будет проверен только последний элемент, при “-2” последние два и т.д.
Опробуем метод на практике. Запустим такой код и проверим результаты его работы:
let ExampleArray = [1,2,3,1,'5', null, false, NaN,3];
console.log("Позиция единицы", ExampleArray.indexOf(1) );
console.log("Позиция следующей единицы", ExampleArray.indexOf(1,2) );
console.log("Позиция тройки", ExampleArray.indexOf(3) );
console.log("Позиция тройки, если starting index отрицательный", ExampleArray.indexOf(3,-2) );
console.log("Позиция false", ExampleArray.indexOf(false) );
console.log("Позиция 5", ExampleArray.indexOf("5") );
console.log("Позиция NaN", ExampleArray.indexOf(NaN));
В результате работы этого кода мы получили такой вывод:
Позиция единицы 0
Позиция следующей единицы 3
Позиция тройки 2
Позиция тройки, если starting index отрицательный 8
Позиция false 6
Позиция 5 -1
Позиция NaN -1
indexOf осуществляет поиск элемента в массиве слева направо и останавливает свою работу на первом совпавшем. Отчетливо это проявляется в примере с единицей. Для того, чтобы идти справа налево, используйте метод LastIndexOf с аналогичным синтаксисом.
Для сравнения искомого и очередного объекта применяется строгое сравнение (===). При использовании строгого сравнения для разных типов данных, но с одинаковым значение, например 5, ‘5’ и “5” JavaScript даёт отрицательный результат, поэтому IndexOf не нашел 5.
Также стоит помнить, что indexOf некорректно обрабатывает NaN. Так что для работы с этим значением нужно применять остальные методы.
includes
includes не совсем проводит поиск заданного элемента в массиве , а проверяет, есть ли он там вообще. Работает он примерно также как и indexOf . В конце работы includes возвращает «True», если нашел искомый объект, и «False», если нет. Также includes правильно обрабатывает NaN
includes имеет следующий синтаксис:
Array.includes (search element, starting index)
- Array — массив;
- search element — элемент, который мы ищем;
- starting index — индекс, с которого начинаем перебор. Необязательный аргумент, по умолчанию работа функции начинается с индекса “0”, т.е. метод проверяет весь Array. Если starting index больше или равен Array.length, то метод сразу возвращает «False» и завершает работу.
Если starting index отрицательный, то JS трактует это как смещение с конца массива: при starting index = “-1” будет проверен только последний элемент, при “-2” последние два и т.д.
Немного изменим код из предыдущего примера и запустим его:
let Example = [1,2,3,1,'5', null, false,NaN, 3];
console.log("Наличие единицы", Example.includes(1) );
console.log("Наличие следующей единицы", Example.includes(1,2) );
console.log("Наличие тройки", Example.includes(3) );
console.log("Наличие тройки, если starting index отрицательный", Example.includes(3,-1) );
console.log("Наличие false", Example.includes(false) );
console.log("Наличие 5", Example.includes(5) );
console.log("Наличие NaN", Example.includes(NaN));
Наличие единицы true
Наличие следующей единицы true
Наличие тройки true
Наличие тройки, если starting index отрицательный true
Наличие false true
Наличие 5 false
Наличие NaN true
Для includes отсутствует альтернативная функция, которая проводит поиск по массиву js справа налево, которая, в общем-то, и не очень актуальна.
find
Предположим, что нам нужно найти в массиве некий объект. Но мы хотим найти его не по значению, а по его свойству. Например, поиск числа в массиве со значением между 15 и 20. Как и прежде, мы можем воспользоваться перебором с помощью for , но это не слишком удобно. Для поиска с определенным условием в JavaScript существует метод find .
Array.find(function(. )//если элемент соответствует условиям (true), то функция возвращает его и прекращает работу;
//если ничего не найдено, то возвращает undefined
>)
Как и в прошлых примерах, напишем небольшой код и опробуем метод:
let ExampleArray = ["Timeweb", 55555, "Cloud", "облачный провайдер", "буквы"];
console.log(ExampleArray.find(element => element.length == 5))
В этом примере мы искали строки с длиной в 5 символов. Для числовых типов данных длина не определена, поэтому 55555 не подходит. find находит первый элемент и возвращает его, поэтому «буквы» также не попали в результат работы нашей функции. Для того, чтобы найти несколько элементов, соответствующих некоторому условию, нужно использовать метод filter .
Также не стоит забывать о методе findIndex . Он возвращает индекс подходящего элемента. Или -1, если его нет. В остальном он работает точно также, как и find .
filter
find ищет и возвращает первый попавшийся элемент, соответствующий условиям поиска. Для того, чтобы найти все такие элементы, необходимо использовать метод filter . Результат этой функции — массив (если ничего не найдено, то он будет пустым).
Array.find(function(. )//если элемент соответствует условиям (true), то добавляем его к конечному результату и продолжаем перебор;
>)
Представим следующую задачу: у нас есть список кубоидов (прямоугольных параллелепипедов) с длинами их граней и нам нужно вывести все кубоиды с определенным объемом. Напишем код, реализующий решение данной задачи:
let ExampleArray = [
[10, 15, 8],
[11, 12, 6],
[5, 20, 1],
[10, 10, 2],
[16,2, 4]
];
console.log(ExampleArray.filter(element=> element[0]*element[1]*element[2]>300))
В этом примере мы нашли прямоугольные параллелепипеды с объемом больше 300. В целом, метод filter в JS позволяет реализовывать всевозможные условия для поиска.
Заключение
В этой статье узнали о методах поиска в JavaScript и научились ими пользоваться. Все перечисленные методы — универсальные инструменты для разработчиков. Но, как и любые универсальные инструменты, они не всегда являются самыми производительными. Так, например, бинарный поиск будет куда эффективнее, чем find и filter .
Array.prototype.indexOf()
Метод indexOf() возвращает первый индекс, по которому данный элемент может быть найден в массиве или -1, если такого индекса нет.
Синтаксис
arr.indexOf(searchElement[, fromIndex = 0])
Параметры
Искомый элемент в массиве.
Индекс, с которого начинать поиск. Если индекс больше или равен длине массива, возвращается -1, что означает, что массив даже не просматривается. Если индекс является отрицательным числом, он трактуется как смещение с конца массива. Обратите внимание: если индекс отрицателен, массив всё равно просматривается от начала к концу. Если рассчитанный индекс оказывается меньше 0, поиск ведётся по всему массиву. Значение по умолчанию равно 0, что означает, что просматривается весь массив.
Описание
Метод indexOf() сравнивает искомый элемент searchElement с элементами в массиве, используя строгое сравнение (en-US) (тот же метод используется оператором === , тройное равно).
Примеры
Пример: использование indexOf()
В следующем примере indexOf() используется для поиска значений в массиве.
var array = [2, 5, 9]; array.indexOf(2); // 0 array.indexOf(7); // -1 array.indexOf(9, 2); // 2 array.indexOf(2, -1); // -1 array.indexOf(2, -3); // 0
Пример: нахождение всех вхождений элемента
В следующем примере indexOf() используется для поиска всех индексов элемента в указанном массиве, которые с помощью push() добавляются в другой массив.
var indices = []; var array = ['a', 'b', 'a', 'c', 'a', 'd']; var element = 'a'; var idx = array.indexOf(element); while (idx != -1) indices.push(idx); idx = array.indexOf(element, idx + 1); > console.log(indices); // [0, 2, 4]
Полифил
Метод indexOf() был добавлен к стандарту ECMA-262 в 5-м издании; поэтому он может отсутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать indexOf() в реализациях, которые не поддерживают этот метод. Этот алгоритм является точно тем, что описан в ECMA-262 5-го издания; он предполагает, что TypeError и Math.abs() имеют свои первоначальные значения.
// Шаги алгоритма ECMA-262, 5-е издание, 15.4.4.14 // Ссылка (en): http://es5.github.io/#x15.4.4.14 // Ссылка (ru): http://es5.javascript.ru/x15.4.html#x15.4.4.14 if (!Array.prototype.indexOf) Array.prototype.indexOf = function(searchElement, fromIndex) var k; // 1. Положим O равным результату вызова ToObject с передачей ему // значения this в качестве аргумента. if (this == null) throw new TypeError('"this" is null or not defined'); > var O = Object(this); // 2. Положим lenValue равным результату вызова внутреннего метода Get // объекта O с аргументом "length". // 3. Положим len равным ToUint32(lenValue). var len = O.length >>> 0; // 4. Если len равен 0, вернём -1. if (len === 0) return -1; > // 5. Если был передан аргумент fromIndex, положим n равным // ToInteger(fromIndex); иначе положим n равным 0. var n = +fromIndex || 0; if (Math.abs(n) === Infinity) n = 0; > // 6. Если n >= len, вернём -1. if (n >= len) return -1; > // 7. Если n >= 0, положим k равным n. // 8. Иначе, n // Если k меньше нуля 0, положим k равным 0. k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); // 9. Пока k < len, будем повторятьwhile (k len) // a. Положим Pk равным ToString(k). // Это неявное преобразование для левостороннего операнда в операторе in // b. Положим kPresent равным результату вызова внутреннего метода // HasProperty объекта O с аргументом Pk. // Этот шаг может быть объединён с шагом c // c. Если kPresent равен true, выполним // i. Положим elementK равным результату вызова внутреннего метода Get // объекта O с аргументом ToString(k). // ii. Положим same равным результату применения // Алгоритма строгого сравнения на равенство между // searchElement и elementK. // iii. Если same равен true, вернём k. if (k in O && O[k] === searchElement) return k; > k++; > return -1; >; >
Спецификации
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
JavaScript Array indexOf()
The indexOf() method returns the first index (position) of a specified value.
The indexOf() method returns -1 if the value is not found.
The indexOf() method starts at a specified index and searches from left to right.
By default the search starts at the first element and ends at the last.
Negative start values counts from the last element (but still searches from left to right).
See Also:
Syntax
Parameters
Parameter | Description |
item | Required. The value to search for. |
start | Optional. Where to start the search. Default value is 0. Negative values start the search from the end of the array. |
Return Value
Note
In an array, the first element has index (position) 0, the second has index 1, .
More Examples
Find the first index of «Apple», starting from the last element:
const fruits = [«Banana», «Orange», «Apple», «Mango», «Apple»];
let index = fruits.indexOf(«Apple», -1);
Related Pages:
Browser Support
indexOf() is an ECMAScript5 (ES5) feature.
ES5 (JavaScript 2009) fully supported in all browsers:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 9-11 |