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 相关文章推荐
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
VUE预渲染及遇到的坑
Sep 03 Javascript
原生js实现商品筛选功能
Oct 28 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一些公用函数的集合
2008/03/27 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
js实现随机点名程序
2020/09/17 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
Python实现简单的代理服务器
2015/07/25 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
python生成器与迭代器详解
2019/01/01 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
Pycharm Git 设置方法
2020/09/15 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
类的返射机制中的包及核心类
2016/09/12 面试题
旷课检讨书大全
2014/01/21 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
限期整改通知书
2015/04/22 职场文书
自我检讨书怎么写
2015/05/07 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript