Javascript中Array.prototype.map()详解

在我们日常开发中，操作和转换数组是一件很常见的操作，下面我们来看一个实例：

代码如下:
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方法详情请戳这里。