Карта, зменшення та фільтрування JavaScript - функції масиву JS, пояснені прикладами коду

Картування, зменшення та фільтрування - це всі методи масиву в JavaScript. Кожен виконає ітерацію масиву та виконає перетворення або обчислення. Кожен поверне новий масив на основі результату функції. У цій статті ви дізнаєтесь, чому і як використовувати кожну з них.

Ось цікавий підсумок Стівена Люшера:

Карта / фільтр / зменшення в твіті:

карта ([?,?,?], кухар)

=> [?,?,?]

фільтр ([?,?,?], isVegetarian)

=> [?,?]

зменшити ([?,?], з’їсти)

=>?

- Стівен Люшер (@steveluscher) 10 червня 2016 р

Карта

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

Синтаксис

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

У зворотному виклику elementпотрібен лише масив . Зазвичай над значенням виконується якась дія, а потім повертається нове значення.

Приклад

У наступному прикладі кожне число в масиві подвоюється.

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

Фільтр

filter()Метод приймає кожен елемент масиву і застосовується умовний оператор проти нього. Якщо цей умовний термін повертає істину, елемент надходить у вихідний масив. Якщо умова повертає значення false, елемент не надходить у вихідний масив.

Синтаксис

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

Синтаксис for filterподібний до map, за винятком того, що функція зворотного виклику повинна повертатися, trueщоб зберегти елемент, або falseіншим чином. У зворотному дзвінку потрібно лише те element, що потрібно.

Приклади

У наступному прикладі непарні числа "відфільтровуються", залишаючи лише парні числа.

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

У наступному прикладі filter()використовується для отримання всіх учнів, оцінки яких перевищують або дорівнюють 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 } ]

Зменшити

reduce()Метод зменшує масив значень вниз тільки одне значення. Щоб отримати вихідне значення, він запускає функцію редуктора на кожному елементі масиву.

Синтаксис

arr.reduce(callback[, initialValue])

callbackАргумент це функція , яка буде викликатися один раз для кожного елемента масиву. Ця функція приймає чотири аргументи, але часто використовуються лише перші два.

  • акумулятор - повернене значення попередньої ітерації
  • currentValue - поточний елемент у масиві
  • index - індекс поточного елемента
  • масив - вихідний масив, для якого було викликано зменшення
  • initialValueАргумент є необов'язковим. Якщо надано, воно буде використано як початкове значення накопичувача під час першого виклику функції зворотного виклику.

Приклади

Наступний приклад додає кожне число разом у масив чисел.

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

У наступному прикладі reduce()використовується для перетворення масиву рядків в один об'єкт, який показує, скільки разів кожен рядок з'являється в масиві. Зверніть увагу, що цей виклик для зменшення передає порожній об'єкт {}як initialValueпараметр. Це буде використано як початкове значення накопичувача (перший аргумент), переданого функції зворотного виклику.

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 } */

Пояснення до відео

Перегляньте відео нижче з YouTube-каналу freeCodeCamp.org. Він охоплює обговорювані методи масиву, а також кілька інших.