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获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
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判断变量是否为0的方法
2014/02/08 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
python实现的一个p2p文件传输实例
2014/06/04 Python
Python的设计模式编程入门指南
2015/04/02 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
python时间日期操作方法实例小结
2020/02/06 Python
Python datetime模块使用方法小结
2020/06/18 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
python中的unittest框架实例详解
2021/02/05 Python
运动会广播稿30字
2014/01/21 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
中文专业自荐书
2014/06/29 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
个人党性锻炼总结
2015/03/05 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
新年寄语2016
2015/08/17 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
Node实现搜索框进行模糊查询
2021/06/28 Javascript
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis