Javascript map array примеры

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.

Источник

Array.prototype.map()

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

Синтаксис

const new_array = arr.map(function callback( currentValue[, index[, array]]) < // Возвращает элемент для new_array >[, thisArg])

Параметры

Функция, вызываемая для каждого элемента массива arr . Каждый раз, когда callback выполняется, возвращаемое значение добавляется в new_array .

Функция callback , создающая элемент в новом массиве, принимает три аргумента:

Текущий обрабатываемый элемент массива.

Индекс текущего обрабатываемого элемента в массиве.

Массив, по которому осуществляется проход.

Необязательный параметр. Значение, используемое в качестве this при вызове функции callback

Возвращаемое значение

Новый массив, где каждый элемент является результатом callback функции.

Описание

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

Функция callback вызывается с тремя аргументами: значением элемента, индексом элемента и массивом, по которому осуществляется проход.

Если в метод map был передан параметр thisArg , при вызове callback он будет использоваться в качестве значения this . В противном случае в качестве значения this будет использоваться значение undefined . В конечном итоге, значение this , наблюдаемое из функции callback , определяется согласно обычным правилам определения this , видимого из функции.

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

Диапазон элементов, обрабатываемых методом map , устанавливается до первого вызова функции callback . Элементы, добавленные в массив после начала выполнения метода map , не будут посещены функцией callback . Если существующие элементы массива изменяются функцией callback , их значения, переданные в функцию, будут значениями на тот момент времени, когда метод map посетит их; удалённые элементы посещены не будут.

Примеры

Пример: отображение массива чисел на массив квадратных корней

Следующий код берёт массив чисел и создаёт новый массив, содержащий квадратные корни чисел из первого массива.

const numbers = [1, 4, 9]; const roots = numbers.map(Math.sqrt); // теперь roots равен [1, 2, 3], а numbers всё ещё равен [1, 4, 9] 

Пример: отображение массива чисел с использованием функции, содержащей аргумент

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

const numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); // теперь doubles равен [2, 8, 18], а numbers всё ещё равен [1, 4, 9] 

Пример: обобщённое использование map

Этот пример показывает, как использовать map на объекте строки String для получения массива байт в кодировке ASCII, представляющего значения символов:

const map = Array.prototype.map; const charCodes = map.call('Hello World', (x) => x.charCodeAt(0)); // теперь charCodes равен [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] 

Пример: обобщённое использование map вместе с querySelectorAll

Этот пример показывает, как пройтись по коллекции объектов, собранных с помощью querySelectorAll . В данном случае мы получаем все выбранные опции на экране и печатаем их в консоль:

const elems = document.querySelectorAll('select option:checked'); const values = Array.prototype.map.call(elems, ( value >) => value); 

Более простым способом будет использование метода Array.from() .

Пример: использование map для переворачивания строки

const string = '12345'; const reversed = Array.prototype.map.call(string, (x) => x).reverse().join(''); // reversed равен '54321' // Бонус: используйте '===' для проверки того, является ли строка палиндромом 

Более простым способом будет использование метода String.split() (см. пример обращение строки при помощи метода split()).

Пример: хитрый вариант использования

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

// Рассмотрим пример: ['1', '2', '3'].map(parseInt); // Хотя ожидаемый результат вызова равен [1, 2, 3], // в действительности получаем [1, NaN, NaN] // Функция parseInt часто используется с одним аргументом, но она принимает два. // Первый аргумент является выражением, а второй - основанием системы счисления. // В функцию callback Array.prototype.map передаёт 3 аргумента: // элемент, его индекс и сам массив. // Третий аргумент игнорируется parseInt, но не второй, следовательно, // возможна путаница. Смотрите запись в блоге для дополнительной информации. const returnInt = (element) => parseInt(element, 10); ['1', '2', '3'].map(returnInt); // Результатом является массив чисел (как и ожидалось) // Простейший способ добиться вышеозначенного поведения и избежать чувства "чё за!?": ['1', '2', '3'].map(Number); // [1, 2, 3] 

Спецификации

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Источник

map() js — перебор и возвращение массива

Данный метод, в отличии от ранее рассмотренного метода forEach(), вернет нам новый массив, при этом исходный массив не изменяется.

Синтаксис данного метода аналогичен методу forEach

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

• currentValue — значение текущего элемента массива
• index — порядковый номер элемента (начиная с 0)
• currentArray — массив, который мы перебираем

thisArg — это необязательный параметр. Значение, используемое в качестве this при вызове функции callback .

Давайте рассмотрим простой пример:

