Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

JS метод Array.every()

Опис

Метод 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() є можливість передати йому callback-функцію, яка приймає три аргументи: поточний елемент, індекс та сам масив. Це дозволяє вам визначати умову перевірки з використанням цих параметрів і створювати гнучкі перевірки.

Порада:

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

Порада:

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

Нотатка:

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

Нотатка:

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

Синтаксис

every(callbackFn)
every(callbackFn, thisArg)

Параметри

*callbackFn

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

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

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

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

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

thisArg

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

Return

true

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

false

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

Переглядачі

Переглядач

1

1.5

3

9.5

12

Переглядач

18

37

1

Переглядач

0.10.0

1.0

Приклади


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

У прикладі перевіряється, чи всі елементи масиву більші або рівні 10. Результат першого прикладу буде false, оскільки є елементи (5 та 8), які менші за 10. Результат другого прикладу буде true, оскільки всі елементи масиву більші або рівні 10.

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);

У прикладі перевіряється, чи всі елементи одного масиву присутні у другому масиві. Результат першого прикладу буде true, оскільки всі елементи масиву [5, 7, 6] присутні у масиві [1, 2, 3, 4, 5, 6, 7]. Результат другого прикладу буде false, оскільки масив [5, 8, 7] містить елементи, які не присутні у масиві [1, 2, 3, 4, 5, 6, 7].

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

Метод every() не виконує передану умову для порожніх слотів. У першому прикладі результат буде true, оскільки умова (x) => x !== undefined виконується для всіх елементів масиву [1, , 3], крім порожнього слоту, який є в масиві. У другому прикладі результат також буде true, оскільки умова (x) => x === 2 виконується для всіх елементів масиву [2, , 2], крім порожнього слоту.

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

У першому прикладі цикл виконується 3 ітерації, оскільки масив модифікується на кожній ітерації. У другому прикладі цикл також виконується 3 ітерації, навіть після додавання нових елементів. У третьому прикладі цикл виконується лише 2 ітерації, оскільки решта елементів видаляється за допомогою pop().

// ---------------
// Зміна елементів
// ---------------
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

У даному прикладі ми викликаємо метод every() на об'єкті arrayLike, який не є масивом, використовуючи властивість length та callback-функцію для перевірки типу кожного елемента. В результаті отримуємо true, оскільки всі елементи з властивостей 0, 1, 2 є рядками.

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