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 相关文章推荐
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
jquery 多级下拉菜单核心代码
May 21 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
vue双向绑定简要分析
Mar 23 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 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 动态多文件上传
2009/01/18 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
php数组使用规则分析
2015/02/27 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
python基础知识小结之集合
2015/11/25 Python
实用自动化运维Python脚本分享
2018/06/04 Python
python制作mysql数据迁移脚本
2019/01/01 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
python 图片去噪的方法示例
2019/07/09 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
python中加背景音乐如何操作
2020/07/19 Python
经贸日语毕业生自荐信
2013/11/03 职场文书
大学生求职自我评价
2014/01/16 职场文书
企业总经理职责
2014/02/02 职场文书
党员倡议书
2015/01/19 职场文书
失职检讨书大全
2015/01/26 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书