Array.map() в JavaScript — новий масив із перетворених елементів

Опис

Метод 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 numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

console.log(roots); // → [1, 2, 3]
console.log(numbers); // → [1, 4, 9], початковий масив не змінився

<header>
  <h2 class="title">Метод map() для масиву</h2>
  <p class="description">Цей метод застосовує задану функцію до кожного елемента масиву та повертає новий масив, який містить результати перетворення.</p>
</header>
<main>
  <div>
    <h3>Результати:</h3>
    <p>Початковий масив: <code>[1, 4, 9, 16]</code></p>
    <p>Перетворений масив: <span id="result"></span></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

code {
  color: #ff0000;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

main div {
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

main div h3 {
  margin-top: 0;
}

main div p {
  margin: 10px 0;
}

main div p span {
  font-weight: bold;
}

const array1 = [1, 4, 9, 16];

const map1 = array1.map(x => x * 2);

document.getElementById('result').innerText = map1;
//# sourceURL=pen.js

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

// індекс починається з 0, тому для останнього елемента функція нічого не повертає
console.log(filteredNumbers[0], filteredNumbers[1], filteredNumbers[2], filteredNumbers[3]);
// → 1 2 3 undefined
console.log(filteredNumbers.length); // → 4, довжина та сама, що й у numbers
console.log(numbers); // → [1, 2, 3, 4], початковий масив не змінився

<p>Оберіть кілька кольорів (Ctrl або ⌘ + клац):</p>
<select id="colors" multiple size="3">
  <option value="red" selected>червоний</option>
  <option value="green">зелений</option>
  <option value="blue" selected>синій</option>
</select>
<p id="out"></p>

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

console.log(values); // → ["red", "blue"]
document.getElementById("out").textContent = "values = " + values.join(", ");

const nums = ['1', '2', '3'];

console.log('map(parseInt):', nums.map(parseInt));          // [1, NaN, NaN]
console.log('parseInt(x, 10):', nums.map(x => parseInt(x, 10)));  // [1, 2, 3]
console.log('map(Number):', nums.map(Number));              // [1, 2, 3]

// фігурні дужки без return
console.log('без return:', [1, 2, 3].map(x => { x * 2; }));  // [undefined, undefined, undefined]
console.log('з return:', [1, 2, 3].map(x => x * 2));         // [2, 4, 6]

// map не фільтрує: довжина завжди та сама
console.log('map:', [1, 2, 3].map(x => (x > 1 ? x : undefined)));  // [undefined, 2, 3]
console.log('filter:', [1, 2, 3].filter(x => x > 1));              // [2, 3]

// async-колбек дає проміси
const promises = [1, 2].map(async x => x * 10);
console.log('async map:', promises[0] instanceof Promise);   // true
Promise.all(promises).then(r => console.log('після Promise.all:', r));  // [10, 20]

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 ]