Skip to content

Array.prototype.forEach

garevna edited this page Dec 27, 2018 · 5 revisions

🎓 Итерирующие методы массивов

entries()
every()
filter()
find()
findIndex()
flatMap()


🎓 forEach()

⚠️ Этот метод не возвращает никакого значения
Он просто выполняет указанные действия с каждым элементом массива

☕ Рассмотрим самый простой вариант использования метода forEach()

var  people = [ "Ivan", "Mary", "Elena", "Andrey" ]

people.forEach (
    function ( currentValue, index, array ) {
        console.log ( index  )
        console.log ( currentValue )
    }
)

Здесь мы итерируем массив people с помощью метода forEach
Методу forEach в качестве аргумента передается анонимная функция:

function ( currentValue, index, array ) {
    console.log ( index  )
    console.log ( currentValue )
}

У этой анонимной функции может быть три аргумента:

  1. текущий элемент массива
  2. идекс текущего элемента массива
  3. сам итерируемый массив

Обязательным является только первый аргумент

Например, чтобы вывести в консоль все элементы массива people, мы можем использовать метод forEach следующим образом:

people.forEach (
    function ( x ) {
        console.log ( x )
    }
)

Результат работы предыдущего кода будет идентичен результату работы обычного оператора for ... of:

for ( var x of people ) {
    console.log ( x )
}

Для чего могут понадобиться второй и третий аргументы анонимной функции:

предположим, нам нужно произвести вычисления с участием индекса элемента массива при этом мы хотим добавить результаты вычислений в исходный массив ( изменить его )

var  numbers = [ 8, 4, 9, 7 ]
var res = []

numbers.forEach (
    function ( numb, ind, res ) {
        res.push ( numb * ind )
    }
)

console.log ( numbers )

В консоли будет:

[ 8, 4, 9, 7, 0, 4, 18, 21 ]

или мы хотим удвоить все значения элементов масива:

var  numbers = [ 8, 4, 9, 7 ]

numbers.forEach (
    function ( numb, ind, res ) {
        res [ ind ] = numb * 2
    }
)

console.log ( numbers )

В консоли будет:

[ 16, 8, 18, 14 ]

т.е. исходный массив numbers был изменен

Теперь получим результаты вычислений в новый массив res

var  numbers = [ 8, 4, 9, 7 ]
var res = []

numbers.forEach (
    function ( numb, ind ) {
        res.push ( numb * ind )
    }
)

console.log ( res )
console.log ( numbers )

Теперь результаты вычислений будут помещены в массив res, а исходный массив numbers останется неизмененным

Метод forEach может принимать дополнительный аргумент - ссылку на контект вызова ( res ):

numbers.forEach (
    function ( numb, ind ) {
        this.push ( numb * ind )
    },
    res
)

Предположим, мы хотим передавать ссылку на массив, куда следует помещать результаты вычислений

Для этого объявим функцию createNewArray, которая будет вызывать метод forEach

Фомальные параметры функции createNewArray:

  • исходный массив ( sourseArray )
  • массив результатов ( resultArray )

При вызове метода forEach функция createNewArray будет передавать методу forEach не только анонимную функцию, которая будет вызвана на каждой итерации цикла, но и еще один дополнительный аргумент - ссылку на контекст вызова метода ( this )

var  numbers = [ 8, 4, 9, 7 ]
var res = []

function createNewArray ( sourseArray, resultArray ) {
    sourseArray.forEach (
        function ( numb, ind ) {
            this.push ( numb * ind )
        },
        resultArray
    )
}

createNewArray ( numbers, res )
console.log ( res )
console.log ( numbers )

В этом примере методу forEach передается, кроме анонимной функции, дополнительный аргумент resultArray

Внутри метода this будет указывать на то, что окажется в аргументе resultArray

в момент вызова фактическое значение resultArray будет ссылкой на массив res

Таким образом, в результате вызова:

createNewArray ( numbers, res )

внутри метода forEach this будет указывать на массив res

Теперь функция createNewArray может быть применена к различным массивам, т.е. при вызове мы передаем ей в качестве аргументов ссылки на массивы numbers и res

Мы можем применить ее к другим массивам:

var  numArray = [ 10, 1, 3, 8 ]
var resultArray = []

createNewArray ( numArray, resultArray )

keys()
map()
reduce()
reduceRight()
some()
sort()
values()

© Irina H.Fylyppova 2018
Использование данных материалов или любой их части коммерческими школами ( курсами ) является нарушением авторских прав


Новая версия


1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
16 17 18 19

Занятие 1

⤵️

Занятие 2

⤴️ ⤵️

Занятие 3

⤴️ ⤵️

Занятие 4

⤴️ ⤵️

Занятие 5

⤴️ ⤵️

Занятие 6

⤴️ ⤵️

Занятие 7

⤴️ ⤵️

Занятие 8

⤴️ ⤵️

Занятие 9

⤴️ ⤵️

Занятие 10

⤴️ ⤵️

Занятие 11

⤴️ ⤵️

Занятие 12

⤴️ ⤵️

Занятие 13

⤴️ ⤵️

Занятие 14

⤴️ ⤵️

Занятие 15

⤴️ ⤵️

Занятие 16

⤴️ ⤵️

Занятие 17

⤴️ ⤵️

Занятие 18

⤴️ ⤵️

Занятие 19

⤴️ ⤵️

⤴️

ico20 Дополнительно
dir-20 Справочная инфо

Clone this wiki locally