-
Notifications
You must be signed in to change notification settings - Fork 16
Array.prototype.forEach
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 может принимать дополнительный аргумент - ссылку на контект вызова ( 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 )
© Irina H.Fylyppova 2018
Использование данных материалов или любой их части коммерческими школами ( курсами ) является нарушением авторских прав
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 |
| ⏬ |
|---|
- Блок-схема алгоритма
- Developer Tools
- Chrome DevTools
- Переменные
- Оператор typeof
- Структуры данных
- Операторы присваивания
- Логические выражения
- Условные операторы
- Инкремент
- Свойство length
- Оператор цикла for
- UTF-8
Homework
- Приведение типов
- NaN | null | Infinity
- BigInt (ES10)
- Функции
- Методы
- Методы строк
- Методы массивов
- Date ()
Самостоятельная работа
Практика (XSS)
Homework
- Циклы while и do...while
- Циклы for...of и for...in
- Параметры по умолчанию
- Объект function
Практика
Homework
- Нативные и host-объекты
- Литерал объекта
- Унаследованные свойства
- Конструктор
- Модель наследования
- Публичные и приватные свойства
- Оператор in
1
Homework
- Итерирующие методы массивов
- Тестирование производительности
- SHA
Homework
- Размеры и прокрутка элемента
- Event Loop
- async | await
- API
- REST | HATEOAS
- status codes
JSON placeholder-
JSON server
fake chat
Homework
- strict mode
- Вычисляемые имена свойств
- Краткий синтаксис методов
- Краткий литерал объекта
- Классы
Homework
- :not(:defined)
- Shadow DOM
- Custom elements
- Lifecycle hooks
- whenDefined
- <template>
- slot
1
2
3
Homework
- npm
- webpack
Упражнение 1- ES6 модули
Упражнение 2- --mode | --watch
Упражнение 3
Упражнение 4
Упражнение 5
Упражнение 6
Упражнение 7
Упражнение 8
Homework
| ⏫ |
|---|

Дополнительно
Справочная инфо
Git Bush
TCP/IP
Коды символов