Окончательное руководство по методам массива JavaScript – карта

Автор оригинала: FreeCodeCamp Community Member.

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

Синтаксис:

const newArr = oldArr.map(function(currentValue, index, array) {
  // Do stuff with currentValue (index and array are optional)
});

• Ньюарр – новый массив, который возвращается
• Oldarr – Старый массив работает на. Этот массив не будет изменен
• CurrentValue – текущее значение обрабатывается
• индекс – текущий индекс обработки ценности
• массив – Оригинальный массив

Примеры:

Es5.

var arr = [1, 2, 3, 4];

var newArray = arr.map(function(element) {
  return element * 2
});

console.log(arr); // [1, 2, 3, 4]
console.log(newArray); // [2, 4, 6, 8]

ES6

const arr = [1, 2, 3, 4];

const newArray = arr.map(element => {
  return element * 2;
});

const newArrayOneLiner = arr.map(element => element * 2);

console.log(arr); // [1, 2, 3, 4]
console.log(newArray); // [2, 4, 6, 8]
console.log(newArrayOneLiner); // [2, 4, 6, 8]

карта против foreach.

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

Так какой метод вы должны использовать? Вообще, лучше использовать foreach () Если вам не нужно менять значения в исходном массиве. foreach () Это хороший выбор, если все, что вам нужно сделать, это зарезать каждый элемент массива на консоль или сохранить их в базу данных:

const letters = ['a', 'b', 'c', 'd'];

letters.forEach(letter => {
  console.log(letter);
});

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

Как использовать карту с другими методами массива

С карта () Возвращает массив, вы можете использовать его с другими методами массива, чтобы сделать ваш код гораздо более сжатым и читаемым.

Использование карты с фильтром

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

const nums = [5, 10, 15, 20];
const doublesOverTen = nums.map(num => {
  if (num > 10) {
    return num * 2;
  }
});

console.log(doublesOverTen); // [undefined, undefined, 30, 40]

Вот где Фильтр () метод приходит. Фильтр () Возвращает новый массив отфильтрованных элементов, которые соответствуют определенному условию, которое вы можете тогда церовать карта () к:

const nums = [5, 10, 15, 20];
const doublesOverTen = nums.filter(num => {
  return num > 10;
}).map(num => {
  return num * 2;
});

console.log(doublesOverTen); // [30, 40]

Этот код может быть упрощен еще дальше:

const nums = [5, 10, 15, 20];
const doublesOverTen = nums.filter(num => num > 10).map(num => num * 2);

console.log(doublesOverTen); // [30, 40]

Используя карту с обратным

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

const nums = [1, 2, 3, 4, 5];
const reversedDoubles = nums.reverse().map(num => num * 2);

console.log(nums); // [5, 4, 3, 2, 1]
console.log(reversedDoubles); // [10, 8, 6, 4, 2]

Одно из главных преимуществ карта () Это не изменяет исходный массив, а использование Обратный () Как это поражает цель. Тем не менее, это простое исправление – просто не забудьте использовать карта () Во-первых, то Обратный () Новый массив возвращается:

const nums = [1, 2, 3, 4, 5];
const reversedDoubles = nums.map(num => num * 2).reverse();

console.log(nums); // [1, 2, 3, 4, 5]
console.log(reversedDoubles); // [10, 8, 6, 4, 2]

Используя карту на объекте

В то время как карта () Подразумевается для работы на массивах, только с небольшой дополнительной работой, которую вы также можете итерации через объекты. Object.keys () , Object.values () и Object.entries () все возвращает массив, что означает, что карта () можно легко привязать к каждому методу:

const obj = { 
  a: 1, 
  b: 2, 
  c: 3 
}
const doubles = Object.values(obj).map(num => num * 2);

console.log(doubles); // [2, 4, 6]

Теперь иди и карта () все вещи!