Методы итерации массива Javascript: forEach, map и filter

Меня зовут Захария Мартин, и я изучаю программную инженерию в школе Flatiron.

В конце этапа 1 наших уроков нам необходимо выполнить проект, в котором мы создаем веб-страницу. Веб-страница должна получать доступ к данным с сервера API или JSON, должна иметь 3 отдельных прослушивателя событий и включать по крайней мере одно использование метода итерации массива, такого как карта, фильтр или forEach.

Для меня это последнее требование было самым сложным. Каждый перебирает массив и выводит что-то другое. Когда использовать каждый из них, может быть трудно понять, особенно когда вы сталкиваетесь с пустым файлом script.js и смутным представлением о том, что вы хотите, чтобы ваша веб-страница делала. В конце концов я понял, что forEach лучше всего подходит для того, что я пытался сделать. Здесь я объясню, что каждый из них делает, чтобы вы знали, когда их использовать.

для каждого

forEach — самый простой метод из трех. Он перебирает массив и выполняет функцию обратного вызова один раз для каждого элемента массива.

array.forEach((element) => { /*...*/ })

Например

const sampleArray = ['1', '2', '3'];

sampleArray.forEach(element => {
console.log(element * 2)
})

// expected output: "2"
// expected output: "4"
// expected output: "6"

Чтобы использовать пример из моего проекта фазы 1, я создал приложение, которое позволит вам искать монстров Dungeons and Dragons по их рейтингу опасности. Здесь я определил, что forEach — лучший метод итерации для использования, потому что мне нужно было запустить функцию обратного вызова только для элементов моего массива monsterObj, которые соответствуют определенным критериям. Здесь forEach перебирал каждого монстра в monsterObj, и если CR монстра был равен значению рейтинга опасности в раскрывающемся меню, то выполнялась функция renderOneMonsterIcon для этого элемента монстра.

let monsterObj

fetch("http://localhost:3000/monsterData")
.then(res => res.json())
.then(monsterData => monsterObj = monsterData)


document.getElementById('searchButton').addEventListener("click", () => {
  document.getElementById("monsterIconList").innerHTML = ''
  monsterObj.forEach(monster => {
      if (monster.cr.toString() === document.getElementById("challengeRating").value) {
      renderOneMonsterIcon(monster)
    }
  })
})

фильтр

Метод filter создает копию части данного массива, отфильтрованную только до тех элементов из данного массива, которые проходят проверку, реализованную предоставленной функцией.

array.filter((element) => { /* … */ })

Если тест, реализованный предоставленной функцией, возвращает true, то этот элемент помещается в массив подмножества, а затем продолжается итерация до следующего элемента. Если он возвращает false, он просто продолжает свою итерацию до следующего элемента.

Например

const words = ['grade', 'brochure', 'global', 'groups', 'section', 'office'];

const result = words.filter(word => word.length === 6);

console.log(result);
// expected output: Array ["global", "groups", "office"]

В своем проекте я сначала попытался использовать метод filter, перебирая массив monsterObj и применяя оператор if к элементам массива. Поскольку мне не нужна была копия отфильтрованного массива, а только для выполнения функции обратного вызова к элементам массива, forEach работал намного лучше, чем filter.

карта

Метод карты создает новый массив, заполненный результатами вызова предоставленной функции для каждого элемента массива.

array.map((element) => { /* … */ })

Например

const sampleArray = ["joe", "sam", "henry"];

const sampleArray2 = sampleArray.map(element => element.toUpperCase());

console.log(sampleArray2)

// expected output: Array ['JOE', 'SAM', 'HENRY']

Как и в случае с фильтром, вывод метода карты представляет собой массив. В отличие от filter, map возвращает массив одинаковой длины, применяя предоставленную функцию по очереди к каждому элементу и заполняя новый массив результатом.

Заключение

Основное различие между тремя методами заключается в возвращаемом значении каждого из них. Когда их использовать, определяется тем, какой результат вы хотите получить.

• Метод карты возвращает новый массив равной длины, каждый элемент которого является результатом функции обратного вызова.
• Метод filter возвращает копию части массива, отфильтрованную только до тех элементов массива, которые проходят проверку, реализованную предоставленной функцией. Если ни один элемент не пройдет проверку, будет возвращен пустой массив.
• Метод forEach возвращает значение undefined, так как его целью является простое применение функции обратного вызова к каждому элементу массива.

Например,

Вам нужно, чтобы все зарплаты в массиве заработной платы увеличились на 1 доллар в час? Тогда может быть лучше использовать метод карты.

Вам нужен новый массив, содержащий только сотрудников, которым платят больше 18 долларов в час? Затем используйте метод фильтра.

Вам нужно выполнить функцию payEmployee для каждого сотрудника в массиве заработной платы? Затем используйте forEach.