Array.includes() в JavaScript — чи є значення в масиві

Опис

Коли вам потрібно перевірити, чи існує певний елемент у масиві, JavaScript надає метод під назвою includes(). З його допомогою ви можете ефективно визначити наявність елемента в масиві без необхідності перебирати всі його елементи.

Приклад:

let fruits = ["apple", "banana", "cherry"];
let exists = fruits.includes("banana");
console.log(exists); // true

У цьому прикладі ми перевіряємо, чи існує banana в масиві fruits. Метод includes() повертає true, підтверджуючи його наявність.

Метод includes() проводить порівняння елемента searchElement з іншими елементами масиву, використовуючи специфічний алгоритм порівняння - SameValueZero, який відрізняється від строгої рівності. Цей алгоритм вважає NaN рівним самому собі і -0 рівним 0, що часто є більш логічним при пошуку значень. Він використовується в методах як Array.prototype.includes(), так і TypedArray.prototype.includes(), а також в структурах Map та Set.

правити

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

правити

Нотатка

Метод includes() приймає другий необов'язковий параметр fromIndex, який вказує початковий індекс для пошуку елемента. По замовчуванню, пошук починається з початку масиву. Ви можете вказати інший початковий індекс, наприклад, myArray.includes(3, 2), щоб почати пошук елемента з індексу 2.

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

Нотатка

Зверніть увагу, що метод includes() використовує строге порівняння (===) для перевірки наявності елемента у масиві. Це означає, що не тільки значення, але й типи даних повинні співпадати. Наприклад, якщо масив містить рядковий елемент '5', myArray.includes(5) поверне false, оскільки порівнювані значення мають різні типи.

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

Нотатка

includes() є універсальним методом, що вимагає, щоб об'єкт this мав властивість length і інші цілочисельні властивості.

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

Нотатка

Якщо розглядати розріджені масиви, includes() сприймає порожні слоти так, наче вони мають значення undefined.

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

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

Синтаксис

includes(searchElement)
includes(searchElement, fromIndex)

Параметри

searchElement

Значення, яке потрібно знайти у масиві.

автор: Bond

правити

fromIndex

Індекс, з якого розпочинається пошук, конвертований у ціле число.

• Від'ємний індекс рахується з кінця масиву - якщо fromIndex < 0, використовується fromIndex + array.length. Однак, незважаючи на це, масив все ще проглядається з переду назад.
• Якщо fromIndex < -array.length або fromIndex не визначено, використовується 0 (спричинює пошук по всьому масиву).
• Якщо fromIndex >= array.length, масив не проглядається, і повертається false.

автор: Bond

правити

Повернення

bool

Булеве значення, яке дорівнює true, якщо значення searchElement знайдено у масиві (або у частині масиву, вказаній індексом fromIndex).

автор: Bond

правити

Переглядачі

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

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

Переглядач
	47	43	9	34	14	—

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

Переглядач
	47	47	43	9

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

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

Приклади

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

console.log([1, , 3].includes(undefined)); // true

<header>
  <h2 class="title">includes() - Перевірка присутності елемента в масиві</h2>
  <p class="description">Метод includes() використовується для перевірки чи містить масив заданий елемент.</p>
</header>
<main>
  <div>
    <h3>Приклад 1</h3>
    <p>Масив: [1, 2, 3]</p>
    <p>Вивід результату (наявність ел. "2"): <span id="result1"></span></p>
  </div>
  <div>
    <h3>Приклад 2</h3>
    <p>Масив: ['cat', 'dog', 'bat']</p>
    <p>Вивід результатунаявність ел. "cat": <span id="result2"></span></p>
  </div>
  <div>
    <h3>Приклад 3</h3>
    <p>Масив: ['cat', 'dog', 'bat']</p>
    <p>Вивід результатунаявність ел. "at": <span id="result3"></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 {
  margin-bottom: 20px;
}

main h3 {
  margin-bottom: 10px;
}

main p {
  margin-bottom: 5px;
}

main span {
  font-weight: bold;
}

const array1 = [1, 2, 3];
document.getElementById('result1').textContent = array1.includes(2); // Очікуваний результат: true

const pets = ['cat', 'dog', 'bat'];
document.getElementById('result2').textContent = pets.includes('cat'); // Очікуваний результат: true
document.getElementById('result3').textContent = pets.includes('at'); // Очікуваний результат: false
//# sourceURL=pen.js

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

const ids = [1, 2, 3];
console.log('є 2:', ids.includes(2));        // true
console.log("є '2':", ids.includes('2'));    // false — жодних перетворень типу

// об'єкти порівнюються за посиланням
const users = [{ id: 1 }, { id: 2 }];
console.log('includes({id: 2}):', users.includes({ id: 2 }));      // false
console.log('some(u => u.id === 2):', users.some(u => u.id === 2)); // true

// NaN: includes знаходить, indexOf — ні
console.log('NaN:', [NaN].includes(NaN), [NaN].indexOf(NaN));      // true -1

// порожній слот includes бачить як undefined
const sparse = [, 1];
console.log('дірка:', sparse.includes(undefined), sparse.indexOf(undefined)); // true -1

// з другого індексу
console.log("includes('a', 1):", ['a', 'b', 'a'].includes('a', 1)); // true

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 1, // проігноровано методом includes(), оскільки length дорівнює 3
};
console.log(Array.prototype.includes.call(arrayLike, 2));
// true
console.log(Array.prototype.includes.call(arrayLike, 1));
// false