Резюме:
При итерации по массиву нам часто может потребоваться выполнить одну из следующих целей:
Мы хотим перебрать массив и создать новыймассив:
Array.prototype.map
Мы хотим перебрать массив и не создавать новый массив:
Array.prototype.forEach
for..of loop
В JS есть много способов достижения обеих этих целей.Однако некоторые из них более удобны, чем другие.Ниже вы можете найти некоторые часто используемые методы (наиболее удобный imo) для выполнения итерации массива в javascript.
Создание нового массива: Map
map() - это функция, расположенная в Array.prototype который может преобразовать каждый элемент массива, а затем возвращает новый массив.map() принимает в качестве аргумента функцию обратного вызова и работает следующим образом:
let arr = [1, 2, 3, 4, 5];
let newArr = arr.map((element, index, array) => {
return element * 2;
})
console.log(arr);
console.log(newArr);
Обратный вызов, который мы передали в map() в качестве аргумента, выполняется для каждого элемента.Затем возвращается массив, который имеет ту же длину, что и исходный массив.В этом новом элементе массива преобразовывается с помощью функции обратного вызова, передаваемой в качестве аргумента map().
Отличительная разница между map и другими механизмами цикла, такими как forEach и циклом for..of, заключается в том, чтоmap возвращается как новый массив и оставляет старый массив нетронутым (за исключением случаев, когда вы манипулируете его простотой, думая как splice).
Также обратите внимание, что обратный вызов функции map предоставляет в качестве второго аргумента порядковый номер текущей итерации.Кроме того, третий аргумент предоставляет массив, для которого был вызван map.Иногда эти свойства могут быть очень полезны.
Цикл с использованием forEach
forEach - это функция, расположенная на Array.prototype, которая принимает функцию обратного вызова в качестве аргумента.Затем он выполняет эту функцию обратного вызова для каждого элемента в массиве.В отличие от функции map(), функция forEach ничего не возвращает (undefined).Например:
let arr = [1, 2, 3, 4, 5];
arr.forEach((element, index, array) => {
console.log(element * 2);
if (index === 4) {
console.log(array)
}
// index, and oldArray are provided as 2nd and 3th argument by the callback
})
console.log(arr);
Как и функция map, обратный вызов forEach предоставляет в качестве второго аргумента порядковый номер текущей итерации.Также третий аргумент предоставляет массив, для которого был вызван forEach.
Циклический просмотр элементов с использованием for..of
Цикл for..of проходит через каждый элемент массива (или любой другой итерируемый объект).Это работает следующим образом:
let arr = [1, 2, 3, 4, 5];
for(let element of arr) {
console.log(element * 2);
}
В приведенном выше примере element обозначает элемент массива, а arr - массив, который мы хотим зациклить.Не то чтобы имя element было произвольным, и мы могли бы выбрать любое другое имя, например «el», или что-то более декларативное, когда это применимо.
Не путайте цикл for..in с циклом for..of.for..in будет перебирать все перечисляемые свойства массива, тогда как цикл for..of будет перебирать только элементы массива.Например:
let arr = [1, 2, 3, 4, 5];
arr.foo = 'foo';
for(let element of arr) {
console.log(element);
}
for(let element in arr) {
console.log(element);
}