JS中的forEach、$.each、map方法推荐


Posted in Javascript onApril 05, 2016

forEach是ECMA5中Array新方法中最基本的一个,就是遍历,循环。例如下面这个例子:

[1, 2 ,3, 4].forEach(alert);

等同于下面这个for循环

var array = [1, 2, 3, 4];
for (var k = 0, length = array.length; k < length; k++) {
 alert(array[k]);
}

Array在ES5新增的方法中,参数都是function类型,默认有传参,forEach方法中的function回调支持3个参数,第1个是遍历的数组内容;第2个是对应的数组索引,第3个是数组本身。

因此,我们有:

[].forEach(function(value, index, array) {
  // ...
});

对比jQuery中的$.each方法:

$.each([], function(index, value, array) {
  // ...
});

会发现,第1个和第2个参数正好是相反的,大家要注意了,不要记错了。后面类似的方法,例如$.map也是如此。

var data=[1,3,4] ; 
var sum=0 ;
data.forEach(function(val,index,arr){
  console.log(arr[index]==val);  // ==> true
  sum+=val            
})
console.log(sum);          // ==> 8

map

这里的map不是“地图”的意思,而是指“映射”。[].map(); 基本用法跟forEach方法类似:

array.map(callback,[ thisObject]);

callback的参数也类似:

[].map(function(value, index, array) {
  // ...
});

map方法的作用不难理解,“映射”嘛,也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方:

var data=[1,3,4]

var Squares=data.map(function(val,index,arr){
  console.log(arr[index]==val);  // ==> true
  return val*val           
})
console.log(Squares);        // ==> [1, 9, 16]

注意:由于forEach、map都是ECMA5新增数组的方法,所以ie9以下的浏览器还不支持(万恶的IE啊),不过呢,可以从Array原型扩展可以实现以上全部功能,例如forEach方法:

if (typeof Array.prototype.forEach != "function") {
  Array.prototype.forEach = function() {
    /* 实现 */
  };
}

以上这篇JS中的forEach、$.each、map方法推荐就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery tools系列 expose 学习
Sep 06 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
JS实现简单日历特效
Jan 03 Javascript
手写实现JS中的new
Nov 07 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 #Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 #Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 #Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 #Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 #Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 #Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 #Javascript
You might like
PHP新手入门学习方法
2011/05/08 PHP
php对称加密算法示例
2014/05/07 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
python将文本转换成图片输出的方法
2015/04/28 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
人民教师的自我评价分享
2014/02/21 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
股权转让协议书
2014/12/07 职场文书
2015年技术员工作总结
2015/04/10 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python
JavaScript执行机制详细介绍
2021/12/06 Javascript