Функция 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:

  1. Функция map() создает новый массив с измененными элементами вместо изменения исходного массива. Это означает, что исходный массив остается неизменным.
  2. Функция map() вызывает предоставленную функцию один раз для каждого элемента в массиве в порядке появления элементов. Функция принимает три аргумента: текущий элемент, текущий индекс и исходный массив.
  3. Функция map() всегда возвращает новый массив, даже если элементы не изменились.
  4. Функция 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>