Манипуляции с массивом Javascript с использованием методов Filter, Map и Reduce

Одним из самых запутанных аспектов Javascript, когда я впервые изучал его, было то, как можно использовать существующие методы прототипов массивов для управления массивами. Используя методы filter, map и reduce прототипов массивов, вы можете преобразовать массив во что угодно.

Я лучше всего учусь на примерах, поэтому я решил привести пример массива и различных манипуляций, которые вы можете с ним выполнять. Допустим, у нас есть база данных пользователей со следующим массивом:

const users = [
{ id: 382981, name: 'John', age: 33, job: 'Electrician'},
{ id: 123784, name: 'Sandy', age: 45, job: 'Archaeologist'},
{ id: 984727, name: 'Jane', age: 38, job: 'Chef'},
{ id: 483820, name: 'Bob', age: 57, job: 'Nurse'},
{ id: 539382, name: 'Cora', age: 29, job: 'Teacher'}
];

В зависимости от того, как вы хотите манипулировать этим массивом, вам придется использовать методы filter, map или reduce.

Фильтр

Используйте, когда вы хотите создать новый массив после фильтрации элементов, которые не проходят тест, предоставленный функцией.

Пример. Из массива users мы хотим создать новый массив olderThan40 с пользователями старше 40 лет.

const olderThan40 = users.filter((user) =>{
  return user.age >= 40
})

Будет выведено следующее.

olderThan40 = [
  { id: 123784, name: 'Sandy', age: 45, job: 'Archaeologist' },
  { id: 483820, name: 'Bob', age: 57, job: 'Nurse' }
]

Карта

Используйте, когда вы хотите создать новый массив на основе предыдущего массива.

Пример. Из массива users мы хотим создать новый массив usersId, содержащий только идентификаторы пользователей.

const usersId = users.map((user) =>user.id)

Будет выведено следующее.

usersId:[ 382981, 123784, 984727, 483820, 539382 ]

Уменьшить

Используйте, когда вы хотите взять массив и преобразовать его, чтобы получить один результат.

1. Массив в массив пример: из массива users мы хотим создать новый объект, jobAndAgeData, содержащий только возраст и должности каждого пользователя.

let usersAgeJob = [];
const jobAndAgeData = users.reduce((data, user) => {
  usersAgeJob.push({age: user.age, job: user.job})
  return usersAgeJob;
}, {});

Будет выведено следующее.

[
  { age: 33, job: 'Electrician' },
  { age: 45, job: 'Archaeologist' },
  { age: 38, job: 'Chef' },
  { age: 57, job: 'Nurse' },
  { age: 29, job: 'Teacher' }
]

2. Массив в объект пример 1: из массива users мы хотим создать новый объект, modifiedUsers, который использует id пользователя в качестве ключа.

const modifiedUsers = users.reduce((data, user) => {
  data[user.id] = {name: user.name, age: user.age, job: user.job};
  return data;
}, {})

Будет выведено следующее.

{
  '123784': { name: 'Sandy', age: 45, job: 'Archaeologist' },
  '382981': { name: 'John', age: 33, job: 'Electrician' },
  '483820': { name: 'Bob', age: 57, job: 'Nurse' },
  '539382': { name: 'Cora', age: 29, job: 'Teacher' },
  '984727': { name: 'Jane', age: 38, job: 'Chef' }
}

3. Массив в объект пример 2: из массива users мы хотим создать новый объект, usersInfo, который создает объект который суммирует количество пользователей и общий возраст пользователей.

const usersInfo = users.reduce((data, user) => {
  data.users += 1;
  data.totalAge += user.age;
  return data
}, {users: 0, totalAge: 0})

Будет выведено следующее.

{ users: 5, totalAge: 202 } // 45 + 33 + 57 + 29 + 38

4. Массив в Int пример 1: из массива users мы хотим создать новый int, numOfUsers, который возвращает общее Количество пользователей.

const numOfUsers = users.reduce((total, user) => {
  total += 1;
  return total
}, 0)

Будет выведено следующее.

5 // for 5 users

5. Массив в Int пример 2: из массива users мы хотим вернуть новое целое, usersAgeTotal, которое возвращает возраст Всего.

const usersAgeTotal = users.reduce((total, user) => {
  return total + user.age
}, 0)

Будет выведено следующее.

202 // 45 + 33 + 57 + 29 + 38

Заключение

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

1. Фильтр — создает новый массив после фильтрации элементов, не прошедших тест, предоставленный функцией.
2. Map — создает новый массив на основе предыдущего массива.
3. Reduce — берет массив и преобразует его, чтобы получить один результат.

Цитирование

Я использовал следующие ресурсы, чтобы помочь мне понять эти темы:

[1]. Тайлер МакГиннис. Расширенный курс Javascript. (2020). https://tylermcginnis.com/courses/

[2]. Аллигатор.ио. Наконец-то понять метод JavaScript Reduce. (2020). https://alligator.io/js/finally-understand-reduce/