JavaScript с нуля - [30]
return firstLetter + item.slice(1);
}
let newNames = names.map(capitalizeItUp);
console.log(newNames);
Разберемся, как этот код работает. Нас интересует функция capitalizeItUp, переданная в виде аргумента методу map. Эта функция выполняется для каждого элемента, и стоит обратить внимание, что текущий элемент передается ей в качестве аргумента. Для ссылки на аргумент текущего элемента вы можете использовать любое имя на ваш выбор. Мы ссылаемся на этот аргумент с помощью банального item:
function capitalizeItUp(item) {
let firstLetter = item.charAt(0). toUpperCase();
return firstLetter + item.slice(1);
}
Внутри этой функции мы можем написать любой код для нужного изменения текущего элемента массива. Единственное, что остается сделать, — это вернуть значение элемента нового массива:
function capitalizeItUp(item) {
let firstLetter = item.charAt(0). toUpperCase();
return firstLetter + item.slice(1);
}
Вот и все. После выполнения этого кода map возвращает новый массив, в котором все элементы имеют заглавные буквы и расположены на соответствующих местах. Исходный массив остается неизмененным, имейте это в виду.
Функции обратных вызовов
Наша функция capitalizeItUp также известна как функция обратного вызова. Такие функции подразумевают два действия:
• передачу в качестве аргумента другой функции;
• вызов из другой функции.
Вы будете встречать ссылки на функции обратных вызовов постоянно. Например, когда мы вскоре начнем рассматривать методы filter и reduce. Если вы слышите о них впервые, то теперь будете иметь о них лучшее представление. Если же вы были знакомы с этими функциями ранее, тем лучше для вас.
Фильтрация элементов
При использовании массивов вы будете часто фильтровать (то есть удалять) элементы на основе заданного критерия (рис. 13.7).
Рис. 13.7. Уменьшение количества элементов
Например, у нас есть массив чисел:
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
В данный момент в нем есть и четные, и нечетные числа. Предположим, что нам надо проигнорировать все нечетные и просмотреть только четные. Этого можно добиться с помощью метода filter, отфильтровав все нечетные числа, чтобы остались только нужные нам четные.
Используется метод filter аналогично методу map. Он получает один аргумент — функцию обратного вызова, а эта функция, в свою очередь, определяет, какие элементы массива отфильтровать. Это легче понять, взглянув на код:
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
let evenNumbers = numbers.filter(function (item) {
return (item % 2 == 0);
});
console.log(evenNumbers);
Мы создаем новый массив evenNumbers, который будет содержать результат выполнения метода filter для массива numbers. Содержимым этого массива будут четные числа благодаря нашей функции обратного вызова, проверяющей каждый элемент, чтобы узнать, будет ли результат item % 2 (то есть будет ли остаток при делении на 2) равен 0. Если функция вернет true, то элемент будет отправлен в отфильтрованный массив. Если же вернется false, элемент будет проигнорирован.
Здесь стоит заметить, что наша функция обратного вызова не является явно именованной, как функция capitalizeItUp в предыдущем примере. Она является анонимной, но это не мешает ей выполнять свою работу. Вы будете часто встречать функции обратного вызова в анонимной форме, поэтому стоит знать такой способ их определения.
Получение одного значения из массива элементов
Последним мы рассмотрим метод reduce. Он достаточно странный. В случаях с методами map и filter мы начинали с массива, имеющего один набор значений, а заканчивали другим массивом с другим набором значений. Используя метод reduce, мы по-прежнему будем начинать с массива. А вот в конце будем получать всего одно значение (рис. 13.8).
Рис. 13.8. От множества к одному
Здесь для прояснения происходящего необходим пример.
Давайте еще раз используем массив чисел из предыдущего раздела:
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
Мы хотим сложить все значения. В этом и есть смысл метода reduce, когда все значения массива сужаются в один элемент. Взгляните на этот код:
let total = numbers.reduce(function(total, current) {
return total + current;
}, 0);
console.log(total);
Мы вызываем reduce для массива чисел и передаем в него два аргумента:
• функцию обратного вызова;
• начальное значение.
Начинаем суммирование с начального значения 0, а функция отвечает за добавление каждого элемента массива. В отличие от предыдущих примеров, где функции получали только текущий элемент массива, функция для метода reduce задействуется в большей степени. В данном случае ей приходится иметь дело с двумя аргументами:
• первый содержит итоговое значение, полученное в результате всех произведенных на этот момент действий;
• второй — это текущий элемент массива.
Используя эти два аргумента, вы можете легко создавать различные сценарии, задействующие отслеживание чего-либо. В нашем примере, поскольку нам просто нужна сумма всех элементов массива, мы складываем total со значением current. Итоговым результатом будет 31.
Подробнее об аргументах функций обратных вызовов
Для методов map и filter в наших функциях обратных вызовов мы определяли только один аргумент, представляющий текущий элемент массива. Для метода reduce мы определяли два аргумента, представлявших итоговое значение и текущий элемент. Помимо этого, функции обратных вызовов имеют два опциональных аргумента, которые вы также можете определить:
