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 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
根据地区不同显示时间的javascript代码
Aug 13 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
javascript数据类型验证方法
Dec 31 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
vue地区选择组件教程详解
May 04 Javascript
RequireJS用法简单示例
Aug 20 Javascript
微信小程序调用后台service教程详解
Nov 06 Javascript
js中延迟加载和预加载的具体使用
Jan 14 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 图片加水印与上传图片加水印php类
2010/05/12 PHP
paypal即时到账php实现代码
2010/11/28 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
Python3 入门教程 简单但比较不错
2009/11/29 Python
Python常用模块介绍
2014/11/21 Python
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
python实现图片素描效果
2020/09/26 Python
惠普香港官方商店:HP香港
2019/04/30 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python