Javascript中Array.prototype.map()詳解_基礎知識-js教程-PHP中文網

Javascript中Array.prototype.map()詳解_基礎知識

WBOY

發布： 2016-05-16 16:33:08

原創

1160 人瀏覽過

在我們日常開發中，操作和轉換數組是一件很常見的操作，下面我們來看一個實例：

var desColors = [],
    srcColors = [
        {r: 255, g: 255, b: 255 }, // White
        {r: 128, g: 128, b: 128 }, // Gray
        {r: 0,   g: 0,   b: 0   } // Black
    ];

for (var i = 0, ilen = srcColors.length; i     var color = srcColors[i],
        format = function(color) {
            return Math.round(color / 2);
        };

    desColors.push( {
        r: format(color.r),
        g: format(color.g),
        b: format(color.b)
    });
}

// Outputs:
// [
//    {r: 128, g: 128, b: 128 },
//    {r: 64, g: 64, b: 64 },
//    {r: 0,   g: 0,   b: 0   }
// ];
console.log(desColors);

從上例可以看出，所有的操作重複率都比較高，如何來優化呢，幸運的是Ecmascript 5給我們提供了一個map方法，我們可以利用它來優化上例：

複製程式碼程式碼如下:

var srcColors = [

        {r: 255, g: 255, b: 255 }, // White

        {r: 128, g: 128, b: 128 }, // Gray

        {r: 0,   g: 0,   b: 0   }  // Black

    ],

    desColors = srcColors.map(function(val) {

        var format = function(color) {

            return Math.round(color/2);

        };

        return {

            r: format(val.r),

            g: format(val.g),

            b: format(val.b)

        }

    });

// Outputs:

// [

//    {r: 128, g: 128, b: 128 },

//    {r: 64,  g: 64,  b: 64  },

//    {r: 0,   g: 0,   b: 0   }

// ];

console.log(desColors);

從上例看以看出，我們使用map取代掉了for迴圈部分，因此只需要關心每個元素本身的實作邏輯。關於map方法詳情請戳這裡。

1.map基本定義：
array.map(callback[, thisArg]);

map 方法會給原數組中的每個元素都依序呼叫一次 callback 函數。 callback 每次執行後的回傳值會組合起來形成一個新數組。 callback 函數只會在有值的索引上被呼叫；那些從來沒被賦過值或使用 delete 刪除的索引則不會被呼叫。

callback 函數會自動傳入三個參數：陣列元素，元素索引，原始數組本身。

如果 thisArg 參數有值，則每次 callback 函數被呼叫的時候，this 都會指向 thisArg 參數上的這個物件。如果省略了 thisArg 參數,或賦值為 null 或 undefined，則 this 指向全域物件。

map 不修改呼叫它的原始數組本身（當然可以在 callback 執行時改變原數組）。

當一個陣列執行 map 方法時，陣列的長度在呼叫第一次 callback 方法之前就已經確定。在 map 方法整個運行過程中，不管 callback 函數中的操作給原始數組是新增還是刪除了元素。 map 方法都不會知道，如果數組元素增加，則新增加的元素不會被 map 遍歷到，如果數組元素減少，則 map 方法還會認為原始數組的長度沒變，從而導致數組訪問越界。如果陣列中的元素被改變或刪除，則他們被傳入 callback 的值是 map 方法遍歷到他們那一刻時的值。

2.map實例：

複製程式碼程式碼如下:

//實例一：在字串上呼叫map方法

var result = Array.prototype.map.call("Hello world", function(x, index, arr) {

//String {0: "H", 1: "e", 2: "l", 3: "l", 4: "o", 5: " ", 6: "w", 7: "o" , 8: "r", 9: "l", 10: "d", length: 11}

    console.log(arr);

    return x.charCodeAt(0);

});

//Outputs: [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100] 

console.log(result);

上例示範了在一個String上使用map方法取得字串中每個字元所對應的 ASCII 碼組成的陣列。請注意看列印的console.log(arr)列印的結果。

複製程式碼程式碼如下:

//實例二：下面的操作結果是什麼？ 

var result = ["1", "2", "3"].map(parseInt);

//Outputs: [1, NaN, NaN] 

console.log(result);

也許你會有疑問，為什麼不是[1,2,3]呢？我們知道parseInt方法可以接收兩個參數，第一個參數為需要轉換的值，第二個參數為進位數，不了解的可以戳這裡。當我們使用map方法的時候，callback函數接收三個參數，而parseInt最多只能接收兩個參數，以至於第三個參數被直接捨棄，同時，parseInt把傳過來的索引值當成進制數來使用.從而返回了NaN。看下面的輸出結果：

複製程式碼程式碼如下:

//Ouputs: 1

console.log(parseInt("1", 0));

//Ouputs: 1

console.log(parseInt("1", undefined));

//Ouputs: NaN

console.log(parseInt("2", 1));

//Ouputs: NaN

console.log(parseInt("3", 2));

後面兩個很容易理解，但前兩個為什麼回1呢？為了解釋這個問題，我們來看看官方的描述：
If radix is undefined or 0 (or absent), JavaScript assumes the following:
a) If the input string begins with “0x” or “0X”, radix is 16 (hexadecimal) and the remainder of the string is parsed.
b) If the input string begins with “0″, radix is eight (octal) or 10 (decimal). Exactly which radix is chosen is implementation-dependent. ECMAScript 5 specifies that 10 (decimal) n sed, bromal) sup ws brocimal) sup n bromal) 3 n bromal butis n bromal) 30us this yet. For this reason always specify a radix when using parseInt.
c) If the input string begins with any other value, the radix is 10 (decimal).
在第三點中當string為其他值時，進位預設為10。

那我們要如何修改才能讓上例正常輸出呢？看下例：

複製程式碼程式碼如下:

var result = ["1", "2", "3"].map(function(val) {

    return parseInt(val, 10);

});

//Outputs: [1, 2, 3] 

console.log(result);

3.map方法的相容性：
map方法在IE8及以下瀏覽器不支持，要相容於舊版的瀏覽器，可以:

a) Don't use map.b) Use something like es5-shim to make older IE's support map.c) Use the _.map method in Underscore or Lodash for an equivalent. >

以上就是對map方法的理解，希望對初學者有所幫助，文中不妥之處，還望斧正！