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 相关文章推荐
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
Uploadify上传文件方法
Mar 16 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
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
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
js实现文字截断功能
2016/09/14 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
python的Template使用指南
2014/09/11 Python
使用graphics.py实现2048小游戏
2015/03/10 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
幼儿园长自我鉴定
2013/10/17 职场文书
4s店机修工岗位职责
2013/12/20 职场文书
出国考察邀请函
2014/01/21 职场文书
人事专员的职责
2014/02/26 职场文书
黄山导游词
2015/01/31 职场文书
遗失说明具结保证书
2015/02/26 职场文书
公司财务部岗位职责
2015/04/14 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android