Javascript中Array.prototype.map()詳解

2019-11-20 14:00:16

字體：大中小

來源：轉載

供稿：網友

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

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 < ilen; 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?？聪旅娴妮敵鼋Y果：

復制代碼代碼如下:

//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) is used, but not all browsers support 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 utility function.

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

上一篇：Javascript 構造函數詳解

下一篇：javascript數組詳解