Познакомимся с Javascript forEach и методами сопоставления массивов.

Метод forEach

Пример 1.1.

array.forEach(function(item, index, arr), thisArg)

Метод forEach принимает два аргумента: функцию обратного вызова и второй аргумент, который задает значение this для каждого элемента в массиве. Если значение thisArg не указано, его значение будет неопределенным.

Однако вы обычно находите метод forEach для массива, вызываемого только с первым аргументом (функция обратного вызова, таким образом присваивает неопределенное значение второму аргументу по умолчанию), как в 1.2 и 1.3 ниже:

Пример 1.2.

array.forEach((item, index, arr) => {})

Или :

Пример 1.3

array.forEach((item) => {})

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

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

1. Первый аргумент - это текущий элемент в массиве (во время итерации) (обязательно)
2. Второй аргумент относится к позиции (индексу) текущего элемента в массиве (необязательно)
3. Третий аргумент - это сам массив.

Основной пример:

const arr = 1, 2, 3, 4, 5, 6]
    arr.forEach((item, index, arr) => {
    console.log(`${item} on index ${index} in ${arr}`)
});


Практический пример:

Предположим, мы ожидаем данные от API (Application Programming Interface), который содержит имя пользователя, данные и другие детали, но не в том формате, который нам необходим для их отображения нашему пользователю. Возможно, нам нужно сначала отформатировать некоторые элементытаких данных, показать только некоторые данные или, возможно, добавьте дополнительную информацию в такой массив, прежде чем он будет отображен пользователю без редактирования исходного массива, потому что он вам все еще нужен для чего-то еще. Ну, это прекрасная ситуация, когда вам может понадобиться метод forEach.

const apiResponse = [{
  user: {firstname: 'tolumide', lastname: 'mic'},
  birthday: 'Sun Oct 15 2017 01:00:00 GMT+0100 (West Africa Standard Time)',
  phone: 070237461283
  },
  {
  user: {firstname: 'adeotun', lastname: 'ade'},
  birthday: 'Fri Mar 15 2013 01:00:00 GMT+0100 (West Africa Standard Time)',
  phone: 08111111111
}]
const modifiedResponse = [];
const assignValue = apiResponse.forEach(item => {
  const newObj = {
    fullname: `${item.user.firstname} ${item.user.lastname}`,
  phone: item.phone
 }
  modifiedResponse.push(newObj)
})

Если мы напечатаем значение assignValue, мы получим неопределенное значение, однако, если мы укажем значение ModifiedResponse, мы должны получить:

[{fullname: 'tolumide mic', birthday: '10/15/2017', phone: 070237461283}, {...}]

Что мы здесь сделали?

Мы не можем отобразить объект, содержащий имя и фамилию вместе как полное имя или отображать неформатированную дату для пользователя. Так что же нам делать? Мы перебираем каждый контент, создавая новый элемент, содержащий отформатированную информацию, когда нам нужно ее отобразить, а затем помещаем ее в новый массив (ifiedResponse), который мы будем использовать для отображения пользователю.

Метод forEach не возвращает значение:

const names = ['tolumide', 'ibukunoluwa', 'adebowale', 'oluwaseyi']
const capNames = names.forEach(names => {
  return name.toUpperCase();
})

Приведенные выше значения capNames возвращают неопределенное значение, поскольку forEach метод не возвращает результат.

Метод map

Пример 2.1

array.map(function(item, index, arr), thisArg)

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

Пример 2.2

array.map((item, index, arr) => {})

Пример 2.3

array.map((item) => {})

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

Это делается путем вызова функции обратного вызова, представленной ему для каждого элемента в массиве, и возврата результата по завершении. Как forEach method of arrays и функция обратного вызова в методе map принимает три аргумента (item, index и array).

1. Item: текущий элемент в массиве во время итерации (обязательно)
2. index: позиция текущего элемента во время итерации в массиве (необязательно)
3. array: массив был преобразован 

Практический пример:

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

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

const apiResponse = [{
  user: {firstname: 'tolumide', lastname: 'mic'},
  birthday: 'Sun Oct 15 2017 01:00:00 GMT+0100 (West Africa Standard Time)',
  phone: 070237461283
  },
  {
  user: {firstname: 'adeotun', lastname: 'ade'},
  birthday: 'Fri Mar 15 2013 01:00:00 GMT+0100 (West Africa Standard Time)',
  phone: 08111111111
}]
const modifiedResponse = apiResponse.map(item => ({
  fullname: `${item.user.firstname} ${item.user.lastname}`,
  lastname: item.phone
}))

Вы должны получить ответ, подобный этому, когда вы печатаете значение ifiedResponse с console.log ()

[{fullname: 'tolumide mic', birthday: '10/15/2017', phone: 070237461283}, {...}]

Приведенный выше пример показывает, что map метод возвращает значение, которое можно присвоить переменной.