forEachfor+imap的用法及区别

Posted 2020-08-28

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