array.forEach(callback[, thisObject]);

下面是参数的详细信息:

1、 callback : 函数测试数组的每个元素。

2、thisObject : 对象作为该执行回调时使用.

forEach是ECMA5中Array新方法中最基本的一个,就是遍历,循环。

Array在ES5新增的方法中,参数都是function类型,默认有传参,forEach方法中的function回调支持3个参数,第1个是遍历的数组内容;第2个是对应的数组索引,第3个是数组本身。

[].forEach(function(value, index, array) {
  // ...
});
$.each([], function(index, value, array) {
  // ...
});
这里的map不是“地图”的意思,而是指“映射”。[].map(); 基本用法跟forEach方法类似
array.map(callback,[ thisObject]);
[].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方法。
优势:foreach和map相对于for来说,实现同样的功能,但是方便书写节省代码量
forEach相比普通的for循环的优势在于洗漱数组的处理,或跳过数组的空位,如下
for循环:
var arr = new Array(1000);

arr[0] = 1;
arr[99] = 3;
arr[999] = 5;
// for循环
for (var i = 0, l = arr.length; i < l; i++) {
console.log('arr[%s]', i, arr[i]);
}
console.log('i :' , i);
// ...
// arr[0] 1
// ...
// arr[99] 3
// ...
// arr[999] 5
// i : 1000 // for - in 循环
var count = 0;
for(var j in arr){
count ++ ;
if(arr.hasOwnProperty(j)){
console.log('arr[%s]', j, arr[j]);
}
}
console.log('count : ', count);
// arr[0] 1
// arr[99] 3
// arr[999] 5
// i : 1000
forEach循环:
var arr = new Array(1000);
arr[0] = 1;
arr[99] = 3;
arr[999] = 5; var count = 0;
arr.forEach(function(value, index) {
count++;
console.log(typeof index);
console.log(index, value);
});
console.log('count', count);
// number
// 0 1
// number
// 99 3
// number
// 999 5
// count 3
Array 在 Javascript 中是一个对象, Array 的索引是属性名。
事实上, Javascript 中的 “array” 有些误导性, Javascript 中的 Array 并不像大部分其他语言的数组。首先, Javascript 中的 Array 在内存上并不连续,其次, Array 的索引并不是指偏移量。
实际上, Array 的索引也不是 Number 类型,而是 String 类型的。我们可以正确使用如 arr[0] 的写法的原因是语言可以自动将 Number 类型的 0 转换成 String 类型的 "0" 。
所以,在 Javascript 中从来就没有 Array 的索引,而只有类似 "0" 、 "1" 等等的属性。有趣的是,每个 Array 对象都有一个 length 的属性,导致其表现地更像其他语言的数组。
但为什么在遍历 Array 对象的时候没有输出 length 这一条属性呢?那是因为 for-in 只能遍历“可枚举的属性”, length 属于不可枚举属性,实际上, Array 对象还有许多其他不可枚举的属性。 map可以做链式操作,forEach不可以,
for不用担心兼容性的问题,还有可以break跳出循环,是基础循环,可以有for...in,foo...of,for(let i=0;i<len;i++)等。可以用continue和break控制
forEach是for(let i=0;i<len;i++)的缩写,不支持continue和break,可以return来控制循环,forEach是不能退出循环本身的
map循环当前可循环对象,并且返回新的可循环对象,而forEach没有返回值
forEach只有在火狐和谷歌浏览器中Array有这个方法,在IE中就米有,需要用prototype手动添加这个方法

