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 相关文章推荐
location.search在客户端获取Url参数的方法
Jun 08 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
jquery maxlength使用说明
Sep 09 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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 日期加减的类,很不错
2009/10/10 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
Python时间获取及转换知识汇总
2017/01/11 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
Python 必须了解的5种高级特征
2020/09/10 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
会计电算化专业应届大学生求职信
2013/10/22 职场文书
中专生自我鉴定书范文
2013/12/28 职场文书
运动会广播稿200米
2014/01/27 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
义卖募捐活动总结
2015/05/09 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
2016教师节问候语
2015/11/10 职场文书