Функция map()
— это встроенная функция JavaScript, которая позволяет применять функцию к каждому элементу массива и возвращать новый массив с измененными элементами. Вот пример того, как его использовать:
const numbers = [1, 2, 3, 4, 5]; // Double each element in the array const doubled = numbers.map(number => number * 2); console.log(doubled); // Output: [2, 4, 6, 8, 10]
В этом примере функция map()
применяет функцию number => number * 2
к каждому элементу массива numbers
, умножая каждое число на 2. Затем функция map()
возвращает новый массив с именем doubled
, содержащий измененные элементы.
Если вы не используете функцию
map()
, вам нужно будет перебрать элементы в массиве и применить нужную функцию к каждому элементу вручную, например:
const numbers = [1, 2, 3, 4, 5]; const doubled = []; for (let i = 0; i < numbers.length; i++) { doubled.push(numbers[i] * 2); } console.log(doubled); // Output: [2, 4, 6, 8, 10]
Такой подход будет работать, но он более многословен и менее эффективен, чем использование функции map()
. Функция map()
оптимизирована для этого типа операций и может быть более удобочитаемой, особенно для более длинных или сложных массивов.
Представьте, что у вас есть комплект одежды, который вы хотите изменить, чтобы он лучше подходил вам. Вы можете просмотреть каждый предмет одежды один за другим и внести необходимые изменения вручную, но это займет очень много времени. Вместо этого вы можете использовать функцию
map()
для «отображения» изменений на одежду, автоматизируя процесс и экономя ваше время.
Если вы не используете функцию map()
, вам нужно будет перебрать элементы в массиве и применить нужную функцию к каждому элементу вручную, например:
const clothes = ['shirt', 'pants', 'dress', 'skirt']; const altered = []; for (let i = 0; i < clothes.length; i++) { altered.push(clothes[i] + ' tight'); } console.log(altered); // Output: ['shirt tight', 'pants tight', 'dress tight', 'skirt tight']
Вот тот же пример с использованием функции map()
:
const clothes = ['shirt', 'pants', 'dress', 'skirt']; const altered = clothes.map(clothing => clothing + ' tight'); console.log(altered); // Output: ['shirt tight', 'pants tight', 'dress tight', 'skirt tight']
Вот несколько важных вещей, которые нужно знать о функции map()
в JavaScript:
- Функция
map()
создает новый массив с измененными элементами вместо изменения исходного массива. Это означает, что исходный массив остается неизменным. - Функция
map()
вызывает предоставленную функцию один раз для каждого элемента в массиве в порядке появления элементов. Функция принимает три аргумента: текущий элемент, текущий индекс и исходный массив. - Функция
map()
всегда возвращает новый массив, даже если элементы не изменились. - Функция
map()
часто используется в сочетании со стрелочными функциями, что является более коротким способом написания функций.
Вот пример того, как вы можете использовать функцию map()
на веб-странице с HTML, CSS и JavaScript:
<html> <head> <style> .list-item { color: blue; } </style> </head> <body> <ul id="numbers"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> const listItems = document.querySelectorAll('#numbers li'); // Double the value of each list item and add the "list-item" class const modifiedListItems = listItems.map(item => { item.innerHTML = item.innerHTML * 2; item.classList.add('list-item'); return item; }); </script> </body> </html>
В этом примере функция map()
используется для удвоения значения каждого элемента списка и добавления к нему класса «элемент списка». Затем измененные элементы списка возвращаются в виде массива.
Результирующий HTML будет выглядеть так:
<ul id="numbers"> <li class="list-item">2</li> <li class="list-item">4</li> <li class="list-item">6</li> <li class="list-item">8</li> <li class="list-item">10</li> </ul>