快捷導(dǎo)航

Javascript中Array.prototype.map()詳解

更新時間：2014年10月22日 11:27:33 投稿：hebedich

map 方法會給原數(shù)組中的每個元素都按順序調(diào)用一次 callback 函數(shù)。callback 每次執(zhí)行后的返回值組合起來形成一個新數(shù)組。 callback 函數(shù)只會在有值的索引上被調(diào)用；那些從來沒被賦過值或者使用 delete 刪除的索引則不會被調(diào)用。

在我們?nèi)粘ｉ_發(fā)中，操作和轉(zhuǎn)換數(shù)組是一件很常見的操作，下面我們來看一個實例：

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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循環(huán)部分，從而只需要關(guān)心每個元素自身的實現(xiàn)邏輯。關(guān)于map方法詳情請戳這里。

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

map 方法會給原數(shù)組中的每個元素都按順序調(diào)用一次 callback 函數(shù)。callback 每次執(zhí)行后的返回值組合起來形成一個新數(shù)組。 callback 函數(shù)只會在有值的索引上被調(diào)用；那些從來沒被賦過值或者使用 delete 刪除的索引則不會被調(diào)用。

callback 函數(shù)會被自動傳入三個參數(shù)：數(shù)組元素，元素索引，原數(shù)組本身。

如果 thisArg 參數(shù)有值，則每次 callback 函數(shù)被調(diào)用的時候，this 都會指向 thisArg 參數(shù)上的這個對象。如果省略了 thisArg 參數(shù),或者賦值為 null 或 undefined，則 this 指向全局對象。

map 不修改調(diào)用它的原數(shù)組本身（當然可以在 callback 執(zhí)行時改變原數(shù)組）。

當一個數(shù)組運行 map 方法時，數(shù)組的長度在調(diào)用第一次 callback 方法之前就已經(jīng)確定。在 map 方法整個運行過程中，不管 callback 函數(shù)中的操作給原數(shù)組是添加還是刪除了元素。map 方法都不會知道，如果數(shù)組元素增加，則新增加的元素不會被 map 遍歷到，如果數(shù)組元素減少，則 map 方法還會認為原數(shù)組的長度沒變，從而導(dǎo)致數(shù)組訪問越界。如果數(shù)組中的元素被改變或刪除，則他們被傳入 callback 的值是 map 方法遍歷到他們那一刻時的值。

2.map實例：

復(fù)制代碼代碼如下:

//實例一：字符串上調(diào)用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方法獲取字符串中每個字符所對應(yīng)的 ASCII 碼組成的數(shù)組。請注意看打印的console.log(arr)打印的結(jié)果。

復(fù)制代碼代碼如下:

//實例二：下面的操作結(jié)果是什么？

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

//Outputs: [1, NaN, NaN] 

console.log(result);

也許你會有疑問，為什么不是[1,2,3]呢？我們知道parseInt方法可接收兩個參數(shù)，第一個參數(shù)為需要轉(zhuǎn)換的值，第二個參數(shù)為進制數(shù)，不了解的可以戳這里。當我們使用map方法的時候，callback函數(shù)接收三個參數(shù)，而parseInt最多只能接收兩個參數(shù)，以至于第三個參數(shù)被直接舍棄，與此同時，parseInt把傳過來的索引值當成進制數(shù)來使用.從而返回了NaN?？聪旅娴妮敵鼋Y(jié)果：

復(fù)制代碼代碼如下:

//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。

那么我們?nèi)绾涡薷牟拍苁股侠］敵瞿?？看下例?/p>

復(fù)制代碼代碼如下:

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方法的理解，希望對初學者有所幫助，文中不妥之處，還望斧正！

您可能感興趣的文章: