Карта JavaScript - как использовать JS .map () Функция (метод массива)

Автор оригинала: Nathan Sebhastian.

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

Вместо того, чтобы вручную итерацию по массиву, используя петлю, вы можете просто использовать встроенный Array.map () метод.

Array.map () Метод позволяет использовать массив и изменять свои элементы с использованием функции обратного вызова. Функция обратного вызова будет затем выполнена на каждом из элементов массива.

Например, предположим, что у вас есть следующий элемент массива:

let arr = [3, 4, 5, 6];

Теперь представьте, что вы должны умножить каждый из элементов массива по 3 Отказ Вы можете рассмотреть возможность использования для цикл следующим образом:

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]

Но вы действительно можете использовать Array.map () метод достижения того же результата. Вот пример:

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

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

Как использовать карту () над массивом объектов

Например, у вас может быть массив объектов, которые хранятся в магазинах имя и фамилия Значения ваших друзей следующим образом:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

Вы можете использовать карта () Метод повторяется за массивом и присоединиться к значениям имя и фамилия следующее:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]

карта () Способ проходит больше, чем просто элемент. Давайте посмотрим, как все аргументы прошли карта () к функции обратного вызова.

Полная карта () Способ синтаксиса

Синтаксис для карта () Метод выглядит следующим образом:

arr.map(function(element, index, array){  }, this);

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

это Аргумент будет использоваться внутри функции обратного вызова. По умолчанию его значение – неопределенный . Например, вот как изменить это Значение номера 80 :

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
	console.log(this) // 80
}, 80);

Вы также можете проверить другие аргументы, используя console.log () если тебе интересно:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    return element;
}, 80);

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

Спасибо за чтение этого учебника

Вы также можете быть заинтересованы в других учебных пособиях JavaScript, в том числе Как суммировать массив объектов и Методы, чтобы найти палиндромную строку Отказ Это некоторые из наиболее распространенных проблем с JavaScript для решения.

У меня также есть Бесплатная рассылка О программах веб-разработчиков (в основном связано с JavaScript).

Оригинал: “https://www.freecodecamp.org/news/javascript-map-how-to-use-the-js-map-function-array-method/”

Как использовать карту () над массивом объектов

Полная карта () Способ синтаксиса

Спасибо за чтение этого учебника

Читайте ещё по теме: