forEach和map的用法和区别
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的用法和区别的更多相关文章
- for,foreach,iterator的用法和区别
for,foreach,iterator的用法和区别 相同点: 三个都可以用来遍历数组和集合不同点:1.形式差别 for的形式是for(int i=0;i<arr.size();i++){. ...
- List,set,Map 的用法和区别
Collection├List│├LinkedList│├ArrayList│└Vector│ └Stack└SetMap├Hashtable├HashMap└WeakHashMap Collecti ...
- python中的apply(),applymap(),map() 的用法和区别
平时在处理df series格式的时候并没有注意 map和apply的差异 总感觉没啥却别.不过还是有区别的.下面总结一下: import pandas as pd df1= pd.DataFrame ...
- JS的forEach和map方法的区别,还有一个$.each
forEach()和map()两个方法都是ECMA5中Array引进的新方法,主要作用是对数组的每个元素执行一次提供的函数,但是它们之间还是有区别的.jQuery也有一个方法$.each(),长得和f ...
- 原生JS forEach()和map()遍历的区别以及兼容写法
一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
- JS的forEach和map方法的区别
一.前言 forEach()和map()两个方法都是ECMA5中Array引进的新方法,主要作用是对数组的每个元素执行一次提供的函数,但是它们之间还是有区别的.jQuery也有一个方法$.each() ...
- for ,foreach ,map 循环的区别
一.for循环 1.for - 循环代码块一定的次数 遍历数组最常用到的for循环,是最为熟知的一种方法 for (var i=0; i<5; i++) { x=x + "The nu ...
- 数组中的forEach和map的区别
大多数情况下,我们都要对数组进行遍历,然后经常用到的两个方法就是forEach和map方法. 先来说说它们的共同点 相同点 都是循环遍历数组中的每一项 forEach和map方法里每次执行匿名函数都支 ...
- forEach和map和for方法的区别
JS中的forEach.$.each.map方法推荐 转载 2016-04-05 投稿:jingxian 我要评论 下面小编就为大家带来一篇JS中的forEach.$.each.map方法 ...
随机推荐
- 如何用Eggjs从零开始开发一个项目(3)
上一篇中我们编写了用户注册登录.登录的代码,学习了如何进行用户的认证(JWT),如何安全地存储用的密码(hash).这一篇我们有以下2个任务: 获取token中的数据: 通过model来同步数据库. ...
- SAP Spartacus简介
转: SAP Spartacus简介 终于写到Jerry目前正在做的开发任务了. 2015年的时候,那时Jerry已经做了一年多的SAP UI5开发,想进一步精进自己的开发技能,就申请了一个位于德国W ...
- 40. 组合总和 II + 递归 + 回溯 + 记录路径
40. 组合总和 II LeetCode_40 题目描述 题解分析 此题和 39. 组合总和 + 递归 + 回溯 + 存储路径很像,只不过题目修改了一下. 题解的关键是首先将候选数组进行排序,然后记录 ...
- POJ-3281(最大流+EK算法)
Dining POJ-3281 这道题目其实也是网络流中求解最大流的一道模板题. 只要建模出来以后直接套用模板就行了.这里的建模还需要考虑题目的要求:一种食物只能给一只牛. 所以这里可以将牛拆成两个点 ...
- HDOJ-6641(欧几里得+异或运算)
TDL HDOJ-6641 关于题意,就是要找出符合f的第m大的数,而且后面还要满足异或等式. 通过观察题目,可以发现n太大了,所以不能直接枚举.当然因为m比较小,所以可以转换思路k^n,这个数最大不 ...
- CentOS7安装 xmlsec1 编译并运行官方示例
1. 自动安装下列软件和依赖(默认已安装libxml2和libxslt) yum install xmlsec1-openssl xmlsec1-openssl-devel 2. 查看官网 www.a ...
- Spark性能调优-RDD算子调优篇(深度好文,面试常问,建议收藏)
RDD算子调优 不废话,直接进入正题! 1. RDD复用 在对RDD进行算子时,要避免相同的算子和计算逻辑之下对RDD进行重复的计算,如下图所示: 对上图中的RDD计算架构进行修改,得到如下图所示的优 ...
- 2018.9.9 nowcoder 普及组第一场
2018.9.9 nowcoder 普及组第一场 C-括号 题目大意:一个只包含左右括号的字符串\(S\),希望删掉S中若干个字符,使得剩下的字符串是一个合法的括号串,有多少不同的方案. Soluti ...
- jQuery学习笔记(2) jQuery选择器
jQuery的选择器完全继承了CSS的风格,利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为. 目录 目录 CSS选择器 jQuery选择器 jQuery选 ...
- Python深入:setuptools进阶
作者:gqtcgq 来源:CSDN 原文:https://blog.csdn.net/gqtcgq/article/details/49519685 Setuptools是Python Distuti ...