Карта JavaScript, уменьшение и фильтр – функции массива JS, объясненные примерами кода

Автор оригинала: Beau Carnes.

Карта, уменьшение и фильтр – все методы массива в JavaScript. Каждый из них повторяется за массив и выполняет трансформацию или вычисление. Каждый вернет новый массив на основе результата функции. В этой статье вы узнаете почему и как использовать каждый.

Здесь веселое резюме Стивена Лушера:

Карта/фильтр/уменьшить в твиттере: карта ([?,?,?], Повар) => [?,?,?] Фильтр ([?,?,?], isvegetarian) => [?,?] Уменьшить ([?,?], есть) =>?

карта

карта () Метод используется для создания нового массива из существующего, применяя функцию для каждого из элементов первого массива.

Синтаксис

var new_array = arr.map(function callback(element, index, array) {
    // Return value for new_array
}[, thisArg])

В обратном вызове только массив элемент требуется для. Обычно некоторые действия выполняются по значению, а затем возвращается новое значение.

Пример

В следующем примере каждый номер в массиве удвоился.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(item => item * 2);
console.log(doubled); // [2, 4, 6, 8]

Фильтр

Фильтр () Метод принимает каждый элемент в массиве, и он применяет условное утверждение против него. Если это условное возвращает true, элемент устанавливается в выходной массив. Если условие возвращает false, элемент не подтолкнутся к выходу.

Синтаксис

var new_array = arr.filter(function callback(element, index, array) {
    // Return true or false
}[, thisArg])

Синтаксис для Фильтр похоже на карта Кроме функции обратного вызова должны вернуться правда держать элемент или ложь иначе. В обратном вызове только элемент требуется для.

Примеры

В следующем примере нечетные номера «отфильтрованы», оставив только даже номера.

const numbers = [1, 2, 3, 4];
const evens = numbers.filter(item => item % 2 === 0);
console.log(evens); // [2, 4]

В следующем примере Фильтр () используется для получения всех студентов, чьи оценки больше или равны 90.

const students = [
  { name: 'Quincy', grade: 96 },
  { name: 'Jason', grade: 84 },
  { name: 'Alexis', grade: 100 },
  { name: 'Sam', grade: 65 },
  { name: 'Katie', grade: 90 }
];

const studentGrades = students.filter(student => student.grade >= 90);
return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]

Уменьшать

Уменьшить () Способ уменьшает массив значений вниз до одного значения. Чтобы получить выходное значение, он запускает функцию редуктора на каждом элементе массива.

Синтаксис

arr.reduce(callback[, initialValue])

Обратный вызов Аргумент – это функция, которая будет вызываться один раз для каждого элемента в массиве. Эта функция принимает четыре аргумента, но часто используются только первые два.

• Аккумулятор – возвращенное значение предыдущей итерации
• CurrentValue – текущий элемент в массиве
• индекс – индекс текущего пункта
• массив – оригинальный массив, на котором было вызвано
• InitiveValue аргумент не является обязательным. Если при условии, что он будет использоваться в качестве начального значения аккумулятора в первом вызове функции обратного вызова.

Примеры

В следующем примере добавляет каждое число вместе в массиве чисел.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function (result, item) {
  return result + item;
}, 0);
console.log(sum); // 10

В следующем примере Уменьшить () Используется для преобразования массива строк в один объект, который показывает, сколько раз появляется каждая строка в массиве. Обратите внимание на этот вызов, чтобы уменьшить пропустить пустой объект {} Как Начальное значение параметр. Это будет использоваться в качестве начального значения аккумулятора (первый аргумент), переданный функции обратного вызова.

var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit'];

var petCounts = pets.reduce(function(obj, pet){
    if (!obj[pet]) {
        obj[pet] = 1;
    } else {
        obj[pet]++;
    }
    return obj;
}, {});

console.log(petCounts); 

/*
Output:
 { 
    dog: 2, 
    chicken: 3, 
    cat: 1, 
    rabbit: 1 
 }
 */

Видео объяснение

Проверьте видео ниже из канала FreeCodeCamp.org YouTube. Он охватывает обсуждаемые методы массива, плюс еще несколько.

Оригинал: “https://www.freecodecamp.org/news/javascript-map-reduce-and-filter-explained-with-examples/”