Методы массива JavaScript ForEach, Map и Reduce

ECMAScript 2015 представил несколько новых функций работы с массивами, которые помогают разработчикам работать с массивами.

Я рассмотрю некоторые из этих функций, представленных в JavaScript, а именно forEach, map и reduce. Эти функции были введены для уменьшения общих проблем, с которыми разработчики сталкивались при изменении массивов. Наиболее распространенными проблемами были запись неэффективных итераций массива и изменение существующих массивов.

для каждого

Используйте forEach, если вы хотите выполнить итерацию по массиву и НЕ хотите изменить содержимое массива.

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

const userNames = [
  { firstName: 'Test1' }, 
  { firstName: 'Test2' }, 
  { firstName: 'Test3' }
]
userNames.forEach((user) => console.log(user.firstName))
// The console log will be: 
//     Test1
//     Test2
//     Test3

карта

Используйте map, если вы хотите ИЗМЕНИТЬ значения массива. Map присвоит значения новому массиву, поэтому исходный массив не будет видоизменяться. ПОМНИТЕ: в JavaScript нельзя изменять массивы!

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

const emails = [
  'invalid @test.com', 
  '[email protected]', 
  'wro [email protected]'
]
const cleanEmails = emails.forEach((email) => {
  return email.replace(/\\s+/g,""); // Remove empty spaces
})
console.log(cleanEmails)
// Console log: 
// [
//   '[email protected]', 
//   '[email protected]',
//   '[email protected]'
// ]

уменьшать

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

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

Цель этого примера — преобразовать структуру данных из массива в объект, а ключом объектов будет идентификатор.

const users = [
  { id: 1, firstName: 'Ignacio', lastName: 'Ojanguren' },
  { id: 2, firstName: 'Testing', lastName: 'Test' },
  { id: 3, firstName: 'First', lastName: 'Name' },
]
// newUser is the accumulator object
// user is the value in the array
const newObject = users.reduce((newUsers, user) => {
  return { ...newUsers, [user.id]: user }
}, {});
console.log(newObject)
```
Console Log result 
  { 1: { 
      id: 1, 
      firstName: “Ignacio”, 
      lastName: “Ojanguren” 
    }, 
    2: { 
      id: 2, 
      firstName: “Testing”, 
      lastName: “Test” 
    }, 
    3: { 
      id: 3, 
      firstName: “First”, 
      lastName: “Name” 
    } 
  }
```

Для получения дополнительной информации об этих функциях обратитесь к оригинальной документации: forEach, map и reduce.