Javascript中Array.prototype.map()詳解

2019-11-20 14:00:16

字體：大中小

供稿：網(wǎng)友

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

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)化呢，幸運(yùn)的是Ecmascript 5給我們提供了一個(gè)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)心每個(gè)元素自身的實(shí)現(xiàn)邏輯。關(guān)于map方法詳情請(qǐng)戳這里。

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

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

callback 函數(shù)會(huì)被自動(dòng)傳入三個(gè)參數(shù)：數(shù)組元素，元素索引，原數(shù)組本身。

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

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

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

2.map實(shí)例：

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

//實(shí)例一：字符串上調(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);

上例演示了在一個(gè)String上使用map方法獲取字符串中每個(gè)字符所對(duì)應(yīng)的 ASCII 碼組成的數(shù)組。請(qǐng)注意看打印的console.log(arr)打印的結(jié)果。

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

//實(shí)例二：下面的操作結(jié)果是什么？
var result = ["1", "2", "3"].map(parseInt);
//Outputs: [1, NaN, NaN] 
console.log(result);

也許你會(huì)有疑問，為什么不是[1,2,3]呢？我們知道parseInt方法可接收兩個(gè)參數(shù)，第一個(gè)參數(shù)為需要轉(zhuǎn)換的值，第二個(gè)參數(shù)為進(jìn)制數(shù)，不了解的可以戳這里。當(dāng)我們使用map方法的時(shí)候，callback函數(shù)接收三個(gè)參數(shù)，而parseInt最多只能接收兩個(gè)參數(shù)，以至于第三個(gè)參數(shù)被直接舍棄，與此同時(shí)，parseInt把傳過來的索引值當(dāng)成進(jìn)制數(shù)來使用.從而返回了NaN。看下面的輸出結(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));

后面兩個(gè)很容易理解，但是前兩個(gè)為什么返回1呢？為了解釋這個(gè)問題，我們看看官方的描述：
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).
在第三點(diǎn)中當(dāng)string為其他值時(shí)，進(jìn)制默認(rèn)為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.

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

上一篇：Javascript 構(gòu)造函數(shù)詳解

下一篇：javascript數(shù)組詳解