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 document.compatMode兼容性
Feb 23 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
JS中Location使用详解
May 12 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
纯JS代码实现气泡效果
May 04 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
关于JavaScript轮播图的实现
Nov 20 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执行zip与rar解压缩方法实现代码
2010/12/05 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
onpropertypchange
2006/07/01 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
Augularjs-起步详解
2016/07/08 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
js如何验证密码强度
2020/03/18 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
如何利用python进行时间序列分析
2020/08/04 Python
销售人员中英文自荐信
2013/09/22 职场文书
应届生学校辅导员求职信
2013/11/07 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
居住证明范文
2015/06/17 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android
centos7安装mysql5.7经验记录
2022/05/02 Servers