JavaScript map()方法

admin發表於2018-09-05

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);

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/05/214417m8v8fkwlgf77lzb8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下:

(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);

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/05/214532z2olln22lbvuuw66.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

為回撥函式傳遞了第二個引數,它可以規定回撥函式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));

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/05/214608m9qceajtm16aeetm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

相關文章