map, foreach, for的用法区别

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手动添加这个方法
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值