js foreach、map函数
语法:forEach和map都支持2个参数:一个是回调函数(item,index,input)和上下文;
•forEach:用来遍历数组中的每一项;这个方法执行是没有返回值的,对原来数组也没有影响;
•数组中有几项,那么传递进去的匿名回调函数就需要执行几次;
•每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input;
•理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改;但是我们可以自己通过数组的索引来修改原来的数组;
•forEach方法中的this是ary,匿名回调函数中的this默认是window;
因此:
[].forEach(function(value,index,array){
//code something
});
等价于:
$.each([],function(index,value,array){
//code something
})
会发现,第1个和第2个参数正好是相反的,要注意了,不要记错了。后面类似的方法,例如$.map也是如此。
var arr = [1,2,3,4];
var res= arr.forEach(function(value,index,array){
array[index] = value*4;
});
console.log(arr); //结果为[4,8,12,16]
console.log(res); //undefined
map:map即是 “映射”的意思 用法与 forEach 相似,用法即:
[].map(function(value,index,array){
//code
})
var ary = [12,23,24,42,1];
var res = ary.map(function (item,index,input) {
return item*10;
})
console.log(res);//-->[120,230,240,420,10];
console.log(ary);//-->[12,23,24,42,1]
•map:和forEach非常相似,都是用来遍历数组中的每一项值的,用来遍历数组中的每一项;
•区别:map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了);
•不管是forEach还是map 都支持第二个参数值,第二个参数的意思是把匿名回调函数中的this进行修改。
不管是forEach还是map在IE6-8下都不兼容(不兼容的情况下在Array.prototype上没有这两个方法),那么需要我们自己封装一个都兼容的方法,代码如下:
/**
* forEach遍历数组
* @param callback [function] 回调函数;
* @param context [object] 上下文;
*/
Array.prototype.myForEach = function myForEach(callback,context){
context = context || window;
if('forEach' in Array.prototye) {
this.forEach(callback,context);
return;
}
//IE6-8下自己编写回调函数执行的逻辑
for(var i = 0,len = this.length; i < len;i++) {
callback && callback.call(context,this[i],i,this);
}
}
/**
* map遍历数组
* @param callback [function] 回调函数;
* @param context [object] 上下文;
*/
Array.prototype.myMap = function myMap(callback,context){
context = context || window;
if('map' in Array.prototye) {
return this.map(callback,context);
}
//IE6-8下自己编写回调函数执行的逻辑
var newAry = [];
for(var i = 0,len = this.length; i < len;i++) {
if(typeof callback === 'function') {
var val = callback.call(context,this[i],i,this);
newAry[newAry.length] = val;
}
}
return newAry;
}
js foreach、map函数的更多相关文章
- js javascript map函数去重功能的使用实例
js javascript map函数去重功能的使用实例 先上一个实战例子代码 var map = new Map(); for(var i=0; i<=9; i++){ map.set(i,i ...
- js array map() 函数的简单使用
语法: array.map(function(currentValue,index,arr), thisValue) currentValue:必须.当前元素的值 index:可选.当前元素的索引值 ...
- 原生JS forEach()和map()遍历的区别以及兼容写法
一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
- JS中map和foreach的区别以及some和every的用法
一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
- 原生JS forEach()和map()遍历,jQuery$.each()和$.map()遍历
一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
- 应该用forEach改变数组的值吗? 原生JS forEach()和map()遍历的异同点
应该用forEach改变数组的值吗? https://segmentfault.com/q/1010000013170900?utm_source=index-hottest 由于js中的数组是引用类 ...
- js中数组的循环与遍历forEach,map
对于前端的循环遍历我们知道有 针对js数组的forEach().map().filter().reduce()方法 针对js对象的for/in语句(for/in也能遍历数组,但不推荐) 针对jq数组/ ...
- js之 foreach, map, every, some
js中array有四个方法 foreach, map, every, some,其使用各有倾向. 关注点一:foreach 和 map 无法跳出循环,每个元素均执行 foreach 和 map 无法跳 ...
- js parseInt和map函数
今天看了一个js的题目["1","2","3"].map(parseInt),看到后脑海中浮现的答案是[1,2,3],但是看到正确答案后蒙了 ...
- JS数组中every(),filter(),forEach(),map(),some()方法学习笔记!
ES5中定义了五种数组的迭代方法:every(),filter(),forEach(),map(),some(). 每个方法都接受两个参数:要在每一项运行的函数(必选)和运行该函数的作用域的对象-影响 ...
随机推荐
- spring依赖注入中接口的问题
问题描述:一个接口,有俩个实现类当注入时候名字不同时,会出现不同的情况 action层: @Controller("userAction") @Scope("protot ...
- 深入理解计算机系统chapter6
1. 2. 3. 存储器山
- crontab的两大坑:百分号和环境变量
今天想给服务器加个自动备份mysql数据库的功能(别怪我这么久才加,阿里云每天全盘备份的,不怕丢数据库),本以为只要5分钟就能搞定的,结果入了两个大坑. 我的crontab是这样写的: * * * m ...
- 每周分享之 二 http协议(2)
本次分享http协议,共分为三部分,这是第二部分,主要讲解请求与响应的字段,以及状态码. 以http/1.1版本的一个完整的请求与响应作为例子 http请求信息由三部分组成 1.请求方法(GET/PO ...
- Sum It Up 广搜
Sum It Up Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit St ...
- Ionic3学习笔记(四)修改返回按钮文字、颜色
本文为原创文章,转载请标明出处 目录 修改返回按钮文字 修改返回按钮颜色 1. 修改返回按钮文字 参考官网 Ionic API---Config 文档 可在 ./src/app/app.module. ...
- spring boot 快速生成demo工程 官网生成
最近一直在弄springboot的项目,居然最近才知道快速生成springBoot工程,原来可以这么简单, 而且官网还提供了生成java或是web项目,需要jpa,模板等服务,直接一键集成.话不多说, ...
- Mysq基础
本文是之前看博客时候的记录,忘记是哪位仁兄的了,在这只做一次转载: 常见误区 count(1)和count(primary_key) 优于 count(*) 很多人为了统计记录条数,就使用 count ...
- M-移动端的webapp页面布局教程和webapp实战分析
http://www.25xt.com/html5css3/8092.html 响应式设计 1 媒体查询 适用于不同固定宽度设计 媒体类型 : screen 屏幕 print 打印机 handheld ...
- ch3-form(get/post) $.ajax(get/post)
1 http(get)请求 提交的数据 用req.query接收 1.1 router.get() //http(get)请求方式 1.2 接收http(get)方式提交的数据 req.query 方 ...