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限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 Javascript
JavaScript实现消消乐的源代码
Jan 12 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类的反射用法实例
2014/11/03 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
单位人事专员介绍信
2014/01/11 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
乐山大佛导游词
2015/02/02 职场文书
2015年暑假生活总结
2015/07/13 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
学生检讨书范文
2019/06/24 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
如何基于python实现单目三维重建详解
2022/06/25 Python