Різниця між функцією indexOf та findIndex масиву


125

Я плутаю різницю між двома функціями indexOf і знаходжу Index в масиві.

У документації йдеться

findIndex - Повертає індекс першого елемента в масиві, де предикат є істинним, а -1 в іншому випадку.

і

indexOf - Повертає індекс першого появи значення в масиві.


4
Я думаю, що різниця полягає в тому, що кожен приймає функцію як аргумент (дозволяючи більш складні знахідки, як, скажімо, ви шукали перше виникнення значення з певною підрядкою замість всього цілого значення), ви просто приймаєте значення, яке ви ' шукаєш. Це насправді не погане питання. Рейтинги без пояснень повинні бути голосовими.
Тім Консолазіо

Іноді найкраще почати зі специфікації мови (наприклад, ECMA-262) та заповнити прогалини іншим матеріалом: Array.prototype.indexOf (searchElement [, fromIndex]) проти Array.prototype.findIndex (предикат [, thisArg]) .
RobG

Дякую Тіму і РобГ
Рахул Сінгх

Відповіді:


195

Основна відмінність - це параметри цих функцій:

  • Array.prototype.indexOf()очікує значення в якості першого параметра. Це робить хорошим вибором пошук індексу в масивах примітивних типів (наприклад, рядок, число чи булеве значення).

  • Array.prototype.findIndex()очікує зворотного виклику в якості першого параметра. Використовуйте це, якщо вам потрібен індекс у масивах з непомітивними типами (наприклад, об'єкти) або ваш стан пошуку складніший, ніж просто значення.

Дивіться посилання на приклади обох випадків.


4
Якщо когось цікавить, які примітивні типи js, це такі речі, як рядок, число, булеве значення.
Джон Лі

3
Зверніть увагу, що indexOfбуде працювати над пошуку об’єктів. Важливо отримати відмінність у тому, що він приймає єдиний Об'єкт, а не лише значення, і порівнюється за рівністю, а не за значенням. За документами Mozilla: indexOf() compares searchElement to elements of the Array using strict equality (the same method used by the === or triple-equals operator). Будь ласка, змініть findIndexпояснення, щоб включити лише кінець "або ваша умова пошуку є складнішою, ніж просто одне значення або посилання", щоб виправити це, оскільки воно спочатку мене збило. Дякую!
bronalarms

2
@brokenalarms Це правда, але тільки якщо у масиві є посилання на фактичний об'єкт. Наприклад, [{a:1}].indexOf({a:1})повертає, -1хоча об'єкт здається однаковим (але це не так). Не впевнений, чи корисна ця інформація у відповіді, оскільки вона може бути заплутаною. Якщо вам потрібно дізнатися більше про точну поведінку мови, слід ознайомитися зі специфікацією.
вул.

Крім того, indexOf () порівнює searchElement з елементами масиву, використовуючи сувору рівність (той же метод, що використовується оператором === або потрійним рівнем).
immirza

Варто зауважити, однак, що .indexOf(NaN)завжди повернеться, -1тому що NaN==NaNє завжди false. NaN це примітивний тип , тому що typeof NaNце numberі так , nullі undefined, таким чином , я б змінити це , щоб не сказати indexOfробіт на примітивних типів
Матвія

13

FindIndex корисний, якщо ви хочете знайти перший елемент, який відповідає вашому предикату: У прикладі W3C є числа та збіги, якщо вік клієнта вище або дорівнює 18.

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}

console.log(ages.findIndex(checkAdult));

консоль:

2

Ви можете знайти точний індекс елементів за допомогою функції indexOf Array, але ви не можете передати предикат. Це швидше, якщо ви хочете знайти конкретний елемент:

var ages = [3, 10, 18, 20];
console.log(ages.indexOf(10));

повертає:

1

Підрахунок індексу починається з 0, тому індекс першого елемента дорівнює 0.


4

Основна відмінність - це параметри цих функцій:

-> Array.prototype.indexOf () :

   var fruits = ["Banana", "Orange", "Apple", "Mango"];
   var a = fruits.indexOf("Apple");
   The result of a will be: 2

-> Array.prototype.findIndex () :

       var ages = [3, 10, 18, 20];

       function checkAdult(age) {
        return age >= 18;
       }

       function myFunction() {
         document.getElementById("demo").innerHTML = 
         ages.findIndex(checkAdult);
       }

       The result will be: 2

4

Ви також можете використовувати includes:

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

але я віддаю перевагу indexOfметоду:

var vals = [ "foo", "bar", 42, "baz" ];
if (~vals.indexOf( 42 )) {
  // found it!
}

1
також включає в себе необхідну полісистему для IE
MJB

indexOfнабагато швидше.
eozzy

4

Ще одна відмінність полягає в тому, що з findIndex () користувач може застосувати якусь функцію і знайти елемент у масиві, який проходить тест.

Але те ж саме не стосується оператора indexOf () . Користувач може просто перевірити, чи існує певний елемент у масиві чи ні.


3

Просте - Яку структуру масиву ви використовуєте?

  • Якщо масив об'єктів findIndex(),;
  • Інакше indexOf().

"Я хочу знайти індекс у масиві об'єктів , за допомогою ключа" Orange ".

let fruits = [
   { type: "Apple", quantity: 9 },
   { type: "Banana", quantity: 2},
   { type: "Orange", quantity: 8},
   { type: "Pear", quantity: 777}
];

let myIndex = fruits.findIndex(fruit => fruit.type === "Orange"); // Returns 2.

"Я хочу знайти індекс у простому масиві ".

let fruits = [ "Apple", "Banana", "Pear", "Orange"];

let index = fruits.indexOf("Orange"); // Returns 3.

0

Ви можете спробувати коди нижче: -

let city = ['Delhi', 'mumbai']
const a = city.findIndex((item) => 
item.toLowerCase()==='delhi')
console.log(a) // returns 0

let c = city.indexOf('mumbai') // returns 1
console.log(c)

Я не думаю, що цей код не потребує пояснень, оскільки цей код виглядає дуже просто і легко зрозуміти для початківців. Крім того, люди, які є початківцями, стикаються з труднощами зрозуміти складний код, тому я спростив це. Тому, будь ласка, не кажіть це низької якості, не розуміючи мого наміру.
Гульсан Борбхуя

Я не знайшов нічого низької якості, позначеного системою.
Гульсан Борбхуя
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.