JS中map()与forEach()的用法
JS中map()与forEach()的用法
相同点:
1.都是循环遍历数组中的每一项
2.每次执行匿名函数都支持三个参数,参数分别为item(当前每一项),index(索引值),arr(原数组)
3.匿名函数中的this都是指向window
4.只能遍历数组
不同点:
map()
map方法返回一个新的数组,数组中的元素为原始数组调用函数处理后的值
也就是map()进行处理之后返回一个新的数组
⚠️注意:map()方法不会对空数组进行检测
map方法不会改变原始数组
var arr = [0,2,4,6,8];var str = arr.map(function(item,index,arr){console.log(this); //Windowconsole.log(this);console.log(item);console.log('原数组arr:',arr); // 会执行五次return item/2; },this);console.log(str); //[0,1,2,3,4]
forEach
forEach方法用于调用数组的每个元素,将元素传给回调函数
⚠️注意: forEach对于空数组是不会调用回调函数的 ,
没有返回一个新数组&没有返回值
应用场景:为一些相同的元素,绑定事件处理器!
不可链式调用
var arr = [0,2,4,6,8] var sum =0; var str = arr.forEach(item,index,arr) { sum+= item; console.log("sum的值为:",sum); }
我们先来看两者之间的相同之处
var arr = ['a','b','c','d'];arr.forEach(function(item,index,arr){ //item表示数组中的每一项,index标识当前项的下标,arr表示当前数组console.log(item);console.log(index);console.log(arr);console.log(this); },123); //这里的123参数,表示函数中的this指向,可写可不写,如果不写,则this指向windowarr.map(function(item,index,arr){ //参数含义同forEachconsole.log(item);console.log(index);console.log(arr);console.log(this); },123);
运行之后,可以看出两者参数没有任何的区别,除此之外两者之间还有一个特性,就是不能停止里面的遍历,除非程序报错,那么两者之间的区别在那里呢???
在于返回值!!!
var a = arr.forEach(function(item,index,arr){ return 123 }); var b = arr.map(function(item,index,arr){return 123 }); console.log(a); //undefined console.log(b); //[123,123,123,123]
我们可以利用map的这个特性做哪些事情呢,比如
var b = arr.map(function(item,index,arr){return item+'a'; }); console.log(b); //["aa", "ba", "ca", "da"]
// 之前我们的循环是这样的 for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); }
// 从ES5开始提供这样的for循环 myArray.forEach(function (value) { console.log(value); });
// 在ES6我们还可以这样任性 // 循环下标或者key(for-in) for (var index in myArray) { // don't actually do this console.log(myArray[index]); } // 循环value(for-of) for (var value of myArray) { console.log(value); } // 甚至直接循环key和value,no problem for (var [key, value] of phoneBookMap) { console.log(key + "'s phone number is: " + value); } // 或者更者我们这样“优雅”的循环对象(貌似和ES6没有关系) for (var key of Object.keys(someObject)) { console.log(key + ": " + someObject[key]); }
// 现场实例,我们这样使用 var items = [...]; items.forEach((item, i) => { if (item.status == 'new') this.apply(item, i) });
JS中map()与forEach()的用法相关推荐
- JS中map和foreach的区别以及some和every的用法
转载自:小猪冒泡 的 原生JS forEach()和map()遍历 一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项.2.forEach() 和 map() ...
- JS中 map, filter, some, every, forEach, for in, for of 用法总结
for.for in和for of和forEach的区别:http://blog.sina.com.cn/s/blog_c112a2980102xqg9.html JS中 map, filter, s ...
- js中 map 遍历数组
forEach()和map()都是遍历数组的方法,用法类似,但是还是有很大区别: 相同点: 1.都是循环遍历数组中的每一项: 2.在遍历中执行匿名函数都可以接收三个参数,分别为:遍历过程的每一项.遍历 ...
- js中!和!!的区别及用法
js中!和!!的区别及用法 js中!的用法是比较灵活的,它除了做逻辑运算常常会用!做类型判断,可以用!与上对象来求得一个布尔值, 1.!可将变量转换成boolean类型,null.undefined和 ...
- js中继承的几种用法总结(apply,call,prototype)
本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助 一,js中对象继承 js中有三种继承方式 1.js原型(proto ...
- 第22篇 js中的this指针的用法
前面把js的相关知识总结了下,今天把js中的上下文的this,对于强类型语言,this的用法非常的单一,因为他们没有js特有的动态绑定. 首先看下面代码: function funcA() {this ...
- js中try和catch的用法
js中try和catch的用法 版权声明:本文为@lyhh5原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明 原文链接:https://blog.csdn.net/l ...
- JS中break和continue的用法
break和continue的用法 Break--跳出循环.判断,用于判断或循环语句中 Continue--跳出本次循环,只能用于循环语句中. 区分是否为自定义标识符,其后加冒号,为自定义标识符. B ...
- 对 Stream 中 Map 与 ForEach 做个简单说明
经常会有童鞋把 Map 和 Foreach 用错,可能会出现如下用法: List<Student> studentChangeList = studentList.stream().for ...
最新文章
- 传感器标定两篇顶会论文解析
- ##自定义一个自动注入Log 的 插件
- pip Python 包安装和管理工具
- 问题集合---《平时遇到的问题 + 参考解决方式》
- 使用Java和Spring构建现代Web应用程序
- 大学计算机基础书本里的毕业论文源稿,计算机基础毕业论文范文
- 【HTML+CSS网页设计与布局 从入门到精通】第5章-表格
- 2d 蓝图_“二渲三”打破传统思维!Netflix冲奥动画会推动2D动画变革吗?
- RedHat Linux 加入域
- 为什么都建议学java而不是python-为什么都建议学Java而不是Python?两者有什么区别吗?...
- 微信上如何发送GIF动图
- windows内核_Windows内核漏洞利用
- mysql连接操作_MySQL内连接操作
- springsecurity3的验证过程
- 大小端转换定义结构体的技巧
- python的输入来源包括文件输入_【python】文件的输入和输出
- matlab圆孔孔壁应力集中,matlab 有限元分析平面问题的小孔应力集中问题的程序 - 下载 - 搜珍网...
- ios13 微信提示音插件_ios13怎么设置微信提示音
- 转 鲁迅《随感录》之一二
- js代码格式化(js代码格式化html标签)
热门文章
- pandas 删除有缺失值的个案,做回归分析
- mysql在mac下的data目录_Mysql在mac中目录结构用法命令
- linux设备模型bus,device,driver,(kobject、ktype、kset,bus_type、device、device_driver)
- iis占用服务器内存,W3wp.exe 进程占用内存高消耗CPU近100%导致网站反应速度缓慢的解决方案...
- php企业站数据表,php – 创建一个站点来查询表的数据库
- Android:安卓APP启动过程简介
- 树莓派:linux库概念及相关编程(面试重点):以及USB端口号找到不的情况
- python 1 2 3怎么拼接所有可能的数_6000字长文,带你用Python完成 “Excel合并(拆分)” 的各种操作!...
- zip()和zip(*)的区别与使用
- Navicat Premium