Using foreach in javascript

.for Each ( )

Сколькими способами можно обойти массив? Это ещё один способ, но без явного описания цикла.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Метод массива for Each ( ) позволяет применить колбэк-функцию ко всем элементам массива. Можно использовать вместо классического цикла for . В отличие от него for Each ( ) выглядит более читабельным и понятным.

Пример

Скопировать ссылку «Пример» Скопировано

 const numbers = [1, 2, 3, 4] numbers.forEach((num) =>  const square = num * num console.log('Квадрат числа равен: ' + square)>) const numbers = [1, 2, 3, 4] numbers.forEach((num) =>  const square = num * num console.log('Квадрат числа равен: ' + square) >)    Скопировать Скопировано Не удалось скопировать   

Квадрат числа равен: 1 Квадрат числа равен: 4 Квадрат числа равен: 9 Квадрат числа равен: 16

Совсем любопытные могут заглянуть в исходники, чтобы посмотреть как for Each ( ) активно используется в коде этого примера.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Для того чтобы использовать for Each ( ) , понадобится колбэк-функция, которую необходимо передавать в метод. Функцию можно объявить заранее:

 function sliceFruit(fruit)  console.log('Разрезаю ' + fruit + '!')> const fruits = ['🍎', '🍊', '🍋', '🍓', '🥝'] fruits.forEach(sliceFruit) function sliceFruit(fruit)  console.log('Разрезаю ' + fruit + '!') > const fruits = ['🍎', '🍊', '🍋', '🍓', '🥝'] fruits.forEach(sliceFruit)    Скопировать Скопировано Не удалось скопировать   

Или создать её прямо в месте вызова:

 const food = ['🍔', '🍟', '🍦'] food.forEach((item) =>  console.log('Мам, купи ' + item + '!')>) const food = ['🍔', '🍟', '🍦'] food.forEach((item) =>  console.log('Мам, купи ' + item + '!') >)    Скопировать Скопировано Не удалось скопировать   

Важно знать, какие параметры принимает колбэк. Всего их три:

• item — элемент массива в текущей итерации;
• index — индекс текущего элемента;
• arr — сам массив, который мы перебираем.

Вернёмся к примеру с едой:

 const food = ['🍔', '🍟', '🍦'] food.forEach((item, index, arr) =>  console.log('Текущий элемент ' + item) console.log('Его индекс ' + index) console.log('Исходный массив ' + arr)>) const food = ['🍔', '🍟', '🍦'] food.forEach((item, index, arr) =>  console.log('Текущий элемент ' + item) console.log('Его индекс ' + index) console.log('Исходный массив ' + arr) >)    Скопировать Скопировано Не удалось скопировать   

Текущий элемент 🍔 Его индекс 0 Исходный массив ['🍔', '🍟', '🍦'] Текущий элемент 🍟 Его индекс 1 Исходный массив ['🍔', '🍟', '🍦'] Текущий элемент 🍦 Его индекс 2 Исходный массив ['🍔', '🍟', '🍦']

Как понять

Скопировать ссылку «Как понять» Скопировано

Метод for Each ( ) можно использовать, когда вам необходимо совершить одну и ту же операцию над всеми элементами массива.

Хотя в JavaScript уже есть возможность делать это, используя цикл for , метод for Each ( ) — это отличная альтернатива с рядом преимуществ:

• Использование метода for Each ( ) является декларативным способом обозначить нашу операцию. С точки зрения читабельности кода это больше приближено к естественному языку и лаконично.
• Позволяет удобно получать элемент в текущей итерации, без необходимости всякий раз обращаться к массиву по индексу.

Однако вместе с тем мы получаем и несколько недостатков:

• В for Each ( ) не будут работать return , break и continue , а следовательно, мы никак не можем прервать или пропустить итерацию. Потому, если для решения задачи необходимо воспользоваться каким-либо из этих операторов, придётся использовать обычный цикл for .
• for Each ( ) обрабатывает элементы массива в прямом порядке, то есть мы не можем пройти по массиву с конца.

💡 Метод for Each ( ) автоматически встроен в любой массив.

 const empty = []const someNums = [1, 2, 3] console.log(empty.forEach)// Выведет функциюconsole.log(someNums.forEach)// И здесь тоже const obj = <>console.log(obj.forEach)// undefined, потому что у объектов нет такого метода const empty = [] const someNums = [1, 2, 3] console.log(empty.forEach) // Выведет функцию console.log(someNums.forEach) // И здесь тоже const obj = > console.log(obj.forEach) // undefined, потому что у объектов нет такого метода    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Егор Огарков советует

Скопировать ссылку «Егор Огарков советует» Скопировано

🛠 Имена аргументов в функции-колбэке можно давать любые, главное, чтобы код было удобно читать.

