JavaScript имеет несколько удобных методов, которые помогают нам перейти через наши массивы. Два чаще всего используются для итерации, являются массив. Прототип .map () и array.prototype.foreach (). Но я думаю, что они остаются немного неясными, особенно для новичка. Потому что они оба делают итерацию и что-то выводят.

Автор оригинала: Ibrahima Ndaw.

JavaScript имеет несколько удобных методов, которые помогают нам перейти через наши массивы. Два чаще всего используются для итерации, являются Array.prototype.map () и Array.prototype.foreach () Отказ

Но я думаю, что они остаются немного неясными, особенно для новичка. Потому что они оба делают итерацию и что-то выводят. Итак, какая разница?

В этой статье мы рассмотрим следующее:

• Определение с
• Возвращающее значение
• Возможность цепи других методов
• Мультипликация
• Скорость производительности
• Последние мысли

Определения

карта Метод получает функцию в качестве параметра. Затем он применяет его на каждом элементе и возвращает совершенно новый массив, заполненный результатами вызова прилагаемой функции.

Это означает, что он возвращает новый массив, который содержит изображение каждого элемента массива. Это всегда будет возвращать одинаковое количество предметов.

const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.map(x => x * x)

// >>>>>>>>>>>>>>>>> Output: [25, 16, 9, 4, 1]

Как карта , foreach () Способ получает функцию в качестве аргумента и выполняет его один раз для каждого элемента массива. Однако вместо того, чтобы возвращать новый массив, как карта , он возвращает undefined Отказ

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.forEach(element => console.log(element.name))
// >>>>>>>>> Output : john
//                    Ali
//                    Mass

1. Возвращающее значение

Первая разница между карта () и foreach () это возвращающее значение. foreach () Метод возвращает undefined и карта () Возвращает новый массив с преобразованными элементами. Даже если они делают ту же работу, возвращающее значение остается разным.

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x)
//>>>>>>>>>>>>>return value: undefined

myAwesomeArray.map(x => x * x)
//>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25]

2. Возможность цепи других методов

Вторая разница между этими методами Array является то, что карта () цепимается. Это означает, что вы можете прикрепить Уменьшить () , Сортировать () , Фильтр () и так далее после выполнения карта () Метод на массиве.

Это то, с чем вы не можете сделать с foreach () потому что, как вы могли догадаться, он возвращается undefined Отказ

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x).reduce((total, value) => total + value)
//>>>>>>>>>>>>> Uncaught TypeError: Cannot read property 'reduce' of undefined
myAwesomeArray.map(x => x * x).reduce((total, value) => total + value)
//>>>>>>>>>>>>>return value: 55

3. Подвеска

В целом слово «мутата» означает изменение, чередование, изменять или преобразовывать. И в мире JavaScript он имеет то же значение.

Союзный объект – это объект, состояние которого может быть изменено после его создания. Итак, как насчет foreach и карта Что касается подрезывания?

Ну, по словам Документация MDN :

foreach () не мутирует массив, на котором он называется. (Тем не менее, обратный вызов может сделать это).

карта () Не мутирует массив, на котором он называется (хотя Callback , если вызов, может сделать это).

JavaScript странный Отказ

Здесь мы видим очень похожее определение, и мы все знаем, что они оба получают Обратный вызов как аргумент. Итак, какой из них зависит от неизменности?

Ну, на мой взгляд, это определение не ясно, хотя. И узнать, что не мутирует оригинальный массив, мы сначала должны проверять, как работают эти два метода.

карта () Метод возвращает совершенно новый массив с преобразованными элементами и одинаковым объемом данных. В случае foreach () даже если он возвращается undefined это будет мутировать оригинальный массив с Обратный вызов Отказ

Поэтому мы ясно видим, что карта () полагается на неизменность и foreach () это метод мутатора.

4. Скорость производительности

Что касается скорости производительности, они немного отличаются. Но это имеет значение? Ну, это зависит от различных вещей, таких как ваш компьютер, сумма данных, с которыми вы имеете дело, и так далее.

Вы можете проверить это самостоятельно с этим примером ниже или с jsperf чтобы увидеть, что быстрее.

const myAwesomeArray = [1, 2, 3, 4, 5]

const startForEach = performance.now()
myAwesomeArray.forEach(x => (x + x) * 10000000000)
const endForEach = performance.now()
console.log(`Speed [forEach]: ${endForEach - startForEach} miliseconds`)

const startMap = performance.now()
myAwesomeArray.map(x => (x + x) * 10000000000)
const endMap = performance.now()
console.log(`Speed [map]: ${endMap - startMap} miliseconds`)

Как всегда, выбор между карта () и foreach () будет зависеть от вашего случая использования. Если вы планируете изменить, чередовать или использовать данные, вы должны выбрать карта () , потому что он возвращает новый массив с преобразованными данными.

Но, если вам не понадобится возвращенный массив, не используйте карта () – вместо этого используйте foreach () Или даже для петля.

Надеюсь, этот пост очищает различия между этими двумя методами. Если есть больше различий, пожалуйста, поделитесь ими в разделе комментариев, иначе спасибо за чтение.

Читать дальше моих статей на мой блог

Фото Фрэнк В. на Несомненно