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() може бути корисним для зміни або трансформації елементів масиву. Ви можете використовувати його, наприклад, для перетворення кожного елемента числового масиву на його квадрати або для створення нового масиву з вибраних властивостей об'єктів.

автор: Bond правити

Порада

Не забувайте, що оскільки map() завжди створює новий масив, його використання без обробки результату може бути неефективним. У таких випадках краще використовувати forEach або for...of.

автор: Bond правити

Порада

Модифікація масиву під час його обробки може призвести до непередбачуваних результатів і ускладнити розуміння коду. Тому рекомендується уникати такої практики.

автор: Bond правити

Нотатка

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

автор: Bond правити

Нотатка

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

автор: Bond правити

Нотатка

Метод map() вимагає, щоб значення this мало властивість length і цілочисельні ключі.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

map(callbackFn)
map(callbackFn, thisArg)

Параметри

callbackFn

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

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

• element: поточний елемент, який обробляється у масиві;

• index: індекс поточного елемента, який обробляється у масиві;

• array: масив, на якому було викликано метод find().

автор: Bond

правити

thisArg

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

автор: Bond

правити

Повернення

array

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

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

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

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

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 }
// ]

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

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

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, 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]