Разница между indexOf и findIndex в JavaScript

Разница между indexOf и findIndex в JavaScript

JavaScript предоставляет два метода, indexOf и findIndex, которые обычно используются для поиска элементов в массивах или строках. Хотя они служат одинаковой цели, между этими двумя методами есть некоторые принципиальные различия. В этом подробном объяснении мы рассмотрим эти различия и приведем примеры, иллюстрирующие их использование.

indexOf:

Метод indexOf — это встроенная функция, доступная как для массивов, так и для строк в JavaScript. Он используется для поиска первого вхождения указанного значения и возвращает его индекс. Вот синтаксис для indexOf:

Для массивов: array.indexOf(searchElement, fromIndex)
Для строк: string.indexOf(searchValue, fromIndex)

Параметры определяются следующим образом:

searchElement или searchValue (обязательный): значение для поиска в массиве или строке.
fromIndex (необязательно): индекс, с которого нужно начать поиск. Если не указано, поиск начинается с индекса 0.

Метод indexOf возвращает индекс найденного элемента или -1, если элемент отсутствует в массиве или строке. Важно отметить следующие характеристики indexOf:

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

Давайте рассмотрим несколько примеров, чтобы понять использование indexOf:

Пример 1. Использование indexOf с массивом

const fruits = ['apple', 'banana', 'orange', 'banana'];
console.log(fruits.indexOf('banana')); // Output: 1
console.log(fruits.indexOf('kiwi'));   // Output: -1

В этом примере метод indexOf используется для поиска индекса значения 'banana' в массиве fruits. Первое вхождение 'banana' находится в индексе 1, метод возвращает значение индекса 1. При поиске несуществующего значения, такого как 'kiwi', метод возвращает -1, чтобы указать, что значение не было найдено в массиве.

Пример 2. Использование indexOf со строкой

const sentence = 'The quick brown fox jumps over the lazy dog';
console.log(sentence.indexOf('fox'));   // Output: 16
console.log(sentence.indexOf('cat'));   // Output: -1

В этом случае метод indexOf применяется к строке sentence для поиска индекса слова 'fox'. Поскольку слово появляется в индексе 16, метод возвращает значение индекса 16. При поиске несуществующего слова, такого как 'cat', метод возвращает -1.

2. findIndex :

Метод findIndex — это функция более высокого порядка, представленная в ECMAScript 6 (ES6) специально для массивов. Он используется для поиска первого элемента в массиве, удовлетворяющего предоставленной функции тестирования, и возвращает его индекс. Вот синтаксис для findIndex:

array.findIndex(callback, thisArg)

Параметры определяются следующим образом:

callback (обязательный): функция, которая принимает три аргумента:
element: Текущий обрабатываемый элемент.
index: индекс текущего элемента.
array: Обход массива. Функция обратного вызова должна возвращать истинное значение, если условие выполнено.
thisArg (необязательно): значение, используемое как this при выполнении функции обратного вызова.

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

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

Давайте рассмотрим несколько примеров, чтобы понять использование findIndex:

Пример 1. Использование findIndex с массивом чисел

const numbers = [10, 20, 30, 40, 50];
const index = numbers.findIndex(num => num > 25);
console.log(index);  // Output: 2

В этом примере метод findIndex используется для поиска индекса первого числа в массиве numbers, которое больше 25. Предоставляемая функция обратного вызова проверяет, больше ли текущее число 25. Первое число, удовлетворяющее этому условию, 30, который расположен по индексу 2. Следовательно, метод возвращает значение индекса 2.

Пример 2. Использование findIndex с массивом объектов

const persons = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];
const index = persons.findIndex(person => person.age === 30);
console.log(index);  // Output: 1

В этом случае метод findIndex используется для поиска индекса первого объекта в массиве persons, свойство age которого равно 30. Предоставленная функция обратного вызова проверяет, равно ли свойство age текущего человека 30. Второй объект в массиве удовлетворяет этому условию, так как его свойство age равно 30. Следовательно, метод возвращает значение индекса 1.

Подводя итог:

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

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

Спасибо за прочтение!

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

Не забудь подписаться⭐️

Страница Facebook: https://www.facebook.com/designTechWorld1

Страница в Instagram: https://www.instagram.com/techd.esign/

Канал YouTube: https://www.youtube.com/@tech..Design/

Твиттер: https://twitter.com/sumit_singh2311

Используемое оборудование:

Ноутбук: https://amzn.to/3yKkzaC

Смотрите:https://amzn.to/41cialm

Вы можете предпочесть React Book: https://amzn.to/3Tw29nx

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

https://amzn.to/3z3tW5s

https://amzn.to/40n4m6O