forEach與map

紫Young菌發表於2018-04-28

1.forEach

forEach是ECMA5中Array新方法中最基本的一個，就是遍歷，迴圈。例如下面這個例子：

  • [1, 2 ,3, 4].forEach(alert); 等同於下面這個for迴圈
   var array = [1, 2, 3, 4];
    for (var k = 0, length = array.length; k < length; k++) {
    alert(array[k]);
    }
複製程式碼

Array在ES5新增的方法中，引數都是function型別，預設有傳參，forEach方法中的function回撥支援3個引數，第1個是遍歷的陣列內容；第2個是對應的陣列索引，第3個是陣列本身。 因此，我們有：

[].forEach(function(value, index, array) {
   // ...
 });
複製程式碼

2.map

這裡的map不是“地圖”的意思，而是指“對映”。[].map(); 基本用法跟forEach方法類似： array.map(callback,[ thisObject]); callback的引數也類似：

   [].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以下的瀏覽器還不支援，可以從Array原型擴充套件可以實現以上全部功能，例如forEach方法:

   if (typeof Array.prototype.forEach != "function") {
     Array.prototype.forEach = function() {
       /* 實現 */
     };
   }
複製程式碼

相關文章