Что быстрее в карте JavaScript по сравнению с forEach?
И map(), и forEach() являются методами массива в JavaScript, которые используются для перебора каждого элемента в массиве. Однако они имеют разные функциональные возможности и поэтому работают по-разному в определенных сценариях. В этой статье мы рассмотрим различия между map() и forEach() и то, как они влияют на производительность.
Метод map()
Метод map() используется для создания нового массива путем выполнения функции над каждым элементом существующего массива. Он возвращает новый массив с тем же количеством элементов, что и исходный массив, где каждый элемент является результатом применения функции к соответствующему элементу исходного массива.
Вот пример использования map() для удвоения каждого числа в массиве:
const originalArray = [1, 2, 3, 4, 5]; const doubledArray = originalArray.map((num) => num * 2); console.log(doubledArray); // Output: [2, 4, 6, 8, 10]
В приведенном выше примере мы передаем стрелочную функцию методу map(), который принимает каждый элемент originalArray, умножает его на 2 и возвращает результат. Затем map() создает новый массив с результатами и присваивает его переменной doubledArray.
Метод forEach()
Метод forEach() используется для выполнения функции над каждым элементом массива. Он не создает новый массив, как это делает map(), а вместо этого выполняет действие над каждым элементом существующего массива.
Вот пример использования forEach() для регистрации каждого элемента в массиве:
const originalArray = ['apple', 'banana', 'orange']; originalArray.forEach((item) => console.log(item)); // Output: "apple", "banana", "orange"
В приведенном выше примере мы передаем стрелочную функцию методу forEach(), который выводит каждый элемент originalArray на консоль.
Различия в производительности
Хотя и map(), и forEach() выполняют схожие действия, в их производительности есть некоторые ключевые различия.
Одно существенное отличие состоит в том, что map() возвращает новый массив, а forEach() — нет. Это означает, что если вам нужно создать новый массив на основе значений существующего массива, map() будет лучшим выбором. С другой стороны, если вам нужно выполнить действие только над каждым элементом массива и не нужно создавать новый массив, forEach() может быть лучшим выбором.
Еще одно отличие состоит в том, что map() создает новый массив той же длины, что и исходный массив, тогда как forEach() не изменяет длину исходного массива. Это означает, что map() может работать медленнее в тех случаях, когда результирующий массив не нужен, так как требует дополнительного выделения памяти и копирования.
С точки зрения скорости принято считать, что forEach() быстрее, чем map() для простых итераций, так как forEach() не нужно создавать новый массив. Однако это может варьироваться в зависимости от конкретного варианта использования и объема обрабатываемых данных.
Пример
Давайте рассмотрим пример, когда у нас есть массив чисел, и мы хотим применить функцию к каждому элементу и вернуть новый массив с результатами. Для этого мы будем использовать map() и forEach() и измерять производительность каждого метода.
const numbers = [1, 2, 3, 4, 5];
// Using map()
console.time('map');
const doubledNumbersMap = numbers.map((num) => num * 2);
console.timeEnd('map');
// Using forEach()
console.time('forEach');
const doubledNumbersForEach = [];
numbers.forEach((num)
{
doubledNumbersForEach.push(num * 2);
});
console.timeEnd('forEach');
console.log(doubledNumbersMap); // Output: [2, 4, 6, 8, 10]
console.log(doubledNumbersForEach); // Output: [2, 4, 6, 8,
В приведенном выше примере мы создаем массив чисел, а затем используем `map()` и `forEach()`, чтобы удвоить каждое число и вернуть новый массив с результатами. Мы используем `console.time()` и `console.timeEnd()` для измерения производительности каждого метода.
Когда мы запускаем этот код, мы получаем следующий вывод:
map: 0.012939453125ms forEach: 0.007080078125ms
В этом случае мы видим, что forEach() работает быстрее, чем map(). Однако важно отметить, что этот результат может варьироваться в зависимости от конкретного варианта использования и объема обрабатываемых данных. Также стоит отметить, что разница в производительности между `map()` и `forEach()` в большинстве случаев может быть незначительной.
*Заключение**
В заключение, `map()` и `forEach()` оба являются полезными методами массива в JavaScript, которые выполняют аналогичные действия, но имеют разные функциональные возможности. `map()` создает новый массив на основе значений существующего массива, тогда как `forEach()` выполняет действие над каждым элементом массива, не создавая новый массив.
С точки зрения производительности, `forEach()` обычно быстрее, чем `map()` для простых итераций, так как не создает новый массив. Однако это может варьироваться в зависимости от конкретного варианта использования и объема обрабатываемых данных. Поэтому важно учитывать конкретные требования вашего кода при выборе между `map()` и `forEach()`.
Спасибо за прочтение!
Я надеюсь, что вы нашли эту статью полезной. Если у вас есть какие-либо вопросы или предложения, пожалуйста, оставляйте комментарии. Ваши отзывы помогают мне стать лучше.
Не забудь подписаться⭐️
Страница Facebook: https://www.facebook.com/designTechWorld1
Страница в Instagram: https://www.instagram.com/techd.esign/
Канал YouTube: https://www.youtube.com/@tech..Design/
Твиттер: https://twitter.com/sumit_singh2311
Используемое оборудование:
Ноутбук: https://amzn.to/3yKkzaC
Смотрите:https://amzn.to/41cialm
Вы можете предпочесть React Book: https://amzn.to/3Tw29nx
Некоторые дополнительные книги, связанные с языками программирования:
- Важный отказ от ответственности — «Amazon и логотип Amazon являются товарными знаками Amazon.com, Inc. или ее дочерних компаний».
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
