map() и forEach() — это методы массива в JavaScript, и они используются для перебора каждого элемента в массиве. но оба метода имеют разные функции, и в некоторых сценариях они работают по-разному. В этой статье мы собираемся изучить различия между ними. И мы собираемся проанализировать производительность, а также.
Карта()
Метод map() возвращает новый массив с тем же количеством исходных элементов массива. Мы использовали это, потому что мы можем создать новый массив после выполнения функции над существующим массивом.
Это пример map() для умножения массива чисел и возвращает новый массив с тем же количеством элементов массива чисел:
const numbersArray = [1, 2, 3, 4, 5]; const mapMultipyedNumbersArray = numbersArray.map((num) => num * 5); console.log(mapMultipyedNumbersArray); // Output: [ 5, 10, 15, 20, 25 ]
для каждого()
Метод forEach() также является методом массива, но он не возвращает новый массив, как это делает метод map(). Это используется для запуска функции для каждого элемента массива.
Поскольку forEach() не возвращает новый массив, это пример его использования для умножения массива чисел и помещения умноженных элементов в новый массив:
const numbersArray = [1, 2, 3, 4, 5];
const forEachMultipyedNumbersArray = [];
numbersArray.forEach((num) =>
{
forEachMultipyedNumbersArray.push(num * 5);
});
console.log(forEachMultipyedNumbersArray); // Output: [ 5, 10, 15, 20, 25 ]
Различия в производительности
Как указывалось ранее, основное различие между обоими методами массива заключается в том, что map() возвращает новый массив, тогда как для каждого из них этого не происходит. Если нам нужно создать новый массив на основе исходных элементов массива, map() — лучший вариант, а если нам нужно только выполнить действие над каждым элементом исходного массива без создания нового массива, forEach() — лучший вариант. Однако это зависит от требований.
Второе отличие заключается в том, что метод map() создает новый массив той же длины, что и исходный массив, тогда как forEach() этого не делает. Поскольку для этого требуется дополнительное выделение памяти и копирование, метод map() может работать медленнее в обстоятельствах, когда нам не нужен новый результирующий массив.
Для простых итераций обычно считается, что forEach() быстрее, чем map(), поскольку не требует создания нового массива. Потому что он должен выделить и скопировать больше памяти для нового массива. Однако это может измениться в зависимости от конкретного варианта использования и объема обрабатываемых данных.
Тестирование на примере
Давайте рассмотрим пример, в котором мы пытаемся применить функцию к каждому элементу массива чисел, а затем вернуть новый массив результатов. Для этого и оценки эффективности каждой стратегии мы можем использовать методы map() и forEach().
В приведенном ниже примере мы создали массив чисел, а затем использовали map() и forEach(), чтобы умножить массив чисел и вернуть новый массив с результатами, и мы использовали функции console.time() и console.timeEnd() для измерения производительности. методов.
const numbers = [1, 2, 3, 4, 5];
// map()
console.time('map');
const mapMultipyedNumbersArray = numbers.map((num) => num * 5);
console.timeEnd('map');
// forEach()
console.time('forEach');
const forEachMultipyedNumbersArray = [];
numbers.forEach((num) =>
{
forEachMultipyedNumbersArray.push(num * 5);
});
console.timeEnd('forEach');
console.log(mapMultipyedNumbersArray); // Output: [ 5, 10, 15, 20, 25 ]
console.log(forEachMultipyedNumbersArray); // Output: [ 5, 10, 15, 20, 25 ]
После того, как мы запустили приведенный выше пример, мы получили следующий вывод.
map: 0.187ms forEach: 0.055ms [ 5, 10, 15, 20, 25 ] [ 5, 10, 15, 20, 25 ]
Затем мы видим, что forEach() быстрее, чем map(). Но этот результат может варьироваться в зависимости от конкретных вариантов использования и объема обрабатываемых данных. Разница в производительности между map() и forEach() не всегда может быть заметна, это тоже важно учитывать.
Заключение
Однако они имеют разное назначение и тактико-технические характеристики. map() используется для преобразования каждого элемента массива в новый элемент на основе предоставленной вами функции обратного вызова. Он возвращает новый массив с тем же количеством элементов, что и исходный массив, но с преобразованием каждого элемента в соответствии с функцией обратного вызова.
forEach() используется для выполнения функции обратного вызова для каждого элемента массива. Он не возвращает новый массив, а вместо этого выполняет операцию над каждым элементом исходного массива.
Важно отметить, что разница в производительности между map() и forEach() обычно невелика, и выбор между ними должен основываться на конкретном сценарии использования и объеме обрабатываемых данных.
