Array.prototype.forEach - garevna/js-course GitHub Wiki
entries()
every()
filter()
find()
findIndex()
flatMap()
Он просто выполняет указанные действия с каждым элементом массива
Рассмотрим самый простой вариант использования метода 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 )
}У этой анонимной функции может быть три аргумента:
- текущий элемент массива
- идекс текущего элемента массива
- сам итерируемый массив
Обязательным является только первый аргумент
Например, чтобы вывести в консоль все элементы массива 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 может принимать дополнительный аргумент - ссылку на контект вызова
let intervals = [ [ 1, 8 ], [ 2, 3 ], [ 4, 7 ], [ 5, 6 ] ]
intervals.forEach (
function ( interval ) { console.log ( this ) },
intervals
)В результате выполнения этого кода в консоли будет массив intervals
Фактически передача методу второго аргумента равносильна биндингу контекста:
intervals.forEach (
function ( interval ) {
console.log ( this )
}.bind( intervals )
)Поэтому при использовании стрелочной функции:
let intervals = [ [ 1, 8 ], [ 2, 3 ], [ 4, 7 ], [ 5, 6 ] ]
intervals.forEach (
interval => console.log ( this ),
intervals
)контекст которой изменить невозможно,
в консоли мы увидим объект window
Предположим, мы хотим передавать ссылку на массив res, куда следует помещать результаты вычислений:
var res = []
numbers.forEach (
function ( numb, ind ) {
this.push ( numb * ind )
},
res
)Чтобы обеспечить гибкость, т.е. возможность динамически изменять контекст вызова, а не устанавливать его единожды и навеки, завернем метод forEach в функцию createNewArray
У функции createNewArray будет два формальных параметра:
- исходный массив (
sourseArray) - массив результатов (
resultArray)
Функция 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 )В момент вызова значение формального параметра resultArray будет ссылкой на массив res
Таким образом, в результате вызова:
createNewArray ( numbers, res )внутри функции, передаваемой методу forEach в качестве первого аргумента, this будет указывать на массив res
Теперь функция createNewArray может быть применена к различным массивам:
var bug = [ 10, 1, 3, 8 ]
var fug = []
createNewArray ( bug, fug )Разберитесь самостоятельно, что делает следующий код:
Array.from ( document.styleSheets )
.forEach (
sheet => sheet.href ? null :
Array.from ( sheet.cssRules ).forEach (
rule => console.log ( rule )
)
)