forEach()和map()都是处理数组的高阶函数有相同的三个值:(currentValue,index,arr);

currentValue:必选,当前元素的值,index:可选,当前元素的下标,arr:可选,当前遍历的数组对象

语法:

  let array = [{title:"雪碧",price:2.5},{title:"可乐",price:2.5}]

  let list = []

  array.forEach((item,index,arr)=>{

    list[index] = item;    或者    list[index].title = item.title; list[index].price= item.price

  })

  list = array.map((item,index,arr)=>{

    let arr = {

      title:item.title,

      item:item.price

    }

    return arr;

    或者

    return {

      title:item.title,

        item:item.price

    }

  })

那么,forEach和map都有相同三个值,他们有什么区别呢?

相同处:forEach 和 map都相当于封装好的单层for循环,三个值都相同。

不同处:

  一:forEach()方法没有返回值,而map()方法有返回值;

  二:forEach遍历通常都是直接引入当前遍历数组的内存地址,生成的数组的值发生变化,当前遍历的数组对应的值也会发生变化;

  三:map遍历的后的数组通常都是生成一个新的数组,新的数组的值发生变化,当前遍历的数组值不会变化;

总结一下:这里我为什么都说遍历后通常是引入当前遍历数组的内存地址和生成一个新的数组,因为按forEach和map创作思想,forEach遍历基本引入遍历数组内存地址、map遍历而是生成一个新的数组,但是有些人写的时候不按map和forEach的常规语法来,导致使用map遍历数组时,返回的值是直接把当前遍历数组的每个元素的内存地址给了另外一个数组,本质还是引用遍历数组中每个元素的内存地址,这样生成的数组已经不能称作为一个新的数组同样也把map最大的一个特性给舍弃了,同理如果map和forEach本质没区别的话,开发人员没必要把他们封装成两个函数,封装成一个就好了。

如果对于上面说法有不懂的,可以看带着疑问看下面案例

  案例一:

  代码:

    let arr = [
     {
      title:'雪碧',
      price: 2.5,
},
{
title:'可乐',
price: 2.5,
}
] let a = arr.forEach((item,index) =>{
return item
}) let b = arr.map((item,index) =>{
return item
}) console.log(arr) //打印arr数组
console.log(a) //undefined
console.log(b) //打印arr数组

  控制台:

    

    从案例一可以看出来,map方法是有返回值的,而forEach方法没有返回值,但是如果用map方法想让b获取arr的数组的值,不建议案例一中的写法,因为上面我们已经说到了map方法主要是生成一个新的数组,而不是直接引入arr数组内存地址,如果有不明白的我们来看下面的案例你就会懂了。

  案例二:

  代码:

     let arr = [{title:'雪碧',price: 2.5},{title:'可乐',price: 2.5}]

        let list = [{title:'雪碧',price: 2.5},{title:'可乐',price: 2.5}]

        let a = [];
let b = []; arr.forEach((item,index) =>{
a[index] = item;
}) b = list.map((item,index) =>{
return item
}) console.log(a)
console.log(b)

  控制台:

    

   到这里我们可以看到,a和b都已经成功的接收了arr和list的数组的数据,上面我一直强调map一定不要直接return item,这里这么写主要是为了让你们区分生成新数组和内存地址的区别

  代码:

      a[0].price = 3;
b[0].price = 3; console.log(a);
console.log(b); console.log(arr)
console.log(list)

  控制台:

    

  从这里我们看到只更改了a和b中price值,但是arr和list数组price的值也发生了变化,arr发生变化属于正常现象,因为在上述中已经说过forEach方法遍历通常都是引入遍历数组的内存地址,不管是arr发生改变还是a发生改变,其实都是直接改变同一个内存地址,所以他们的值会一直同步,但是map方法不是说生成的是一个新的数组,为什么b的值发生改变,list值同样发生改变呢,这里就是上述说的内存地址引入问题。

  案例三:

  代码:

     b = list.map((item,index) =>{
return{
title:item.title,
price:item.price
}
}) b[0].price = 3; console.log(b);
console.log(list)

  控制台:

    

  在这里我们改变一下写法,就会发现现在在改变b值的,list的就不会发生变化了,案例二中改变b的值,list的值发现变化是因为虽说map遍历后生成的是一个新的数组,但是在遍历的过程还是引入旧数组的内容地址,而在案例三中我们通过map遍历的时候自己定义一下想要参数名,只复制一下旧数组的值,遍历完后会生成新的内存空间去存储b的值,所以我们在改变b的值时候也只是改变了b内存中的值,而没有改变list内存的值,同样的在改变list的值,b的值也不会发现改变,所以说map方法遍历后会生成一个新的数组。

  

