Так что в последнее время я изучаю код с SuncoastJS. А в прошлые выходные у меня была возможность по-настоящему, по-настоящему ознакомиться с методами массива JavaScript, и прежде всего с Filter, Map и Уменьшить.
Короче, они классные!
Единственным недостатком является то, что поначалу их сложно понять, поэтому в этом сообщении в блоге моя цель — как можно яснее разбить эти методы. Чтобы сделать это менее болезненным, мы начнем с карты. Однако перед этим давайте проясним некоторые вещи:
1: Все они работают только с массивами. Методы существуют только в массивах JavaScript.
2: Все эти методы работают со значениями массива и возвращают новый массив. Они НЕ мутируют входной массив.
3: Каждый из них является сокращением для того, что вы уже можете делать в JavaScript.
С этим покончено, давайте начнем!
Array.prototype.map()
Что он должен принимать: массив
Что он возвращает: новый массив, в котором каждое значение каким-то образом изменено.
Array.map()
великолепен, потому что он дает вам сокращенный способ изменить каждое значение массива. При вызове у вас есть возможность предоставить функцию, в которой первый параметр является значением массива, с которым вы работаете, наряду с необязательными параметрами для получения индекса этого элемента и одним параметром для получения всего массива. После функции у вас есть возможность определить значение this
, но нам не нужно беспокоиться об этом прямо сейчас.
Внутри карты массива у вас есть возможность предоставить функцию, и возвращаемое значение этой функции определяет, что вы возвращаете. Итак, если бы у меня был фрагмент кода:
let arr = [1,2,3,4,5]; let newArr = arr.map((num) => { return num * 2; }); console.log(newArr);
Я ожидал бы получить:
[2,4,6,8,10]
Видеть? Array.map()
запустил функцию для каждого отдельного значения массива, а затем выплюнул это обратно в новый массив для меня.
Этот фрагмент кода будет по существу эквивалентен:
let arr = [1,2,3,4,5]; let newArr = []; for(let I = 0; I < arr.length; i++) { let newVal = arr[i] * 2; newArr.push(newVal); } console.log(newArr);
Как видите, мы все равно получаем тот же результат: [2,4,6,8,10]
Array.prototype.filter()
Что он должен принимать: массив
Что он возвращает: новый массив со всеми значениями, прошедшими заданный тест.
Array.filter()
дает вам хорошее сокращение для извлечения информации из массива. Как и в случае с картой, вам нужно вызвать функцию с заданным элементом. Конечно, параметры индекса и массива также по-прежнему доступны. Вы можете думать, что фильтр почти идентичен с точки зрения синтаксиса, просто он возвращает вам что-то еще.
Например:
const arr = [1,2,3,4,5]; const newArr = arr.filter((elem) => { return num < 3; }); console.log(newArr);
Я ожидал получить: [1,2]
Array.filter()
просматривал поступающие значения и возвращал их только в том случае, если они прошли указанный тест!
Это эквивалентно следующему сокращенному варианту:
const arr = [1,2,3,4,5]; let newArr = []; for(let I = 0; I < arr.length; i++) { if(arr[i] < 3) { newArr.push(arr[i]); } } console.log(newArr);
и, как и раньше, получаем: [1,2]
Array.prototype.reduce()
Пристегивайтесь, ребята, это весело!
Таким образом, в то время как цель Array.map()
заключалась в изменении каждого отдельного значения массива, а Array.filter()
— получение только тех значений массива, которые проходят определенный тест, цель редукции состоит в том, чтобы объединить все в одно значение или «уменьшить». весь массив в одно значение.
Подобно двум предыдущим методам, он работает с массивом и принимает параметр функции. Отличие начинается с внутренней функции. Внутри этой функции мы берем два значения, обычно называемые «аккумулятор» и «значение» соответственно. Чтобы разбить его, «аккумулятор» — это комбинация каждого отдельного элемента на данный момент, а значение — это только текущий элемент. По мере того, как работает сокращение, оно берет результат функции и делает его новым аккумулятором для каждого отдельного элемента.
Глаза начинают пересекаться? Не волнуйтесь, вот пример!
const arr = [1,2,3,4,5]; let combinedVal = arr.reduce((acc, val) => { return acc + val; }); console.log(combinedVal);
и мы получим: 15
Так что, черт возьми, только что произошло? Давайте разберем это шаг за шагом.
Для первого запуска arr.reduce у нас было по существу:
return 1 + 2;
1 + 2 = 3, так что это станет нашим новым аккумулятором для следующего запуска.
При втором запуске arr.reduce мы имеем:
return 3 + 3;
3 + 3 = 6, так что это станет нашим новым аккумулятором для следующего запуска:
return 6 + 4;
Хорошо, это нормально, это дает нам 10! И в финальном прогоне имеем:
return 10 + 5;
Видишь, что случилось? Он принимал значение, возвращал его и делал это значение новым аккумулятором при каждом запуске, эффективно «суммируя» все элементы вместе.
Для тех из вас, кто все еще любопытен, это будет эквивалентно:
let arr = [1,2,3,4,5]; let sum = 0; for(let I = 0; I < arr.length; i++) { sum += arr[i]; } console.log(sum);
И это все!
Итак, резюмируя:
-Map используется, когда вы хотите каким-то образом изменить каждое значение массива.
-Фильтр используется, когда вы хотите получить несколько значений, прошедших проверку, из массива.
-Reduce используется, когда вы хотите каким-то образом объединить все значения массива.
-Все три метода создают новый массив.
-Все три метода принимают функцию.
И это все! Надеюсь, это было полезно. Дайте мне знать, если у вас есть какие-либо вопросы в комментариях!