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 相关文章推荐
单独使用CKFinder选择图片的方法
Aug 21 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
vue2中使用less简易教程
Mar 27 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
vue实现拖拽效果
Dec 23 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 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
模仿OSO的论坛(三)
2006/10/09 PHP
php 缓存函数代码
2008/08/27 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
php生成动态验证码gif图片
2015/10/19 PHP
php 多文件上传的实现实例
2016/10/23 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
详解vue引入子组件方法
2019/02/12 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
python实现随机密码字典生成器示例
2014/04/09 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Django 框架模型操作入门教程
2019/11/05 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
自我评价正确写法范文
2013/12/10 职场文书
汽车促销活动方案
2014/03/31 职场文书
会员活动策划方案
2014/08/19 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
新教师教学工作总结
2015/08/14 职场文书
庭外和解协议书
2016/03/23 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
golang操作rocketmq的示例代码
2022/04/06 Golang