🛠 Три параметра в функции-колбэке позволяют проводить дополнительные проверки. Например, последний ли это элемент массива:

 const nums = [1, 2, 3, 4, 5] nums.forEach((num, index, arr) =>  // Добавим к первому числу 9 if (index === 0)  num = num + 9 > // А последнее умножим на 2 else if (index === arr.length - 1)  num = num * 2 > console.log(num)>) const nums = [1, 2, 3, 4, 5] nums.forEach((num, index, arr) =>  // Добавим к первому числу 9 if (index === 0)  num = num + 9 > // А последнее умножим на 2 else if (index === arr.length - 1)  num = num * 2 > console.log(num) >)    Скопировать Скопировано Не удалось скопировать   

На собеседовании

Скопировать ссылку «На собеседовании» Скопировано

Объясните разницу между методами for Each ( ) и map ( ) .

Скопировать ссылку «Объясните разницу между методами forEach() и map().» Скопировано

Скопировать ссылку «Александр Рассудихин отвечает» Скопировано

Методы for Each ( ) и map ( ) определены на нескольких структурах данных. Мы рассмотрим чем отличаются эти методы для массивов.

Оба метода принимают колбэк, который вызывается для каждого элемента. Разница в том, что метод for Each ( ) ничего не возвращает, а метод map ( ) возвращает новый массив с результатами вызова колбэка на каждом исходном элементе. Если переданный колбэк ничего не возвращает в новом массиве появится undefined

Вы можете вернуть значение и из колбэка для for Each ( ) но оно никак не будет использоваться дальше.

 [1,2,3].forEach(a => a + 3); [1,2,3].forEach(a => a + 3);    Скопировать Скопировано Не удалось скопировать   

Используя map ( ) вы можете создавать цепочки вызовов. Если же вы будете использовать for Each ( ) так сделать не получится.

 const myArray = [4, 2, 8, 7, 3, 1, 0];const myArray2 = myArray.map(item => item * 2).sort((a, b) => a - b); console.log(myArray); // [4, 2, 8, 7, 3, 1, 0]console.log(myArray2); // [0, 2, 4, 6, 8, 14, 16] const myArray = [4, 2, 8, 7, 3, 1, 0]; const myArray2 = myArray.map(item => item * 2).sort((a, b) => a - b); console.log(myArray); // [4, 2, 8, 7, 3, 1, 0] console.log(myArray2); // [0, 2, 4, 6, 8, 14, 16]    Скопировать Скопировано Не удалось скопировать   

В примере выше изменился только my Array2 .

Для закрепления, реализуем ту же самую логику при помощи for Each ( ) .

 const myArray = [4, 2, 8, 7, 3, 1, 0];let myArray2 = []; myArray.forEach(item =>  myArray2.push(item * 2);>); myArray2 = myArray2.sort((a, b) => a - b); console.log(myArray); // [4, 2, 8, 7, 3, 1, 0]console.log(myArray2); // [0, 2, 4, 6, 8, 14, 16] const myArray = [4, 2, 8, 7, 3, 1, 0]; let myArray2 = []; myArray.forEach(item =>  myArray2.push(item * 2); >); myArray2 = myArray2.sort((a, b) => a - b); console.log(myArray); // [4, 2, 8, 7, 3, 1, 0] console.log(myArray2); // [0, 2, 4, 6, 8, 14, 16]    Скопировать Скопировано Не удалось скопировать   

Источник

JavaScript Array forEach()

The forEach() method calls a function for each element in an array.

The forEach() method is not executed for empty elements.

See Also:

Syntax

Parameters

function()	Required. A function to run for each array element.
currentValue	Required. The value of the current element.
index	Optional. The index of the current element.
arr	Optional. The array of the current element.
thisValue	Optional. Default undefined . A value passed to the function as its this value.

Return Value

More Examples

let sum = 0;
const numbers = [65, 44, 12, 4];
numbers.forEach(myFunction);

function myFunction(item) sum += item;
>

const numbers = [65, 44, 12, 4];
numbers.forEach(myFunction)

function myFunction(item, index, arr) arr[index] = item * 10;
>

Related Pages:

Browser Support

forEach() is an ECMAScript5 (ES5) feature.

ES5 (JavaScript 2009) fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

JavaScript forEach – How to Loop Through an Array in JS

Cem Eygi

The JavaScript forEach method is one of the several ways to loop through arrays. Each method has different features, and it is up to you, depending on what you’re doing, to decide which one to use.

In this post, we are going to take a closer look at the JavaScript forEach method.

Considering that we have the following array below:

Using the traditional «for loop» to loop through the array would be like this:

What makes the forEach( ) method different?

The forEach method is also used to loop through arrays, but it uses a function differently than the classic «for loop».

The forEach method passes a callback function for each element of an array together with the following parameters:

• Current Value (required) — The value of the current array element
• Index (optional) — The current element’s index number
• Array (optional) — The array object to which the current element belongs

Let me explain these parameters step by step.

Firstly, to loop through an array by using the forEach method, you need a callback function (or anonymous function):

The function will be executed for every single element of the array. It must take at least one parameter which represents the elements of an array:

numbers.forEach(function(number) < console.log(number); >);

That’s all we need to do for looping through the array:

Alternatively, you can use the ES6 arrow function representation for simplifying the code:

Array

The array parameter is the array itself. It is also optional and can be used if necessary in various operations. Otherwise, if we call it, it will just get printed as many times as the number of elements of the array:

numbers.forEach((number, index, array) => < console.log(array); >);

You can see the example usage of the forEach( ) method in this video:

If you want to learn more about Web Development, feel free to visit my Youtube Channel.

Источник