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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
js/jquery判断浏览器类型的方法小结
May 12 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
jquery实现全屏滚动
Dec 28 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 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 删除cookie和浏览器重定向
2009/03/16 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
php xhprof使用实例详解
2019/04/15 PHP
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
python开发之文件操作用法实例
2015/11/13 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
Python模块WSGI使用详解
2018/02/02 Python
python如何快速生成时间戳
2020/07/21 Python
python中实现词云图的示例
2020/12/19 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
火车的故事教学反思
2014/02/11 职场文书
致接力运动员广播稿
2014/02/17 职场文书
大学生就业意向书范文
2014/04/01 职场文书
小学教师师德承诺书
2014/05/23 职场文书
社区党建工作方案
2014/06/10 职场文书
车间核算员岗位职责
2014/07/01 职场文书
2014年司法所工作总结
2014/11/22 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
新员工入职感想
2015/08/07 职场文书
Python 统计序列中元素的出现频度
2022/04/26 Python