Array.every() в JavaScript — чи всі елементи відповідають умові

Опис

Метод every() дозволяє проводити перевірку всіх елементів масиву на відповідність певному критерію. Якщо кожен елемент масиву задовольняє заданій умові, метод повертає true; в іншому випадку — false. Це може нагадувати процес перевірки відповідей на питання в тесті: якщо всі відповіді правильні, ви отримаєте позитивний результат, а якщо хоча б одна відповідь невірна — результат буде негативний. Для використання every() вам потрібно передати функцію (параметр callbackFn), яка описує критерій перевірки для елементів масиву.

Приклад використання:

const numbers = [2, 4, 6, 8, 10];

// Перевіримо, чи є всі елементи парними числами
const allAreEven = numbers.every(function(number) {
    return number % 2 === 0;
});

console.log(allAreEven);  // Виведе: true, адже всі числа парні

Важливо: every() залишає первісний масив без змін. Однак, ваша функція callbackFn може його змінювати. Якщо ви збираєтесь робити це, маєте знати декілька нюансів:

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

правити

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

правити

Порада

Метод every() очікує, що значення this включатиме властивість length і властивості з цілими числовими ключами.

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

Порада

Корисною особливістю методу every() є можливість передати йому callback-функцію, яка приймає три аргументи: поточний елемент, індекс та сам масив. Це дозволяє вам визначати умову перевірки з використанням цих параметрів і створювати гнучкі перевірки.

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

Порада

Зверніть увагу, що якщо масив порожній, метод every() завжди поверне true, оскільки не буде жодного елемента, який не відповідає умові. У такому випадку це може бути корисною перевіркою.

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

Нотатка

Цікаво, що every() завжди повертає true для пустого масиву, адже відсутні елементи автоматично вважаються задовольняючими будь-якій умові.

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

Нотатка

Функція callbackFn працює не з усіма індексами масиву, а лише з тими, що мають визначене значення. Таким чином, порожні слоти в розріджених масивах ігноруються.

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

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

Синтаксис

every(callbackFn)
every(callbackFn, thisArg)

Параметри

callbackFn

Функція, яку потрібно застосовувати до кожного елемента масиву. Має повертати true для того, щоб підтвердити, що даний елемент відповідає критеріям, або false у протилежному випадку.

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

• element: поточний елемент, який обробляється у масиві;

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

• array: масив, на якому було викликано метод find().

автор: Bond

правити

thisArg

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

автор: Bond

правити

Повернення

true

Якщо callbackFn повертає true для кожного елемента масиву.

автор: Bond

правити

false

Якщо callbackFn поверне false для будь-якого з елементів масиву.

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	1.5	3	9.5	12	9

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

Переглядач
	4.4	18	4	1

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

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

Приклади

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

const arrayLike = {
  length: 3,
  0: "a",
  1: "b",
  2: "c",
  3: 345, // ігнорується методом every(), оскільки length дорівнює 3
};
console.log(
  Array.prototype.every.call(arrayLike, (x) => typeof x === "string"),
); // true

<header>
  <h2 class="title">Перевірка кожного елемента в масиві</h2>
  <p class="description">Цей приклад перевіряє, чи всі елементи в масиві задовольняють певну умову.</p>
</header>
<main>
  <p>Масив для перевірки: <code>[1, 30, 39, 29, 10, 13]</code></p>
  <p>Умова: <code>кожен елемент масиву менший від числа 40</code></p>
  <div class="result">
    <p>Результат: <span id="output"></span></p>
  </div>
</main>

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

code {
  color: #ff0000;
}

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 {
  margin-top: 20px;
}

.result {
  margin-top: 10px;
}

.result p {
  font-weight: bold;
}

.result span {
  color: green;
}

const isBelowThreshold = currentValue => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

const outputElement = document.getElementById("output");
outputElement.textContent = array1.every(isBelowThreshold);
//# sourceURL=pen.js

console.log('усі парні:', [2, 4, 6].every(n => n % 2 === 0));   // true
console.log('не всі:', [2, 3, 6].every(n => n % 2 === 0));      // false

// порожній масив проходить будь-яку перевірку
console.log('[].every:', [].every(n => n > 1000));  // true
console.log('[].some:', [].some(n => n > 1000));    // false — навпаки

// перебір обривається на першій невдачі
let calls = 0;
[1, 2, 3, 4].every(n => { calls++; return n < 2; });
console.log('викликів функції:', calls);  // 2, а не 4

// тіло у фігурних дужках без return
console.log('без return:', [1, 2, 3].every(n => { n > 0; }));  // false

// async-колбек завжди істинний
console.log('async:', [1, 2, 3].every(async n => n > 100));    // true

function isBigEnough(element, index, array) {
  return element >= 10;
}

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

const result1 = array1.every(isBigEnough); // false
const result2 = array2.every(isBigEnough); // true

console.log(result1);
console.log(result2);

const isSubset = (array1, array2) =>
  array2.every((element) => array1.includes(element));

console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 7, 6])); // true
console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 8, 7])); // false

console.log([1, , 3].every((x) => x !== undefined)); // true
console.log([2, , 2].every((x) => x === 2)); // true

// ---------------
// Зміна елементів
// ---------------
let arr = [1, 2, 3, 4];
arr.every((elem, index, arr) => {
  arr[index + 1]--;
  console.log(`[${arr}][${index}] -> ${elem}`);
  return elem < 2;
});

// Цикл виконується 3 ітерації, але без змін цикл би виконався 2 ітерації
//
// 1-а ітерація: [1,1,3,4][0] -> 1
// 2-а ітерація: [1,1,2,4][1] -> 1
// 3-я ітерація: [1,1,2,3][2] -> 2

// ---------------
// Додавання елементів
// ---------------
arr = [1, 2, 3];
arr.every((elem, index, arr) => {
  arr.push("новий");
  console.log(`[${arr}][${index}] -> ${elem}`);
  return elem < 4;
});

// Цикл виконується 3 ітерації, навіть після додавання нових елементів
//
// 1-а ітерація: [1, 2, 3, новий][0] -> 1
// 2-а ітерація: [1, 2, 3, новий, новий][1] -> 2
// 3-я ітерація: [1, 2, 3, новий, новий, новий][2] -> 3

// ---------------
// Видалення елементів
// ---------------
arr = [1, 2, 3, 4];
arr.every((elem, index, arr) => {
  arr.pop();
  console.log(`[${arr}][${index}] -> ${elem}`);
  return elem < 4;
});

// Цикл виконується лише 2 ітерації, оскільки решта
// елементів видаляється за допомогою `pop()`
//
// 1-а ітерація: [1,2,3][0] -> 1
// 2-а ітерація: [1,2][1] -> 2