JS метод Array.map()

Опис

Метод map() надає можливість створити новий масив на основі елементів існуючого, застосовуючи до кожного елемента певну функцію. Він приймає функцію callbackFn як параметр і обробляє кожний елемент масиву, в результаті формуючи новий масив. Функція callbackFn запускається тільки для тих індексів масиву, які мають значення, тому вона ігнорує порожні місця в розріджених масивах.

Є кілька важливих моментів щодо роботи методу map():

Функція callbackFn не враховує елементи, що були додані після початку роботи map() і які виходять за межі первісного розміру масиву.
Зміни, які вносяться в елементи після того, як для них вже була викликана callbackFn, не викликають її знову.
Якщо елемент масиву ще не був оброблений, але був змінений, значення, передане до callbackFn, відображатиме стан елемента на момент обробки. Видалені елементи функцією не обробляються.

Приклад:

let numbers = [1, 2, 3, 4];
let squaredNumbers = numbers.map(num => num * num);

console.log(squaredNumbers); // [1, 4, 9, 16]

У цьому прикладі ми маємо масив чисел numbers. Ми використовуємо метод map(), щоб піднести кожне число до квадрату і отримати новий масив squaredNumbers. Результатом є масив [1, 4, 9, 16].

Нотатка:	При використанні методу `map()` створюється новий масив, який має таку саму довжину, що й вхідний масив. Кожен елемент нового масиву визначається результатом виклику функції, яку ви передаєте методу `map()`. Важливо пам'ятати, що метод `map()` не змінює початковий масив, а повертає новий масив.
Нотатка:	Функція, яку ви передаєте методу `map()`, приймає три аргументи: поточний елемент масиву, індекс поточного елемента та сам масив, які обробляються. Ви можете використовувати ці аргументи для створення більш гнучких та потужних функцій обробки елементів масиву.
Порада:	Метод `map()` може бути корисним для зміни або трансформації елементів масиву. Ви можете використовувати його, наприклад, для перетворення кожного елемента числового масиву на його квадрати або для створення нового масиву з вибраних властивостей об'єктів.
Нотатка:	Метод `map()` вимагає, щоб значення `this` мало властивість `length` і цілочисельні ключі.
Порада:	Не забувайте, що оскільки `map()` завжди створює новий масив, його використання без обробки результату може бути неефективним. У таких випадках краще використовувати `forEach` або `for...of`.
Порада:	Модифікація масиву під час його обробки може призвести до непередбачуваних результатів і ускладнити розуміння коду. Тому рекомендується уникати такої практики.

Синтаксис

map(callbackFn)
map(callbackFn, thisArg)

Параметри

*callbackFn

Функція, яку слід викликати для кожного елемента масиву. Результат її роботи стає новим елементом у сформованому масиві.

Функція callbackFn викликається з наступними аргументами:

element: поточний елемент, який обробляється у масиві;
index: індекс поточного елемента, який обробляється у масиві;
array: масив, на якому було викликано метод find().

thisArg

Значення, яке використовується як this під час виконання callbackFn-функції.

Return

array: Новий масив, в якому кожен елемент є результатом виконання callbackFn-функції.

Переглядачі

Переглядач
	1	1.5	3	9.5	12

Переглядач
	37	18	4	1

Переглядач
	0.10.0	1.0

Приклади

Даний приклад використовує метод map() для масиву array1. Кожен елемент масиву помножується на 2 за допомогою переданої функції, і результати перетворення зберігаються у новому масиві map1. Результат виводиться на сторінці.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/abQLzNR">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

Аргумент автоматично присвоюється з кожного елемента масиву під час проходження map через вихідний масив.

const numbers = [1, 4, 9];
const doubles = numbers.map((num) => num * 2);

console.log(doubles); // [2, 8, 18]
console.log(numbers); // [1, 4, 9]

Виклик методу map() на об'єктах, що не є масивами.

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 5, // ігнорується методом map(), оскільки length дорівнює 3
};
console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2));
// [ 4, 9, 16 ]

Код у прикладі бере масив чисел і створює новий масив, який містить квадратні корені чисел з першого масиву.

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots тепер містить [1, 2, 3]
// numbers все ще [1, 4, 9]

Використання методу map для перетворення об'єктів у масиві.

const kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
  { key: 3, value: 30 },
];

const reformattedArray = kvArray.map(({ key, value }) => ({ [key]: value }));

console.log(reformattedArray); // [{ 1: 10 }, { 2: 20 }, { 3: 30 }]
console.log(kvArray);
// [
//   { key: 1, value: 10 },
//   { key: 2, value: 20 },
//   { key: 3, value: 30 }
// ]

У цьому прикладі, ми перевіряємо, чи індекс (index) менше 3. Якщо це вірно для перших трьох елементів (індекси 0, 1, 2), то повертається саме число num. Однак, для останнього елемента масиву, який має індекс 3, умова не виконується і нічого не повертається з функції.

В результаті, ми отримуємо новий масив, де перші три числа (1, 2, 3) відфільтровані та зберігаються, але останній елемент масиву має значення undefined. Початковий масив numbers залишається незмінним. Така поведінка обумовлене тим, що якщо функція передана методу map() не повертає жодного значення або повертає undefined, то відповідний елемент в результаті буде мати значення undefined.

const numbers = [1, 2, 3, 4];
const filteredNumbers = numbers.map((num, index) => {
  if (index < 3) {
    return num;
  }
});

// індекс починається з 0, тому filteredNumbers складається з 1, 2, 3 та undefined.
// filteredNumbers має значення [1, 2, 3, undefined]
// numbers все ще [1, 2, 3, 4]

Цей приклад показує, як проходитись через колекцію об'єктів (NodeList), зібрану за допомогою querySelectorAll.

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

JS довідник

JavaScript

Наповнення JS розділу