Array中 forEach() 和 map() 的区别
相关推荐:《javascript视频教程》
今天我们来看一下 Array中 Array.forEach()
和 Array.map()
方法之间的区别。
forEach()
和map()
方法通常用于遍历Array元素,但几乎没有区别,我们来一一介绍。
1.返回值
forEach()
方法返回undefined
,而map()
返回一个包含已转换元素的新数组。
const numbers = [1, 2, 3, 4, 5]; // 使用 forEach() const squareUsingForEach = []; numbers.forEach(x => squareUsingForEach.push(x*x)); // 使用 map() const squareUsingMap = numbers.map(x => x*x); console.log(squareUsingForEach); // [1, 4, 9, 16, 25] console.log(squareUsingMap); // [1, 4, 9, 16, 25]
由于forEach()
返回undefined
,所以我们需要传递一个空数组来创建一个新的转换后的数组。map()
方法不存在这样的问题,它直接返回新的转换后的数组。在这种情况下,建议使用map()
方法。
2.链接其他方法
map()
方法输出可以与其他方法(如reduce()
、sort()
、filter()
)链接在一起,以便在一条语句中执行多个操作。
另一方面,forEach()
是一个终端方法,这意味着它不能与其他方法链接,因为它返回undefined
。
我们使用以下两种方法找出数组中每个元素的平方和:
onst numbers = [1, 2, 3, 4, 5]; // 使用 forEach() const squareUsingForEach = [] let sumOfSquareUsingForEach = 0; numbers.forEach(x => squareUsingForEach.push(x*x)); squareUsingForEach.forEach(square => sumOfSquareUsingForEach += square); // 使用 map() const sumOfSquareUsingMap = numbers.map(x => x*x).reduce((total, value) => total + value) ; console.log(sumOfSquareUsingForEach); // 55 console.log(sumOfSquareUsingMap); // 55
当需要多个操作时,使用forEach()
方法是一项非常乏味的工作。我们可以在这种情况下使用map()
方法。
3.性能
// Array: var numbers = []; for ( var i = 0; i < 1000000; i++ ) { numbers.push(Math.floor((Math.random() * 1000) + 1)); } // 1. forEach() console.time("forEach"); const squareUsingForEach = []; numbers.forEach(x => squareUsingForEach.push(x*x)); console.timeEnd("forEach"); // 2. map() console.time("map"); const squareUsingMap = numbers.map(x => x*x); console.timeEnd("map");
这是在MacBook Pro的 Google Chrome v83.0.4103.106(64位)上运行上述代码后的结果。 建议复制上面的代码,然后在自己控制台中尝试一下。
forEach: 26.596923828125ms map: 21.97998046875ms
显然,map()
方法比forEach()
转换元素要好。
4.中断遍历
这两种方法都不能用 break
中断,否则会引发异常:
const numbers = [1, 2, 3, 4, 5]; // break; inside forEach() const squareUsingForEach = []; numbers.forEach(x => { if(x == 3) break; // <- SyntaxError squareUsingForEach.push(x*x); }); // break; inside map() const squareUsingMap = numbers.map(x => { if(x == 3) break; // <- SyntaxError return x*x; });
上面代码会抛出 SyntaxError
:
ⓧ Uncaught SyntaxError: Illegal break statement
如果需要中断遍历,则应使用简单的for循环或for-of
/for-in
循环。
const numbers = [1, 2, 3, 4, 5]; // break; inside for-of loop const squareUsingForEach = []; for(x of numbers){ if(x == 3) break; squareUsingForEach.push(x*x); }; console.log(squareUsingForEach); // [1, 4]
5. 最后
建议使用map()
转换数组的元素,因为它语法短,可链接且性能更好。
如果不想返回的数组或不转换数组的元素,则使用forEach()
方法。
最后,如果要基于某种条件停止或中断数组的便利,则应使用简单的for循环或for-of
/ for-in
循环。
原文地址:https://codingnconcepts.com/javascript/difference-between-foreach-and-map-in-javascript-array/
作者:Ashish Lahoti
译文地址:https://segmentfault.com/a/1190000038421334
更多编程相关知识,请访问:编程教学!!
以上是Array中 forEach() 和 map() 的区别的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

PHP与Vue:完美搭档的前端开发利器在当今互联网高速发展的时代,前端开发变得愈发重要。随着用户对网站和应用的体验要求越来越高,前端开发人员需要使用更加高效和灵活的工具来创建响应式和交互式的界面。PHP和Vue.js作为前端开发领域的两个重要技术,搭配起来可以称得上是完美的利器。本文将探讨PHP和Vue的结合,以及详细的代码示例,帮助读者更好地理解和应用这两

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

Django是一个Python编写的web应用框架,它强调快速开发和干净方法。尽管Django是一个web框架,但是要回答Django是前端还是后端这个问题,需要深入理解前后端的概念。前端是指用户直接和交互的界面,后端是指服务器端的程序,他们通过HTTP协议进行数据的交互。在前端和后端分离的情况下,前后端程序可以独立开发,分别实现业务逻辑和交互效果,数据的交

在前端开发面试中,常见问题涵盖广泛,包括HTML/CSS基础、JavaScript基础、框架和库、项目经验、算法和数据结构、性能优化、跨域请求、前端工程化、设计模式以及新技术和趋势。面试官的问题旨在评估候选人的技术技能、项目经验以及对行业趋势的理解。因此,应试者应充分准备这些方面,以展现自己的能力和专业知识。

Go语言作为一种快速、高效的编程语言,在后端开发领域广受欢迎。然而,很少有人将Go语言与前端开发联系起来。事实上,使用Go语言进行前端开发不仅可以提高效率,还能为开发者带来全新的视野。本文将探讨使用Go语言进行前端开发的可能性,并提供具体的代码示例,帮助读者更好地了解这一领域。在传统的前端开发中,通常会使用JavaScript、HTML和CSS来构建用户界面

Django:前端和后端开发都能搞定的神奇框架!Django是一个高效、可扩展的Web应用程序框架。它能够支持多种Web开发模式,包括MVC和MTV,可以轻松地开发出高质量的Web应用程序。Django不仅支持后端开发,还能够快速构建出前端的界面,通过模板语言,实现灵活的视图展示。Django把前端开发和后端开发融合成了一种无缝的整合,让开发人员不必专门学习

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务

Golang与前端技术结合:探讨Golang如何在前端领域发挥作用,需要具体代码示例随着互联网和移动应用的快速发展,前端技术也愈发重要。而在这个领域中,Golang作为一门强大的后端编程语言,也可以发挥重要作用。本文将探讨Golang如何与前端技术结合,以及通过具体的代码示例来展示其在前端领域的潜力。Golang在前端领域的作用作为一门高效、简洁且易于学习的
