Я видел, как многие новички в JS сталкивались с трудностями при использовании карты, фильтра или сокращения, и не знали различных вариантов использования каждого из этих методов. Поэтому я решил написать этот блог и сравнить эти методы на нескольких примерах.
Давайте прыгнем прямо в него.
Массив.прототип.фильтр()
Метод filter вызывается для массива, возвращает новый массив и выбирает элементы, удовлетворяющие определенному условию.
function useFilter(arr) { return arr.filter((element) => { // You have to return a boolean here. return element % 2 === 0 }) } useFilter([1, 2, 3, 4, 5]) // return [2, 4]
В приведенном выше примере условие element % 2 === 0
. Следовательно, этому условию удовлетворяют только четные числа, а именно 2 и 4 в приведенном выше примере.
Массив.protoype.map()
Метод карты используется, когда мы хотим изменить каждый элемент внутри массива, а затем вернуть новый массив, содержащий новые элементы.
function doubler(arr) { return arr.map((element) => { return element * 2 }) } doubler([1, 2, 3]) // returns [2, 4, 6]
Простая функция выше возвращает новый массив, в котором все элементы удвоены.
Массив.protoype.reduce()
Методы сокращения более продвинуты, чем два предыдущих метода. Он имеет accumulator
, который может быть любого типа и запоминается на протяжении всего цикла, может изменяться на каждой итерации и, наконец, возвращается в конце.
Общий синтаксис
Array.protoype.reduce((accumulator, currentValue) => {}, initialValue)
Примеры
Первый пример — это функция, которая возвращает сумму всех элементов массива.
function getSum(arr) { return arr.reduce((acc, currVal) => { // Whatever you return here will be the new value of the accumulator return acc + currVal }, 0) } getSum([1, 2, 3]) // returns 6
Чтобы лучше понять это, давайте отслеживать все наши переменные на протяжении всего цикла.
iteration acc currVal retrun value 1st 0 1 0 + 1 (1) 2nd 1 2 1 + 2 (3) 3rd 3 3 3 + 3 (6)
В следующем примере я хочу использовать пустой массив в качестве initialValue
, чтобы имитировать функциональность метода filter()
, просто чтобы показать вам силу reduce()
.
function useReduceToFilter(arr) { return arr.reduce((acc, currVal) => { currVal % 2 === 0 && acc.push(currVal) return acc }, []) } useReduceToFilter([1, 2, 3, 4]) // returns [2, 4]
Давайте еще раз проследим за всеми нашими переменными.
iteration acc currVal retrun value 1st [] 1 [] 2nd [] 2 [2] 3rd [2] 3 [2] 4th [2] 4 [2, 4]
Надеюсь, это было полезно. Если у вас есть какие-либо вопросы, дайте мне знать в комментариях, и я отвечу на них, насколько мне известно.
Удачного кодирования