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库(迷你版)--自建js库总结
Nov 21 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
js实现二级联动简单实例
Jan 11 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 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
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
详解vue中axios的封装
2018/07/18 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
Python聚类算法之基本K均值实例详解
2015/11/20 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
C面试题
2015/10/08 面试题
党员廉洁自律个人总结
2015/02/13 职场文书
应届毕业生求职信范文
2015/03/19 职场文书