Array.forEach() в JavaScript — перебрати елементи масиву

Опис

Метод forEach() є частиною багатьох інших ітераційних методів у JavaScript. Основна його особливість полягає в тому, що він викликає функцію callbackFn для кожного елемента масиву за порядком індексів. Важливо зазначити, що, на відміну від методу map(), forEach() завжди повертає undefined, тому ланцюжкові виклики тут не доречні.

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

Що стосується forEach(), він не модифікує масив, на якому застосовується. Однак функція callbackFn може це робити. Слід звертати увагу на такі моменти:

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

Приклад:

const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(fruit => {
  console.log(fruit);
});

В цьому прикладі ми ітеруємо по масиву fruits та виводимо кожний його елемент на консоль за допомогою методу forEach().

Немає способу зупинити або прервати цикл forEach() окрім виняткового стану. Якщо ви шукаєте таку можливість, розгляньте використання циклів for, for...of чи for...in. Методи масиву every(), some(), find() та findIndex() також надають можливість припинення ітерації.

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

правити

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

правити

Нотатка

Пам'ятайте, що метод forEach() не повертає новий масив. Він просто дозволяє виконати певну дію для кожного елемента. Якщо вам потрібно створити новий масив зі зміненими елементами, розгляньте використання методу map().

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

Нотатка

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

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

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

Синтаксис

forEach(callbackFn)
forEach(callbackFn, thisArg)

Параметри

callbackFn

Функція, яка виконується для кожного елемента масиву. Значення, яке вона повертає, не використовується.

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

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

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

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

автор: Bond

правити

thisArg

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

автор: Bond

правити

Повернення

undefined

Метод не повертає жодного значення.

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

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

Приклади

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

const arraySparse = [1, 3, /* пусто */, 7];
let numCallbackRuns = 0;

arraySparse.forEach((element) => {
  console.log({ element });
  numCallbackRuns++;
});

console.log({ numCallbackRuns });

// { element: 1 }
// { element: 3 }
// { element: 7 }
// { numCallbackRuns: 3 }

// Перетворення циклу for на forEach

const items = ["item1", "item2", "item3"];

// Початковий варіант
const copyItems = [];
for (let i = 0; i < items.length; i++) {
  copyItems.push(items[i]);
}
console.log(copyItems); // → ["item1", "item2", "item3"]

// Той самий обхід через forEach
const copyItemsForEach = [];
items.forEach((item) => {
  copyItemsForEach.push(item);
});
console.log(copyItemsForEach); // → ["item1", "item2", "item3"]

// Зміна масиву під час ітерації

const words = ["one", "two", "three", "four"];
words.forEach((word) => {
  console.log(word);
  if (word === "two") {
    words.shift(); //'one' буде видалено з масиву
  }
}); // one // two // four

console.log(words); // ['two', 'three', 'four']

<header>
  <h2 class="title">forEach() для масиву</h2>
  <p class="description">Приклад використання методу forEach() для перебору елементів масиву.</p>
</header>
<main>
  <div class="output">
    <h3>Результат:</h3>
    <pre id="result"></pre>
  </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;
}

.output {
  margin-top: 25px;
}

.output h3 {
  margin-bottom: 10px;
}

#result {
  background-color: #f9f9f9;
  padding: 10px;
  border: 1px solid #999;
}

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

document.getElementById('result').textContent = array1.join('\n');
//# sourceURL=pen.js

const nums = [1, 2, 3, 4];

// return усередині forEach — це continue, а не break
const seen = [];
nums.forEach((n) => {
  if (n === 3) return;
  seen.push(n);
});
console.log('forEach:', seen.join(','));   // 1,2,4 — обхід дійшов до кінця

// зупинитися можна лише в справжньому циклі
const stopped = [];
for (const n of nums) {
  if (n === 3) break;
  stopped.push(n);
}
console.log('for...of:', stopped.join(',')); // 1,2

// forEach не чекає на await
const saved = [];
nums.forEach(async (n) => { await null; saved.push(n); });
console.log('одразу після forEach:', saved.length); // 0 — нічого ще не сталося

// forEach повертає undefined, тож ланцюжка не буде
console.log(nums.forEach((n) => n)); // undefined

// Виклик forEach() на об'єктах, які не є масивами

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 5, // ігнорується forEach(), оскільки length дорівнює 3
};
Array.prototype.forEach.call(arrayLike, (x) => console.log(x));
// 2
// 3
// 4