forEach、for+i、map的用法及区别的更多相关文章

  1. JS中的 map, filter, some, every, forEach, for in, for of 用法总结和区别

    JS中的 map, filter, some, every, forEach, for in, for of 用法总结和区别  :https://blog.csdn.net/hyupeng1006/a ...

  2. Collection List Set和Map用法与区别

    labels:Collection List Set和Map用法与区别 java 散列表 集合 Collection           接 口的接口      对 象的集合   ├   List   ...

  3. js数组中foEach和map的用法详解 jq中的$.each和$.map

    数组中foEach和map的用法详解 相同点: 1.都是循环遍历数组(仅仅是数组)中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value, ...

  4. java8Stream map和flatmap的区别

    map和flatmap的区别 map只是一维 1对1 的映射 而flatmap可以将一个2维的集合映射成一个一维,相当于他映射的深度比map深了一层 , 所以名称上就把map加了个flat 叫flat ...

  5. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  6. MyBatis从入门到精通(第4章):MyBatis动态SQL【foreach、bind、OGNL用法】

    (第4章):MyBatis动态SQL[foreach.bind.OGNL用法] 4.4 foreach 用法 SQL 语句中有时会使用 IN 关键字,例如 id in (1,2,3).可以使用 ${i ...

  7. [转载]jQuery中wrap、wrapAll和wrapInner用法以及区别

    原文地址:jQuery中wrap.wrapAll和wrapInner用法以及区别作者:伊少君 原文: <ul>   <li title='苹果'>苹果</li>   ...

  8. WordPress翻译中 __()、_e()、_x、_ex 和 _n 的用法及区别

    编译函数 WordPress使用了下面几个函数来方便语言本地化. __() _e() _x() _ex() _n() 以上所列的函数是用来包含所需翻译的字符串的,根据字符串的不同参数和输出类型,需要使 ...

  9. typedef和#define的用法与区别

    typedef和#define的用法与区别 typedef和#define的用法与区别 一.typedef的用法 在C/C++语言中,typedef常用来定义一个标识符及关键字的别名,它是语言编译过程 ...

随机推荐

  1. 20181113-3 Beta阶段贡献分配规则

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2382 在新成员加入后,我们经过商讨,决定沿用alpha阶段贡献分分配规则 ...

  2. PSP DAILY软件功能说明书

    PSP DAILY软件功能说明书 一.开发背景 你在完成了一周的软件工程作业后,需要提交一个PSP图表,里面有4项,如下所示: 1.本周PSP表格,包含每项任务的开始.中断.结束.最终时间,格式如下: ...

  3. 软件工程第七周psp

    1.PSP表格 类别 任务 开始时间 结束时间 中断时间 delta时间 立会 汇报昨天的成绩,分配任务,部署计划 10月27日18:00 10月27日18:36 0 36分钟 准备工作 查阅有关资料 ...

  4. c# webBrowser清除缓存问题

    1.webBrowser的浏览器为ie. 2.通过清除ie缓存即可. 3.代码调用如下: public enum ShowCommands : int { SW_HIDE = , SW_SHOWNOR ...

  5. Jquery获取属性值

    jq获取某个标签内的属性值:$("#TeamPerformanceYearUl li:eq(0)").attr('data') jq获取li或者td第一个属性(索引值从零开始)$( ...

  6. 在Wmware虚拟机上如何检查是否CPU支持虚拟化 和 加载kvm模块

    在vm虚拟机中 修改 虚拟机==>设置==> 处理器==>虚拟化引擎(选第二项:虚拟化Intel VT-x/EPT 或 AMD-V/RVI(V) )     # vmx或svm :表 ...

  7. 结对编程--fault,error,failure的程序设计

    一.结对编程内容: 1.不能触发Fault. 2.触发Fault,但是不触发Error. 3.触发Error,但不触发Failure. 二.结对编程人员 1.周浩,周宗耀 2.结对截图: 三.结对项目 ...

  8. selenium 概念及练习 !

    1.selenium中如何判断元素是否存在? 2.selenium中hidden或者是display = none的元素是否可以定位到? 3.selenium中如何保证操作元素的成功率?也就是说如何保 ...

  9. 自签证书 doesn't match any of the subject alternative names

    出现这个的原因是https中的域名或者IP,与证书中登记的不一致. 如果是自签证书的话,可以根据具体需要重新生成证书. 还有一种解决方案是在java中跳过这个检查. 绕过检查分两类,一个是绕过证书在C ...

  10. scss在ide的命令参数

    %FileName% ../css/%FileBaseName%.css --sourcemap=none –style expanded