Javascript array map example

JavaScript Array map()

Return a new array with the square root of all element values:

Multiply all the values in an array with 10:

const numbers = [65, 44, 12, 4];
const newArr = numbers.map(myFunction)

function myFunction(num) return num * 10;
>

Description

map() creates a new array from calling a function for every array element.

map() does not execute the function for empty elements.

map() does not change the original array.

See Also:

Syntax

Parameters

Parameter	Description
function()	Required. A function to be run for each array element.
currentValue	Required. The value of the current element.
index	Optional. The index of the current element.
arr	Optional. The array of the current element.
thisValue	Optional. Default value undefined . A value passed to the function to be used as its this value.

Return Value

More Examples

Get the full name for each person:

function getFullName(item) return [item.firstname,item.lastname].join(» «);
>

Related Pages:

Browser Support

map() is an ECMAScript5 (ES5) feature.

ES5 (JavaScript 2009) fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Javascript array map example

Собирает новый массив из запчастей старого.

Время чтения: меньше 5 мин

Обновлено 20 февраля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

Создадим массив квадратов:

 const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9] const squares = nums.map(function (num)  return num * num>) console.log(squares)// [1, 4, 9, 16, 25, 36, 49, 64, 81] const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9] const squares = nums.map(function (num)  return num * num >) console.log(squares) // [1, 4, 9, 16, 25, 36, 49, 64, 81]    Скопировать Скопировано Не удалось скопировать   

Либо можно сделать массив с объектами:

 const objects = nums.map(function (num)  return  field: num, >>) console.log(objects)// [// < field: 1 >,// < field: 2 >,// . // // ] const objects = nums.map(function (num)  return  field: num, > >) console.log(objects) // [ // < field: 1 >, // < field: 2 >, // . // // ]    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

Функция, которую мы передаём в метод map ( ) , может принимать три параметра:

• item — элемент массива в текущей итерации;
• index — индекс текущего элемента;
• arr — сам массив, который мы перебираем.

Суммируем числа, индексы и длины массива:

 const nums = [0, 1, 2, 3] const transformed = nums.map(function (num, index, arr)  return num + index + arr.length>) console.log(transformed)// [4, 6, 8, 10] const nums = [0, 1, 2, 3] const transformed = nums.map(function (num, index, arr)  return num + index + arr.length >) console.log(transformed) // [4, 6, 8, 10]    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Часто возникают ситуации, когда на основе одного массива нужно создать другой массив, как-нибудь трансформировав исходные значения. Это можно сделать, используя обычные циклы for или while :

 const nums = [1, 2, 3, 4, 5] const transformed = [] for (let i = 0; i < nums.length; i++)  const num = nums[i] const item = `$-$` transformed.push(item)> console.log(transformed)// ['0-1', '1-2', '2-3', '3-4', '4-5'] const nums = [1, 2, 3, 4, 5] const transformed = [] for (let i = 0; i  nums.length; i++)  const num = nums[i] const item = `$i>-$num>` transformed.push(item) > console.log(transformed) // ['0-1', '1-2', '2-3', '3-4', '4-5']    Скопировать Скопировано Не удалось скопировать   

Задача решена, однако, как и другие встроенные методы массива, map ( ) позволяет написать код короче и проще для понимания:

 const nums = [1, 2, 3, 4, 5] const transformed = nums.map(function (num, i)  return `$-$`>)console.log(transformed)// ['0-1', '1-2', '2-3', '3-4', '4-5'] const nums = [1, 2, 3, 4, 5] const transformed = nums.map(function (num, i)  return `$i>-$num>` >) console.log(transformed) // ['0-1', '1-2', '2-3', '3-4', '4-5']    Скопировать Скопировано Не удалось скопировать   

Результат тот же, но способ короче и проще.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 map ( ) возвращает новый массив, при этом исходный массив никак не изменится.

