JS map()方法:對陣列的每個元素呼叫指定的回撥函數

2020-07-16 10:05:01
JavaScript map() 方法可以對陣列的每個元素呼叫指定的回撥函數,並返回包含結果的陣列。具體用法如下:

array.map(callbackfn[, thisArg]);

引數說明:
  • array:必需引數,一個陣列物件。
  • callbackfn:必需引數,最多可以接收三個引數的函數。對於陣列中的每個元素,map() 方法都會呼叫 callbackfn 函數一次。
  • thisArg:可選引數,callbackfn 函數中的 this 關鍵字可參照的物件。如果省略 thisArg,則 undefined 將用作 this 值。

map() 方法將返回一個新陣列,其中每個元素均為關聯的原始陣列元素的回撥函數返回值。對於陣列中的每個元素,map() 方法都會呼叫 callbackfn 函數一次(採用昇序索引順序),並不會為陣列中缺少的元素呼叫回撥函數。

除了陣列物件之外,map() 方法可由具有 length 屬性,且具有已按編製索引的屬性名的任何物件使用,如 Arguments 引數物件。

回撥函數的語法如下:

function callbackfn (value, index, array);

使用者可以使用最多三個引數來宣告回撥函數。回撥函數的引數說明如下:
  • value:陣列元素的值。
  • index:陣列元素的數位索引。
  • array:包含該元素的陣列物件。

map() 方法不直接修改原始陣列,但回撥函數可能會修改它。在 map 方法啟動後修改陣列物件所獲得的結果說明如表所示。

回撥函數修改陣列的影響
map 方法啟動後的條件 元素是否傳遞給回撥函數
在陣列的原始長度之外新增元素
新增元素以填充陣列中缺少的元素 是,如果該索引尚未傳遞給回撥函數
元素已更改 是,如果該元素尚未傳遞給回撥函數
從陣列中刪除元素 否,除非該元素已傳遞給回撥函數

範例1

下面範例使用 map() 方法對映陣列,把陣列中每個元素的值平方,乘以 PI 值,把返回的圓的面積值作為新陣列的元素值,最後返回這個新陣列。
function f (radius) {
    var area = Math.PI * (radius * radius);
    return area.toFixed(0);
}
var a = [10,20,30];
var a1 = a.map(f);
console.log(a1);

範例2

下面範例使用 map() 方法對映陣列,把陣列中每個元素的值除以一個閾值,然後返回這個新陣列其中回撥函數和閾值都以物件的屬性存在,通過這種方法演示如何在 map 中使用 thisArg 引數。
var obj = {
    val : 10,
    f : function (value) {
        return value % this.val;
    }
}
var a = [6,12,25,30];
var a1 = a.map(obj.f, obj);
console.log(a1);  //6,2,5,0

範例3

下面範例演示如何使用 JavaScript 內建方法作為回撥函數。
var a = [9, 16];
var a1 = a.map(Math.sqrt);
console.log(a1);  //3,4

範例4

下面範例演示如何使用 map 方法應用於一個類陣列。在範例中通過動態呼叫的方法(Call)把 map 作用於一個字串上,則 map 將遍歷字串中每個字元,並呼叫回撥函數 threeChars,把每個字元左右 3 個字元擷取出來,對映到一個新陣列中。
function f (value, index, str) {
    return str.substring(index - 1, index + 2);
}
var s = "Thursday";
var a = [].map.call(s, f);
console.log(a);  //Th,Thu,hur,urs,rsd,sda,day,ay