JavaScript Ітерація масиву
Методи ітерації масиву оперують з кожним елементом масиву.
JavaScript Array forEach()
Метод forEach() викликає функцію (функцію зворотного виклику) один раз для кожного елемента масиву.
Приклад
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
Спробуйте самі »
Зверніть увагу, що функція приймає три аргумента:
- Значення елемента
- Індекс елемента
- Сам масив
В наведеному вище прикладі використовується лише параметр значення. Приклад можна переписати так:
Приклад
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
Спробуйте самі »
JavaScript Array map()
Метод map() створює новий масив, виконуючи функцію для кожного елемента масиву.
Метод map() не виконує функцію для елементів масиву без значень.
Метод map() не змінює оригінальний масив.
В цьому прикладі кожне значення масиву множиться на 2:
Приклад
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
Спробуйте самі »
Зверніть увагу, що функція приймає 3 аргументи:
- Значення елемента
- Індекс елемента
- Сам масив
Коли функція зворотного виклику використовує лише параметр значення, параметри індексу та масиву можна не вказувати:
Приклад
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Спробуйте самі »
JavaScript Array filter()
Метод filter() створює новий масив з елементами масиву, що проходить перевірку (тест).
В цьому прикладі створюється новий масив з елементів зі значенням більше ніж 18:
Приклад
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Спробуйте самі »
Зверніть увагу, що функція приймає 3 аргументи:
- Значення елемента
- Індекс елемента
- Сам масив
В наведеному вище прикладі функція зворотного виклику нк використовує параметри індексу та масиву, тому їх можна не вказувати:
Приклад
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
Спробуйте самі »
JavaScript Array reduce()
Метод reduce() запускає функцію для кожного елемента масиву для створення (зменшення до) одного значення.
Метод reduce() працює в масиві зліва-направо. Подивіться також reduceRight().
Метод reduce() не зменшує оригінальний (початковий) масив.
В цьому прикладі знаходиться сума всіх чисел масиву:
Приклад
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Спробуйте самі »
Зверніть увагу, що функція приймає 4 аргументи:
- Підсумок (початкове значення / попередньо повернене значення)
- Значення елементу
- Індекс елементу
- Сам масив
В наведеному вище прикладі не використовуються параметри індексу та масиву. Це можна переписати як:
Приклад
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
Спробуйте самі »
Метод reduce() може приймати початкове значення:
Приклад
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 100);
function myFunction(total, value) {
return total + value;
}
Спробуйте самі »
JavaScript Array reduceRight()
Метод reduceRight() запускає функцію для кожного елемента масиву для створення (зменшення до) одного значення.
Метод reduceRight() працює в масиві з права-наліво. Дивіться також reduce().
Метод reduceRight() не зменшує оригінальний (початковий) масив.
В цьому прикладі знаходиться сума всіх чисел в масиві:
Приклад
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Спробуйте самі »
Зверніть увагу, що функція приймає 4 аргументи:
- Підсумок (початкове значення / попередньо повернене значення)
- Значення елементу
- Індекс елементу
- Сам масив
В наведеному вище прикладі не використовуються параметри індексу та масиву. Це можна переписати так:
Приклад
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
Спробуйте самі »
JavaScript Array every()
Метод every() перевіряє, чи всі значення масиву проходять тест.
В цьому прикладі перевіряється, чи всі значення більше, ніж 18:
Приклад
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Спробуйте самі »
Зверніть увагу, що функція приймає 3 аргументи:
- Значення елементу
- Індекс елементу
- Сам масив
Коли функція зворотного виклику використовує лише перший параметр (значення), інші параметри можна не вказувати:
Приклад
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
function myFunction(value) {
return value > 18;
}
Спробуйте самі »
JavaScript Array some()
Метод some() перевіряє, чи проходять деякі значення масиву тест.
В цьому прикладі перевіряється, чи не перевищують деякі значення масиву 18:
Приклад
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Спробуйте самі »
Зверніть увагу, що функція приймає 3 аргументи:
- Значення елементу
- Індекс елементу
- Сам масив
JavaScript Array indexOf()
Метод indexOf() шукає в масиві значення елемента і повертає його позицію.
Примітка: Перший елемент має позицію 0, другий елемент має позицію 1, і т.д.
Приклад
Шукати елемент "Apple" в масиві:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
Спробуйте самі »
Синтаксис
array.indexOf(item, start)
| item | Обов’язково. Елемент для пошуку. |
| start | Не обов’язково. З чого почати пошук. Негативні значення будуть починатися з даної позиції, рахуючи від кінця, і пошук до кінця. |
Array.indexOf() повертає -1, якщо елемент не знайдено.
Якщо елемент присутній більше одного разу, він повертає позицію першого входження.
JavaScript Array lastIndexOf()
Метод Array.lastIndexOf() те саме, що і метод Array.indexOf(), але повертає позицію останнього входження вказаного елемента.
Приклад
Шукати елемент "Apple" в масиві:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
Спробуйте самі »
Синтаксис
array.lastIndexOf(item, start)
| item | Обов’язково. Елемент для пошуку |
| start | Не обов’язково. З чого почати пошук. Негативні значення будуть починатися з даної позиції, рахуючи від кінця і пошук до початку |
JavaScript Array find()
Метод find() повертає значення першого елемента масиву, який передає тестову функцію.
В цьому прикладі знаходиться (повертається значення) перший елемент, який більше, ніж 18:
Приклад
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Спробуйте самі »
Зверніть увагу, що функція приймає 3 аргументи:
- Значення елементу
- Індекс елементу
- Сам масив
Підтримка браузерами
Метод find() введено в ES6 (JavaScript 2015).
Він підтримується в усіх сучасних браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
find() не підтримується в Internet Explorer.
JavaScript Array findIndex()
Метод findIndex() повертає індекс першого елементу масиву, що передає тестову функцію.
В цьому прикладі виконується пошук індексу першого елемента, що більше, ніж 18:
Приклад
const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Спробуйте самі »
Зверніть увагу, що функція приймає 3 аргумента:
- Значення елементу
- Індекс елементу
- Сам масив
Підтримка браузерами
Метод findIndex() введено в ES6 (JavaScript 2015).
Він підтримується в усіх сучасних браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
findIndex() не підтримується в Internet Explorer.
JavaScript Array.from()
Метод Array.from() повертає об’єкт Array із будь-якого об’єкту з властивістю length або будь-якого ітерованого об’єкту.
Підтримка браузерами
from() введено в ES6 (JavaScript 2015).
Він підтримується в усіх сучасних браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
from() не підтримується в Internet Explorer.
JavaScript Array Keys()
Метод Array.keys() повертає об’єкт Array Iterator з ключами масиву.
Приклад
Створити об’єкт Array Iterator, що містить ключи масиву:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}
Спробуйте самі »
Підтримка браузерами
Метод keys() введено в ES6 (JavaScript 2015).
Він підтримується в усіх сучасних браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
Метод keys() не підтримується в Internet Explorer.
Array entries()
Приклад
Створити об’єкт Array Iterator, and then iterate over the key/value pairs:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x;
}
Спробуйте самі »
Метод entries() повертає об’єкт Array Iterator з парами ключ/значення:
[0, "Banana"]
[1, "Orange"]
[2, "Apple"]
[3, "Mango"]
Метод entries() не змінює оригінальний масив.
Підтримка браузерами
Метод entries() введено в ES6 (JavaScript 2015).
Він підтримується в усіх сучасних браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
Метод entries() не підтримується в Internet Explorer.
JavaScript Array includes()
ECMAScript 2016 ввів Array.includes() в масиви. This allows us to check if an element is present in an array (including NaN, unlike indexOf).
Приклад
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is true
Спробуйте самі »
Синтаксис
array.includes(search-item)
Array.includes() allows to check for NaN values. Unlike Array.indexOf().
Метод Array.includes() не підтримується в Internet Explorer та Edge 12/13.
Перша версія браузера з повною підтримкою:
Підтримка браузерами
Метод includes() is an ECMAScript 2016 feature.
Він підтримується в усіх сучасних браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
Метод includes() не підтримується в Internet Explorer.
Повний довідник масиву
Для більш детальної інформації про масиви, відвідайте:
Повний довідник JavaScript масиву на нашому сайті W3Schools українською.
Довідник містить описи та приклади всіх властивостей та методів масиву.