💡 При работе с map ( ) необходимо возвращать значение из функции-колбэка. Если не вернуть значение — например, забыв обработать какую-то ветку условия, то в итоговом массиве будет undefined :

 const nums = [1, 2, 3, 4, 5] const transformed = nums.map(function (num)  if (num <= 3)  return "less" > // Забыли обработать эту ветку условия>)console.log(transformed)// ['less', 'less', 'less', undefined, undefined] const nums = [1, 2, 3, 4, 5] const transformed = nums.map(function (num)  if (num  3)  return "less" > // Забыли обработать эту ветку условия >) console.log(transformed) // ['less', 'less', 'less', undefined, undefined]    Скопировать Скопировано Не удалось скопировать   

💡 Размер массива, которые возвращает map ( ) всегда совпадает с размером массива, который обходится.

Передача контекста в колбэк-функцию

Скопировать ссылку «Передача контекста в колбэк-функцию» Скопировано

Вторым аргументом map ( ) может принимать значение, которое будет передано как контекст выполнения функции-колбэка:

 const nums = [1, 2, 3] const otherData = const transformed = nums.map(function (num)  // this теперь ссылается на объект otherData return num + this.delta>, otherData) console.log(transformed)// [ 6, 7, 8 ] const nums = [1, 2, 3] const otherData =  delta: 5 > const transformed = nums.map(function (num)  // this теперь ссылается на объект otherData return num + this.delta >, otherData) console.log(transformed) // [ 6, 7, 8 ]    Скопировать Скопировано Не удалось скопировать   

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

 const nums = [1, 2, 3] const otherData = const transformed = nums.map((num) =>  // this.delta в данном случае равен undefined return num + this.delta>, otherData) console.log(transformed)// [ NaN, NaN, NaN ] const nums = [1, 2, 3] const otherData =  delta: 5 > const transformed = nums.map((num) =>  // this.delta в данном случае равен undefined return num + this.delta >, otherData) console.log(transformed) // [ NaN, NaN, NaN ]    Скопировать Скопировано Не удалось скопировать   

Подробнее о контексте выполнения функций можно почитать в статье «this: контекст выполнения функций».

На практике

Скопировать ссылку «На практике» Скопировано

Егор Огарков советует

Скопировать ссылку «Егор Огарков советует» Скопировано

🛠 При работе с React или другой похожей на неё библиотекой map ( ) — это самый распространённый способ трансформировать массив данных в компоненты, которые в итоге будут на странице:

 function SomeComponent()  const items = ['This', 'is', 'map!'] return (    )>  )> function SomeComponent()  const items = ['This', 'is', 'map!'] return ( div> items.map(item => span>item>/span>)> /div> ) >    Скопировать Скопировано Не удалось скопировать   

🛠 Так как map ( ) возвращает массив, то у полученного массива мы можем продолжать по цепочке вызывать другие методы массива, в том числе, новый map ( ) , продолжая трансформацию новых данных:

 const nums = [1, 2, 3, 4, 5] const result = nums.map(. ).filter(. ).map(. ) const nums = [1, 2, 3, 4, 5] const result = nums.map(. ).filter(. ).map(. )    Скопировать Скопировано Не удалось скопировать   

На собеседовании

Скопировать ссылку «На собеседовании» Скопировано

Объясните разницу между методами for Each ( ) и map ( ) .

Скопировать ссылку «Объясните разницу между методами forEach() и map().» Скопировано

Скопировать ссылку «Александр Рассудихин отвечает» Скопировано

Методы for Each ( ) и map ( ) определены на нескольких структурах данных. Мы рассмотрим чем отличаются эти методы для массивов.

Оба метода принимают колбэк, который вызывается для каждого элемента. Разница в том, что метод for Each ( ) ничего не возвращает, а метод map ( ) возвращает новый массив с результатами вызова колбэка на каждом исходном элементе. Если переданный колбэк ничего не возвращает в новом массиве появится undefined

Вы можете вернуть значение и из колбэка для for Each ( ) но оно никак не будет использоваться дальше.

 [1,2,3].forEach(a => a + 3); [1,2,3].forEach(a => a + 3);    Скопировать Скопировано Не удалось скопировать   

Используя map ( ) вы можете создавать цепочки вызовов. Если же вы будете использовать for Each ( ) так сделать не получится.

 const myArray = [4, 2, 8, 7, 3, 1, 0];const myArray2 = myArray.map(item => item * 2).sort((a, b) => a - b); console.log(myArray); // [4, 2, 8, 7, 3, 1, 0]console.log(myArray2); // [0, 2, 4, 6, 8, 14, 16] const myArray = [4, 2, 8, 7, 3, 1, 0]; const myArray2 = myArray.map(item => item * 2).sort((a, b) => a - b); console.log(myArray); // [4, 2, 8, 7, 3, 1, 0] console.log(myArray2); // [0, 2, 4, 6, 8, 14, 16]    Скопировать Скопировано Не удалось скопировать   

В примере выше изменился только my Array2 .

Для закрепления, реализуем ту же самую логику при помощи for Each ( ) .

 const myArray = [4, 2, 8, 7, 3, 1, 0];let myArray2 = []; myArray.forEach(item =>  myArray2.push(item * 2);>); myArray2 = myArray2.sort((a, b) => a - b); console.log(myArray); // [4, 2, 8, 7, 3, 1, 0]console.log(myArray2); // [0, 2, 4, 6, 8, 14, 16] const myArray = [4, 2, 8, 7, 3, 1, 0]; let myArray2 = []; myArray.forEach(item =>  myArray2.push(item * 2); >); myArray2 = myArray2.sort((a, b) => a - b); console.log(myArray); // [4, 2, 8, 7, 3, 1, 0] console.log(myArray2); // [0, 2, 4, 6, 8, 14, 16]    Скопировать Скопировано Не удалось скопировать   

Источник