首页 > 其他分享 >.forEach循环和.map()循环的主要区别,它们分别在什么情况下使用?

.forEach循环和.map()循环的主要区别,它们分别在什么情况下使用?

时间:2024-03-20 18:59:32浏览次数:19  
标签:map 遍历 每个 元素 循环 forEach 数组

  .forEach() 和 .map() 都是 JavaScript 数组的迭代方法,用于对数组中的每个元素执行某个操作。它们之间的主要区别在于返回值和使用情况。

1. forEach() 方法:

  .forEach() 方法用于遍历数组中的每个元素,并对每个元素执行指定的回调函数。该方法没有返回值,它仅用于执行副作用操作(如修改数组或输出结果)。

1.1 语法:

array.forEach(function(currentValue, index, array) {
  // 执行操作
});

1.2 参数:

  • currentValue:当前遍历的元素值。
  • index(可选):当前遍历的元素索引。
  • array(可选):正在被遍历的原始数组。

1.3 示例:


var numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(num) {
  console.log(num * 2); // 输出每个元素的两倍
});

  输出结果:

2
4
6
8
10

  .forEach() 方法遍历数组中的每个元素,并对每个元素执行回调函数。在上述示例中,我们输出了每个元素的两倍。

2. map() 方法:

  • .map() 方法用于遍历数组中的每个元素,并使用指定的回调函数对每个元素进行转换或映射。该方法返回一个新的数组,新数组由对原始数组中的每个元素应用回调函数后的结果组成。

2.1 语法:

var newArray = array.map(function(currentValue, index, array) {
  // 返回转换后的值
});

2.2 参数:

  • currentValue:当前遍历的元素值。
  • index(可选):当前遍历的元素索引。
  • array(可选):正在被遍历的原始数组。

2.3 示例:

var numbers = [1, 2, 3, 4, 5];
var doubled = numbers.map(function(num) {
  return num * 2; // 返回每个元素的两倍
});
console.log(doubled); // 输出新的数组 [2, 4, 6, 8, 10]

  输出结果:

[2, 4, 6, 8, 10]

  .map() 方法遍历数组中的每个元素,并将每个元素通过回调函数进行转换或映射。在上述示例中,我们返回了每个元素的两倍,并创建了一个新的数组。

3. 区别

3.1 返回值:

  • .forEach() 方法没有返回值,它仅用于遍历数组并对每个元素执行操作,通常用于执行副作用(如修改数组或输出)。
  • .map() 方法返回一个新的数组,该数组由对原始数组中的每个元素应用回调函数的结果组成,通常用于转换或映射数组的元素。

3.2 使用情况:

  • .forEach() 方法适用于需要遍历数组并对每个元素执行操作,但不需要返回结果的情况。它是一种迭代数组的简单方法,通常用于执行循环中的副作用操作,如修改数组的元素或输出结果。
  • .map() 方法适用于需要遍历数组并对每个元素进行转换或映射的情况。它返回一个新的数组,该数组包含对原始数组中每个元素应用回调函数后的结果。通常用于在不修改原始数组的情况下,生成一个新的数组,其中的元素经过转换、映射或计算。

3.3 示例

// 使用 forEach() 循环
var numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(num) {
  console.log(num * 2); // 输出每个元素的两倍
});

// 使用 map() 循环
var numbers = [1, 2, 3, 4, 5];
var doubled = numbers.map(function(num) {
  return num * 2; // 返回每个元素的两倍
});
console.log(doubled); // 输出新的数组 [2, 4, 6, 8, 10]

  在上述示例中,我们有一个名为 numbers 的数组。使用 .forEach() 方法,我们遍历数组并输出每个元素的两倍。而使用 .map() 方法,我们通过返回每个元素的两倍来创建一个新的数组。

标签:map,遍历,每个,元素,循环,forEach,数组
From: https://blog.csdn.net/alive_new/article/details/136778564

相关文章

  • 红黑树(STL-ordered_map)
    目录一、概念: 二、红黑树的结点三、红黑树的插入四、迭代器(核心:结点指针)五、应用 一、概念:    为了保持AVL树的平衡性,AVL树需要频繁地调整全树整体拓扑结构,代价较大。为此在AVL树的平衡标准上进一步放宽条件,引入红黑树的概念:每个结点都是黑色或者红色......
  • Elasticsearch-Mapping映射
    Mapping映射自动或手动为index中的_doc建立一种数据结构和相关配置动态映射:dynamicmapping,自动为我们建立index,以及对应的mapping,mapping中包含了每个field对应的数据类型,以及如何分词等设置。PUT/web_site/_doc/1{"post_date":"2023-01-01","title":"Thelonger",......
  • nmap 参数详解。
    #读取文件扫描,一行一个,可以是主机名或者网段。nmap-iLtarget.txt#随机选择5个目标进行扫描。模拟对网络中随机主机的扫描,以便评估网络安全性。nmap-iR5#排除在扫描范围之外的主机或网络。nmap192.168.1.0/24--exclude192.168.1.1nmap192.168.1.0/24--exclude19......
  • 【Java初阶(二)】分支与循环
    ❣博主主页:33的博客❣▶文章专栏分类:Java从入门到精通◀......
  • [Java基础学习][集合]java常见集合:Java中集合框架提供了大量的集合类:常见的list、set
    总结与区别:Set:去重;      set去重本质:equals+hashcode;    常见的HashSet、TreeSet。    HashSet基于哈希表实现,插入、删除、查找。不保证顺序    TreeSet基于红黑树实现,保证顺序,查找较快;treeSet:排序继承comparable接口进行比较排序   Se......
  • flutter中Map<String, dynamic>与Map<String, String>的区别
    在Flutter中,Map<String,dynamic>和Map<String,String>都是Map类型的数据结构,但它们之间有一些重要的区别: 1.Map<String,dynamic>:这种Map的值可以是任何类型,包括基本数据类型(如int,double,String等),List,Map以及自定义对象。使用dynamic类型会导致更灵活的数据处理,但在编码时......
  • 340_依赖循环引用Relying upon circular references is discouraged and they are pro
    报错信息15:21:53.398[main]ERRORo.s.b.d.LoggingFailureAnalysisReporter-[report,40]-***************************APPLICATIONFAILEDTOSTART***************************Description:Thedependenciesofsomeofthebeansintheapplicationcontextf......
  • leaflet频繁切换mapbox矢量图层-短暂空白问题
    leaflet加载mapbox矢量图层-最佳方案推荐闪烁问题比如现在有卫星图和mapboxgl矢量图层,两者有时常常需要切换,但在切换回矢量图层时,会出先短暂的空白问题(就是初始化图层),那有什么办法,可以实现平滑过渡切换呢解决思路大概讲一下思路,就是在切换卫星图时,矢量图层不要立刻移除,通过......
  • python 循环语句
    真值表|对象/常量|值||-----------|----------||True|True||False|False||0|False||0.0|False||None|False||[]|False||()|False||""|False......
  • MapReduce执行流程
    MapReduce执行流程MapTask执行流程Read:读取阶段MapTask会调用InputFormat中的getSplits方法来对文件进行切片切片之后,针对每一个Split,产生一个RecordReader流用于读取数据数据是以Key-Value形式来产生,交给map方法来处理。每一个键值对触发调用一次map方法Map:映射阶......