forEach和map的用法和区别的更多相关文章

  1. for,foreach,iterator的用法和区别

    for,foreach,iterator的用法和区别 相同点:   三个都可以用来遍历数组和集合不同点:1.形式差别 for的形式是for(int i=0;i<arr.size();i++){. ...

  2. List,set,Map 的用法和区别

    Collection├List│├LinkedList│├ArrayList│└Vector│ └Stack└SetMap├Hashtable├HashMap└WeakHashMap Collecti ...

  3. python中的apply(),applymap(),map() 的用法和区别

    平时在处理df series格式的时候并没有注意 map和apply的差异 总感觉没啥却别.不过还是有区别的.下面总结一下: import pandas as pd df1= pd.DataFrame ...

  4. JS的forEach和map方法的区别,还有一个$.each

    forEach()和map()两个方法都是ECMA5中Array引进的新方法,主要作用是对数组的每个元素执行一次提供的函数,但是它们之间还是有区别的.jQuery也有一个方法$.each(),长得和f ...

  5. 原生JS forEach()和map()遍历的区别以及兼容写法

    一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...

  6. JS的forEach和map方法的区别

    一.前言 forEach()和map()两个方法都是ECMA5中Array引进的新方法,主要作用是对数组的每个元素执行一次提供的函数,但是它们之间还是有区别的.jQuery也有一个方法$.each() ...

  7. for ,foreach ,map 循环的区别

    一.for循环 1.for - 循环代码块一定的次数 遍历数组最常用到的for循环,是最为熟知的一种方法 for (var i=0; i<5; i++) { x=x + "The nu ...

  8. 数组中的forEach和map的区别

    大多数情况下,我们都要对数组进行遍历,然后经常用到的两个方法就是forEach和map方法. 先来说说它们的共同点 相同点 都是循环遍历数组中的每一项 forEach和map方法里每次执行匿名函数都支 ...

  9. forEach和map和for方法的区别

    JS中的forEach.$.each.map方法推荐 转载  2016-04-05   投稿:jingxian    我要评论 下面小编就为大家带来一篇JS中的forEach.$.each.map方法 ...

随机推荐

  1. oracle check datapump jobs

    reference: https://asktom.oracle.com/pls/apex/asktom.search?tag=getting-ora-31626-job-does-not-exist ...

  2. 第七届蓝桥杯JavaB组——第6题方格填数

    解决方案:利用全排列和递归 使用Java中的集合API:HashMap ArrayList package com.lzp.lanqiaoseven.p6; import java.util.*; / ...

  3. 31Si2CrMoB

    转: 31Si2CrMoB 31Si2CrMoB是推土机用钢的一种耐磨钢:此钢有很高的强度和韧度,适合于推土机XX.31Si2CrMoB冶炼技术工艺:电弧炉冶炼,初轧开坯.钢板轧制:可√189-170 ...

  4. 《C++ Primer》笔记 第10章 泛型算法

    迭代器令算法不依赖于容器,但算法依赖于元素类型的操作. 算法永远不会执行容器的操作.算法永远不会改变底层容器的大小. accumulate定义在头文件numeric中,接受三个参数,前两个指出需要求和 ...

  5. C++类的友元机制说明

    下面给出C++类的友元机制说明(对类private.protected成员访问),需要注意的是,友元机制尽量不用或者少用,虽然它会提供某种程度的效率,但会带来数据安全性的问题. 类的友元 友元是C++ ...

  6. 剑指 Offer 32 - I. 从上到下打印二叉树 + 层次遍历二叉树

    剑指 Offer 32 - I. 从上到下打印二叉树 Offer_32_1 题目描述 解题思路 这题属于简单题,考察的是我们对二叉树以及层次遍历的方法. 这里只需要使用简单的队列即可完成二叉树的层次遍 ...

  7. POJ-1459(最大流+EK算法)

    Power Network POJ-1459 这题值得思索的就是特殊的输入,如何输入一连串字符.这里采用的方法是根据输入已知的输入格式,事先预定好要接受的数据类型. 这里套用的板子也是最大流的模板,但 ...

  8. WPF中Popup上的textbox无法切换到中文输入法

    As Marco Zhou has said in the msdn forum (http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/b ...

  9. Typescript开发学习总结(附大量代码)

    如果评定前端在最近五年的重大突破,Typescript肯定能名列其中,重大到各大技术论坛.大厂面试都认为Typescript应当是前端的一项必会技能.作为一名消息闭塞到被同事调侃成"新石器时 ...

  10. 使用 .NET CLI 构建项目脚手架

    前言 在微服务场景中,开发人员分配到不同的小组,系统会拆分为很多个微服务,有一点是,每个项目都需要单元测试,接口文档,WebAPI接口等,创建新项目这些都是重复的工作,而且还要保证各个项目结构的大体一 ...