const arr = [1, 2, 3]; const newArr = arr.map((item, index) => < // увеличиваем значение каждого элемента на 1 // item - текущий элемент массива return item + 1; >); console.log(newArr); // [2, 3, 4] console.log(arr); // [1, 2, 3]

В качестве callback можно передать ранее созданную функцию:

const arr = [1, 2, 3]; function doThisForEachElement(item, index) < return item + 1; >const newArr = arr.map(doThisForEachElement); console.log(newArr); // [2, 3, 4]

Примеры использования метода map()

Теперь давайте рассмотрим еще несколько примеров.

Пример 1
Что будет если мы попробуем вернуть из колбека элементы по условию? Допустим из предыдущего примера, мы хотим вернуть только числа меньше или равные единице:

const arr = [1, 2, 3]; const newArr = arr.map(item => < if (item ); console.log(newArr); // [1, undefined, undefined]

В таком случае мы получим undefined для значений, которые не прошли условие. Если вам нужно вернуть не все значения в новый массив, а только те что удовлетворяют условию — тогда используйте метод filter()

Пример 2
Продолжим с массивами чисел. Допустим, нам нужно вернуть в новый массив числа возведенные в определенную степень. Как делать возведение в степень в JavaScript рассматривали в другом посте.

const arr = [2, 4, 5, 7]; const newArr = arr.map(item => < // возведем каждый элемент в третью степень return item ** 3; >); console.log(newArr); // [8, 64, 125, 343]

Также можно сделать упрощенный вариант записи, потому что мы сразу возвращаем измененное значение:

const newArr = arr.map(item => item ** 3);

Пример 3
Метод JS map() используется в React для рендеринга элементов. Вот как пример можете посмотреть код тут

У нас есть массив todos и на каждой итерации мы отрисовываем элемент li

Использование метода map() с объектами

Также мы можем использовать метод map() с массивом объектов и с самими объектами.

Пример 4
Допустим у нас есть массив пользователей и нам нужно провести определенные действия с каждым из пользователей — добавим свойство role :

const users = [ < id: 1, name: 'John', salary: 3000, position: 'developer' >, < id: 2, name: 'Kate', salary: 2800, position: 'designer' >, < id: 3, name: 'Bob', salary: 3200, position: 'manager' >]; const newArray = users.map(item => < item.role = 'admin'; return item; >); // Будет возвращен новый массив со свойством 'role' // для каждого пользователя console.log(newArray); //

В данном случае, если вы выведете в консоль массив users, то заметите что там тоже добавилось свойство role

Если нужно сохранить исходный массив неизменным, тогда нужно создать новый объект для этого и с помощью оператора spread скопировать свойства старого и добавить в него новые свойства:

const newArray = users.map(item => < return < . item, role: 'admin' >>); // Останется неизменным console.log(users); // Новый массив со свойством 'role' console.log(newArray);

Также можно задать условие и добавить разные свойства в зависимости от position :

const users = [ < id: 1, name: 'John', salary: 3000, position: 'developer' >, < id: 2, name: 'Kate', salary: 2800, position: 'designer' >, < id: 3, name: 'Bob', salary: 3200, position: 'manager' >]; const newArray = users.map(item => < if (item.position === 'manager') < return < . item, role: 'admin' >> return < . item, role: 'user' >>); // Role = admin будет добавлено только 3 пользователю // У остальных role будет = user console.log(newArray);

Или вот такая короткая запись с помощью тернарного оператора:

const newArray = users.map(item => item.position === 'manager' ? < . item, role: 'admin' >: < . item, role: 'user' >);

Своя реализация метода map

let array = [1, 5, 10, 15]; Array.prototype.customMap = function (callback, thisArg) < // Проверяем существует ли контекст вызова this (по умолчанию это сам массив) if (this == null) < throw new Error("It has to be array"); >let context = this; let obj = Object(this); // Проверям кол-во переданных аргументов // Если больше 1, значит был передан thisArg if (arguments.length > 1) < context = thisArg; >// Если callback это не функция, тогда выдаем оишбку if (typeof callback !== "function") < throw new Error("Callback has to be a function"); >// Длинаа переданного масива let len = obj.length; let newArray = []; let i = 0; // Для каждого элемента массива вызываем callback // И затем добавляем в массив, который в результат вернем while (i < len) < if (i in obj) < newArray[i] = callback.call(context, this[i], i, obj); >i++; > return newArray; >; // Теперь используем свой полифил const newArray = array.customMap(number => number + 1); console.log(newArray); // [2, 6, 11, 16]

Когда не следует использовать метод map()

Данный метод не следует использовать в таких случаях:

1. Если вам нужен просто проход по массиву и вы не будете использовать возвращенный из данного метода массив. В таком случае лучше использовать forEach()
2. Также когда функция (callback), которую вы передаете в качестве аргумента, не будет делать return

let array = [1, 5, 10, 15]; const newArray = array.map((item) => < item * 2; // не возвращается результат >); console.log(newArray); // [undefined, undefined, undefined, undefined]

Ваши вопросы и комментарии:

Свежие записи

Копирование материалов разрешено только с ссылкой на источник Web-Dev.guru
2023 © Все права защищены.

Источник