Фильтр? Карта!? Уменьшать!?!?

Так что в последнее время я изучаю код с 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 используется, когда вы хотите каким-то образом объединить все значения массива.

-Все три метода создают новый массив.

-Все три метода принимают функцию.

И это все! Надеюсь, это было полезно. Дайте мне знать, если у вас есть какие-либо вопросы в комментариях!