forEach、for+i、map的用法及區別

標籤：prototype   優勢   為什麼   cin   count   屬性   回調   ++   i++   

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只有在Firefox和Google瀏覽器中Array有這個方法，在IE中就米有，需要用prototype手動添加這個方法

forEach、for+i、map的用法及區別