Array.findIndex() в JavaScript — індекс першого елемента за умовою

Опис

Метод findIndex() надає інструмент для знаходження індексу першого елемента в масиві, який відповідає певній умові. Для цього в нього передається callback-функція. Ця функція має повертати true або false для кожного елемента, залежно від його відповідності заданій умові. Перший елемент, для якого callback-функція поверне true, визначає результат виконання методу findIndex().

Сам метод findIndex() не змінює масив, на якому його викликали. Але важливо пам'ятати, що функція, передана як callbackFn, може вносити зміни в цей масив. При цьому:

• callbackFn не буде працювати з елементами, доданими після початку роботи методу findIndex().
• Індекси, які вже були оброблені, при змінах в них не будуть повторно оброблятися callbackFn.
• Якщо елемент масиву, що ще не був оброблений, зміниться в процесі роботи callbackFn, його значення буде відповідати стану на момент його обробки. Елементи, які були видалені, опрацьовуються як undefined.

Приклад:

let numbers = [5, 12, 8, 130, 44];
let isLargeNumber = (element) => element > 13;
let index = numbers.findIndex(isLargeNumber);
console.log(index); // повертає 3

У цьому прикладі ми шукаємо перший елемент у масиві numbers, який більший ніж 13. Як результат роботи методу ми отримуємо значення 3, бо елемент під індексом 3 (130) є першим, який відповідає умові "більше ніж 13".

правити

Загальний опис

правити

Нотатка

Якщо немає елементів, що відповідають умові, метод findIndex() поверне -1. Тому важливо перевіряти результат методу на -1, щоб уникнути помилок.

автор: Bond правити

Нотатка

Метод findIndex() універсальний. Він передбачає, що значення this має властивість length та інші властивості з цілими числовими ключами.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

findIndex(callbackFn)
findIndex(callbackFn, thisArg)

Параметри

callbackFn

Функція, яка виконується для кожного елемента масиву. Вона повинна повертати значення істиності (truthy), щоб показати, що був знайдений відповідний елемент, і значення хибності (falsy) у протилежному випадку.

Функція callbackFn викликається з наступними аргументами:

• element: поточний елемент, який обробляється у масиві;
• index: індекс поточного елемента, який обробляється у масиві;
• array: масив, на якому було викликано метод findIndex().

автор: Bond

правити

thisArg

Значення, яке використовується як this під час виконання функції callbackFn.

автор: Bond

правити

Повернення

index

Індекс першого елемента в масиві, який пройшов перевірку. В протилежному випадку, -1.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	45	25	8	32	12	—

Підтримка: мобільні переглядачі

Переглядач
	45	45	4	8

Підтримка: серверні переглядачі

Переглядач
	4.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

function isPrime(element) {
  if (element % 2 === 0 || element < 2) {
    return false;
  }
  for (let factor = 3; factor <= Math.sqrt(element); factor += 2) {
    if (element % factor === 0) {
      return false;
    }
  }
  return true;
}

console.log([4, 6, 8, 9, 12].findIndex(isPrime)); // -1, не знайдено
console.log([4, 6, 7, 9, 12].findIndex(isPrime)); // 2 (елемент array[2] це 7)

console.log([1, , 3].findIndex((x) => x === undefined)); // 1

<header>
  <h2 class="title">Знаходження індексу першого числа більшого за 13 в масиві</h2>
  <p class="description">Цей приклад використовує метод findIndex() для знаходження індексу першого елемента в масиві, яке є числом більшим за 13.</p>
</header>
<main>
  <div>
    <p>Масив: [5, 12, 8, 130, 44]</p>
    <p>Результат: <span id="result"></span></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

main div {
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

main p {
  margin: 0;
}

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = element => element > 13;

document.getElementById('result').textContent = array1.findIndex(isLargeNumber);
//# sourceURL=pen.js

const users = [
  { id: 7, name: 'Оля' },
  { id: 3, name: 'Іван' },
];

console.log(users.findIndex((u) => u.id === 3));  // 1
console.log(users.findIndex((u) => u.id === 99)); // -1, а не undefined

// пастка: збіг на нульовій позиції
const i = users.findIndex((u) => u.id === 7);
console.log(i, Boolean(i));   // 0 false — if (i) вирішить, що не знайдено
console.log(i !== -1);        // true — ось так правильно

// а для «не знайдено» та сама умова істинна
console.log(Boolean(users.findIndex((u) => u.id === 99))); // true, бо -1

// indexOf порівнює значення, findIndex — умову
console.log(users.indexOf({ id: 7, name: 'Оля' }));       // -1 — інший об'єкт
console.log([NaN].indexOf(NaN), [NaN].findIndex(Number.isNaN)); // -1 0

// порожні комірки findIndex усе ж відвідує
console.log([, , 5].findIndex((v) => v === undefined));   // 0

const arrayLike = {
  length: 3,
  "-1": 0.1, // ігнорується findIndex(), оскільки -1 < 0
  0: 2,
  1: 7.3,
  2: 4,
};
console.log(
  Array.prototype.findIndex.call(arrayLike, (x) => !Number.isInteger(x)),
); // 1