html5有foreach吗,JavaScript中的map()和forEach()有什么区别?
来源:https://medium.com/better-programming,作者:Moon,翻译:公众号《前端全栈开发者》
JavaScript中一些最受欢迎的功能可能是map和forEach。从ECMAScript 5(简称es5)开始,它们就开始存在了。
在本文中,我将讨论它们之间的主要区别,并向你展示其用法的一些示例。
阅读之前
基本上,在JavaScript中遍历对象取决于对象是否可迭代。默认情况下,数组是可迭代的。map 和 forEach 包含在Array.prototype 中,因此我们无需考虑可迭代性。如果你想进一步学习,我推荐你看看什么是JavaScript中的可迭代对象!
什么是map()和forEach()?
map 和 forEach 是数组中的帮助器方法,可以轻松地在数组上循环。我们曾经像下面这样循环遍历一个数组,没有任何辅助函数。var array = ['1', '2', '3'];
for (var i = 0; i < array.length; i += 1) {
console.log(Number(array[i]));
}
// 1
// 2
// 3
自JavaScript时代开始以来,就一直存在 for 循环。它包含3个表达式:初始值,条件和最终表达式。
这是循环数组的经典方法。从ECMAScript 5开始,新功能似乎使我们更加快乐。
map
map 的作用与 for 循环完全相同,只是 map 会创建一个新数组,其结果是在调用数组中的每个元素上调用提供的函数。
它需要两个参数:一个是稍后在调用 map 或 forEach 时调用的回调函数,另一个是回调函数被调用时使用的名为 thisArg 的上下文变量。const arr = ['1', '2', '3'];
// 回调函数接受3个参数
// 数组的当前值作为第一个参数
// 当前值在数组中的位置作为第二个参数
// 原始源数组作为第三个参数
const cb = (str, i, origin) => {
console.log(`${i}: ${Number(str)} / ${origin}`);
};
arr.map(cb);
// 0: 1 / 1,2,3
// 1: 2 / 1,2,3
// 2: 3 / 1,2,3
回调函数可以如下使用。arr.map((str) => { console.log(Number(str)); })
map 的结果不等于原始数组。const arr = [1];
const new_arr = arr.map(d => d);
arr === new_arr; // false
你还可以将对象作为 thisArg 传递到map。const obj = { name: 'Jane' };
[1].map(function() {
// { name: 'Jane' }
console.dir(this);
}, obj);
[1].map(() => {
// window
console.dir(this);
}, obj);
对象 obj 成为 map 的 thisArg。但是箭头回调函数无法将 obj 作为其 thisArg。
这是因为箭头函数与正常函数不同。
forEach
forEach 是数组的另一个循环函数,但 map 和 forEach 在使用中有所不同。map 和 forEach 可以使用两个参数——回调函数和 thisArg,它们用作其 this。const arr = ['1', '2', '3'];
// 回调函数接受3个参数
// 数组的当前值作为第一个参数
// 当前值在数组中的位置作为第二个参数
// 原始源数组作为第三个参数
const cb = (str, i, origin) => {
console.log(`${i}: ${Number(str)} / ${origin}`);
};
arr.forEach(cb);
// 0: 1 / 1,2,3
// 1: 2 / 1,2,3
// 2: 3 / 1,2,3
那有什么不同?
map 返回其原始数组的新数组,但是 forEach 却没有。但是它们都确保了原始对象的不变性。[1,2,3].map(d => d + 1); // [2, 3, 4];
[1,2,3].forEach(d => d + 1); // undefined;
如果更改数组内的值,forEach 不能确保数组的不变性。这个方法只有在你不接触里面的任何值时,才能保证不变性。[{a: 1, b: 2}, {a: 10, b: 20}].forEach((obj) => obj.a += 1);
// [{a: 2, b: 2}, {a: 11, b: 21}]
// 数组已更改!
何时使用map()和forEach()?
由于它们之间的主要区别在于是否有返回值,所以你会希望使用 map 来制作一个新的数组,而使用 forEach 只是为了映射到数组上。
这是一个简单的例子。const people = [
{ name: 'Josh', whatCanDo: 'painting' },
{ name: 'Lay', whatCanDo: 'security' },
{ name: 'Ralph', whatCanDo: 'cleaning' }
];
function makeWorkers(people) {
return people.map((person) => {
const { name, whatCanDo } = person;
return
My name is {name}, I can do {whatCanDo}
});
}
- makeWorkers(people)
比如在React中,map 是非常常用的制作元素的方法,因为 map 在对原数组的数据进行操作后,会创建并返回一个新的数组。const mySubjectId = ['154', '773', '245'];
function countSubjects(subjects) {
let cnt = 0;
subjects.forEach(subject => {
if (mySubjectId.includes(subject.id)) {
cnt += 1;
}
});
return cnt;
}
countSubjects([
{ id: '223', teacher: 'Mark' },
{ id: '154', teacher: 'Linda' }
]);
// 1
另一方面,当你想对数据进行某些操作而不创建新数组时,forEach 很有用。顺便说一句,可以使用 filter 重构示例。subjects.filter(subject => mySubjectId.includes(subject.id)).length;
综上所述,我建议你在创建一个新的数组时使用map,当你不需要制作一个新的数组,而是要对数据做一些事情时,就使用forEach。
速度比较
有些帖子提到 map 比 forEach 快。所以,我很好奇这是不是真的。我找到了这个对比结果。
该代码看起来非常相似,但结果却相反。有些测试说 forEach 更快,有些说 map 更快。也许你在告诉自己 map/forEach 比其他的快,你可能是对的。老实说,我不确定。我认为在现代Web开发中,可读性比 map 和 forEach 之间的速度重要得多。
但可以肯定的是——两者都比JavaScript内置的 for 循环慢。
关于找一找教程网
本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[JavaScript中的map()和forEach()有什么区别?]http://www.zyiz.net/tech/detail-145561.html
html5有foreach吗,JavaScript中的map()和forEach()有什么区别?相关推荐
- java两字符串是否相等_Java与JavaScript中判断两字符串是否相等的区别
JavaScript是一种常用的脚本语言,这也决定了其相对于其他编程语言显得并不是很规范.在JavaScript中判断两字符串是否相等 直接用==,这与C++里的String类一样.而Java里的等号 ...
- JavaScript中的name和classname有什么区别
JavaScript 中的 name 和 className 有如下区别: name 属性通常用于表示 HTML 元素的名称,如表单元素中的 input 元素.它可以用于给服务器发送数据. class ...
- JavaScript中的数组遍历forEach()与map()方法以及兼容写法
原理: 高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是 ...
- java foreach 遍历map_Java中遍历Map
Java中的map遍历有多种方法,如最早的Iterator,Java5支持的foreach,Java8 Lambda. 先初始化一个map public class TestMap { public ...
- java foreach 遍历map_java中遍历map的几种方法
java中的map遍历有多种方法,从最早的Iterator,到java5支持的foreach,再到java8 Lambda,让我们一起来看下具体的用法以及各自的优缺点 先初始化一个map public ...
- html5学习笔记---05.JavaScript 中的面向对象,继承和封装
05.JavaScript 中的面向对象 a.创梦技术qq交流群:CreDream:251572072 a.JavaScript 是一种基于对象的语言 类:JavaScript 对象很抽象,所以下 ...
- html5制作大小写转换,JavaScript中如何实现大小写转换
JavaScript中的toUpperCase()方法和toLowerCase()方法可用于转换字符串的大写和小写,toUpperCase用于将小写字母转换为大写字母,toLowerCase用于将大写 ...
- JavaScript中的数组与伪数组的区别
在JavaScript中,除了5种原始数据类型之外,其他所有的都是对象,包括函数(Function). 基本数据类型:String,boolean,Number,Undefined, Null 引用数 ...
- Javascript 中 null、NaN和undefined的区别
1.类型分析: js中的数据类型有undefined,boolean,number,string,object等5种,前4种为原始类型,第5种为引用类型. 代码 var a1; var a2 = tr ...
最新文章
- Chrome浏览器控制台报错NET::ERR_SSL_OBSOLETE_VERSION
- 打造新华社「AI合成主播」的“分身术”为何物?
- SpringBoot 中 @RestController 和 @Controller 的区别
- 理解VMware Team中的虚拟网络
- Postman 调试技巧
- 扫地机器人腿是咕噜_扫地机器人|如何避免买到“智障”,看这篇
- mysql 引擎是表级别_Mysql表引擎优化
- 即时大数据流处理=即时风暴
- 【李宏毅机器学习】Tips for Deep Learning(p14) 学习笔记
- 对spinner小结
- 深度学习图像分类(十三):ShuffleNet系列(V1,V2)
- [Odoo] Report PDF 分页
- 浅谈美国ESS音频DAC解码芯片ES9023
- HyperMesh入门笔记
- matplotlib中线宽linewidth的默认值是多少?如何查看?如何设置/设定?如何修改?
- 晶闸管整流桥matlab仿真,整流12脉中频电源MATLAB-Simulink仿真及谐波分析
- 基于networkx的《人民的名义》人物关系图
- RFQ 、IFB、RFP 、RFI的区别是什么
- Word目录中自动添加自定义样式的多级标题的方法
- Http 调用netty 服务,服务调用客户端,伪同步响应.ProtoBuf 解决粘包,半包问题.
热门文章
- CSS的alt:图片无法显示时候显示alt内容
- PHP的查找stripos strpos strripos strpos
- Git在公司内部的使用规范
- PHP递归复制文件夹的类
- arcgis 分区 属性值_如何使用ArcGIS计算分区河流(管线)总长度
- vscode 新建cpp文件_利用vscode搭建c
- linux下influxdb安装教程,Linux下安装使用InfluxDB
- linux查看端口访问用户,如何查找连接到HTTP或HTTPS端口的所有客户端
- 计算机网络管理员中级理论知识试卷06,计算机网络管理员中级理论+技能完整题库及答案...
- Windows Service Wrapper:将程序注册为windows系统服务工具