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. rest_framework之渲染器

    渲染器简介 什么是渲染器 根据 用户请求URL 或 用户可接受的类型,筛选出合适的 渲染组件. 渲染器的作用 序列化.友好的展示数据 渲染器配置 首先要在settins.py中将rest_framew ...

  2. LeetCode 888. Fair Candy Swap(C++)

    题目: Alice and Bob have candy bars of different sizes: A[i] is the size of the i-th bar of candy that ...

  3. 配置EditPlus编辑器使其成为Python的编辑、执行环境

    1.添加Python群组 运行EditPlus,选择工具→配置用户工具进入参数设置框. 单击添加工具→应用程序.菜单文字输入python,命令为Python的安装路径,参数输入 $(FileName) ...

  4. lintcode-422-最后一个单词的长度

    422-最后一个单词的长度 给定一个字符串, 包含大小写字母.空格' ',请返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 注意事项 一个单词的界定是,由字母组成,但不包含任何的空 ...

  5. lintcode395-硬币排成线 II

    395-硬币排成线 II 有 n 个不同价值的硬币排成一条线.两个参赛者轮流从左边依次拿走 1 或 2 个硬币,直到没有硬币为止.计算两个人分别拿到的硬币总价值,价值高的人获胜. 请判定 第一个玩家 ...

  6. C++ Primer Plus学习:第二章

    C++入门第二章:开始学习C++ 进入C++ 首先,以下是一个C++程序: //myfirst.cpp 显示一行文字 #include<iostream> //预处理器编译指令 int m ...

  7. 第6题 ZigZag转换

    题目描述如下: The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of ro ...

  8. vue-cli3使用 DllPlugin 实现预编译,提升构建速度

    在项目打包上有两个目标:减少打包代码体积和加快打包速度 1. 减少打包体积: (1)对于用的比较少的库,可以去掉(我去掉了jquery以及lodash),用到的地方,参考源码自己写 (2)非用不可的又 ...

  9. PHP对象的复制

    对象的复制(克隆) $obj1  =  new  A(); $obj1->p1 = 11; $obj2  = $obj1; //值传递 //则,现在有几个对象?——1个对象! 当然: $obj3 ...

  10. 第120天:移动端-Bootstrap基本使用方法

    一.Bootstrap使用 1.搭建Bootstrap页面骨架及项目目录结构 ``` ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ···· ...