JavaScript map()

map方法遍歷陣列中的每一個元素，且對其執行一次回撥函式。

返回一個陣列，新陣列元素與原陣列元素一一對應，值是原陣列元素執行回撥函式後的返回值。

更多內容可以參閱JavaScript Array 陣列一章節。

ES5新增此方法。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
array.map(callbackfn[, thisArg])

引數解析：

（1）.callbackfn：必需，回撥函式，此函式會針對陣列的每一個元素執行一次。

          回撥函式可以有三個引數：

            第一個引數是當前陣列元素值。

            第二個引數是當前陣列元素的索引。

            第三個引數就是陣列物件本身。

（2）.thisArg：可選，規定回撥函式中this所指向的物件，省略，this指向window物件。

瀏覽器相容：

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.火狐瀏覽器支援此方法。

（5）.opera瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function getArea(radius){
  let area=Math.PI*(radius*radius);
  return area.toFixed(0);
}
let rArray=[2,5,7,12];
let areas=rArray.map(getArea);
console.log(areas);

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.map方法對陣列元素以索引從小到大的順序逐個對其執行回撥函式。

（2）.回撥函式針對陣列元素執行完畢後會返回一個值。

（3）.回撥函式返回的值作為新陣列的元素，順序與原陣列元素順序一一對應。

那麼上面的程式碼就是以原來陣列元素作為半徑，並求出對應的圓的面積（回撥函式返回值）。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let obj={
   pi:Math.PI
}

function getArea(radius){
  let area=this.pi*(radius*radius);
  return area.toFixed(0);
}
let rArray=[2,5,7,12];
let areas=rArray.map(getArea,obj);
console.log(areas);

程式碼執行效果截圖如下：

為回撥函式傳遞了第二個引數，它可以規定回撥函式this所指向的物件。

預設情況下回撥函式的this指向window物件，現在它指向obj物件，程式碼的執行結果也證明了這一點。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function callback(ele,idnex,arr){
  console.log(ele,idnex,arr);
}
let arr=[2,5,7,12];
console.log(arr.map(callback));

程式碼執行效果截圖如下：

上面程式碼目錄就是演示回撥函式的三個引數。

由於回撥函式沒有規定返回值，那麼它的預設返回值就是undefined，那麼新陣列的元素都是undefined。