Знание того, как работать с коллекциями данных в Javascript, является фундаментальным набором навыков, которым должен овладеть каждый разработчик. Даже в повседневной жизни мы постоянно работаем с данными — пишем список покупок, обновляем контакт в нашей адресной книге или отмечаем что-то в нашем списке TODO, мы постоянно получаем доступ к данным и манипулируем ими. Так что неудивительно, что когда мы программируем, это тоже встречается довольно часто!
К счастью, Javascript предоставляет нам множество различных инструментов для этого. В этом посте будут обобщены некоторые из наиболее распространенных итераторов в Javascript и когда их использовать. Прежде чем перейти к ним, что такое итерация? Согласно определению школы Flatiron:
Итерация — это процесс выполнения набора инструкций один раз для каждого элемента коллекции.
В качестве небольшого отступления, вы можете задаться вопросом — а как насчет циклов? Ну, ключевой нюанс заключается в том, что цикл будет выполняться до тех пор, пока не будет выполнено определенное условие, а итерация будет выполняться для каждого элемента в объекте или массиве. Это означает, что методы итераторов дают нам удобный способ работы с данными во всей коллекции без необходимости выполнять дополнительную работу, необходимую в циклах for (например, инициализировать счетчик, увеличивать его и обеспечивать выход из цикла). петля). Yay для чистого и лаконичного кода!
.находить()
Допустим, у нас есть множество наших любимых пиццерий Нью-Йорка, и мы хотим найти первую, которая начинается с буквы «R».
const pizzerias = ["Paulie Gee's", "Roberta's", "Lucali", "Arturo's", "Denino's", "Ray's", "john's"]
Метод find будет перебирать каждый элемент в массиве, вызывать для него функцию обратного вызова и возвращать первый элемент в массиве, который соответствует условию, определенному функцией. (undefined возвращается в случае, если элемент не найден.) В функцию обратного вызова автоматически передаются три аргумента: текущий элемент массива, индекс текущего элемента и сам массив. (Обратите внимание, требуется только аргумент element.) Затем мы можем определить нашу функцию обратного вызова с этими аргументами в качестве параметров и использовать их для определения наших условий внутри этой функции.
Мы можем определить функцию обратного вызова, которая проверяет, является ли первая буква переданной ей строки «R», следующим образом:
function startsWithR(element) {
const elementLowered = element.toLowerCase()
return elementLowered.startsWith('r')
}
Теперь, когда у нас есть функция обратного вызова, мы можем использовать метод .find() для нашего массива pizzeria:
const rPizza = pizzerias.find(startsWithR) console.log(rPizza) // => "Roberta's"
.фильтр()
Скажем, например, мы хотим найти не первый элемент, отвечающий определенному условию в нашем массиве, а все из них. Удобный способ сделать это с помощью метода .filter(), который принимает в качестве аргумента функцию обратного вызова, которая будет вызываться для каждого элемента массива. Для каждого элемента, переданного обратному вызову, если возвращаемое значение обратного вызова равно true, этот элемент копируется в новый массив, а возвращаемое значение является новым массивом.
Давайте посмотрим на это в действии. Возвращаясь к нашему предыдущему примеру с массивом pizzerias, скажем, мы хотим получить все пиццерии, которые начинаются с буквы «R», а не только первую. Мы можем использовать ту же функцию обратного вызова startsWithR, которую мы написали ранее, но на этот раз с filter.
const rPizzas = pizzerias.filter(startsWithR) console.log(rPizza) // => ["Roberta's", "Ray's"]
.карта()
Мы рассмотрели несколько способов получить определенные элементы в нашем массиве, но что, если мы захотим их изменить? Введите .map() ! Аналогично find и filter , map принимает функцию обратного вызова. Для каждого элемента в массиве map передаст его функции обратного вызова, которая выполняет какое-то преобразование, а затем вернет новый массив со всеми измененными элементами.
Возвращаясь к нашему надежному (и жесткому) примеру массива pizzerias, предположим, что мы хотим убедиться, что наш массив правильно отформатирован, чтобы первая буква каждой строки была в верхнем регистре. Мы можем написать простую функцию обратного вызова, например:
function upperCaseFirst(element) {
const capitalized =
element.charAt(0).toUpperCase()
+ element.slice(1)
return capitalized
}
Теперь, когда у нас есть обратный вызов, мы можем вызвать map для нашего массива pizzerias, получив новый красиво отформатированный массив.
const capitalizedPizzerias = pizzerias.map(upperCaseFirst) console.log(capitalizedPizzerias) // => ["Paulie Gee's", "Roberta's", "Lucali", "Arturo's", "Denino's", "Ray's", "John's"]
Поиск, фильтрация и сопоставление — очень распространенные и полезные методы итератора для работы с данными и управления ими в Javascript. Для дальнейшего чтения ознакомьтесь с (чуть более сложным) методом reduce. Спасибо за чтение!
