JavaScript之Array的map()函数

最近在学习JavaScript，var new_array = array.map(func)的一点笔记。

看API

map()函数的一句话介绍：
The map() method creates a new array with the results of calling a provided function on every element in this array.

看一个示例：

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]

再看语法：

Syntax
Edit

var new_array = arr.map(callback[, thisArg])    //[,thisArg]表示可选，代指执行callback的this

Parameters

callback
    Function that produces an element of the new Array, taking three arguments:

    currentValue
        The current element being processed in the array.
    index
        The index of the current element being processed in the array.
    array
        The array map was called upon.

thisArg
    Optional. Value to use as this when executing callback. 

Return value

A new array with each element being the result of the callback function.

来自：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

看问题

使用map函数，将字符串数组转为int数组。结果得到[1,NaN,NaN]。

var arrs = [‘1’, ‘2’, ‘3’];
var r = arrs.map(parseInt);
alert(r);//1,NaN,NaN

解决

function  parseInt_base10(s)
{
    return parseInt(s,10);
}

r = arrs.map(parseInt_base10,arrs);
//或者r = arrs.map(parseInt_base10);
alert(r);//[1,2,3]

分析

/*

The parseInt() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).
Syntax
Edit

parseInt(string, radix);

Parameters

string
    The value to parse. If the string argument is not a string, then it is converted to a string (using the ToString abstract operation). Leading whitespace in the string argument is ignored.
radix
    An integer between 2 and 36 that represents the radix (the base in mathematical numeral systems) of the above mentioned string. Specify 10 for the decimal numeral system commonly used by humans. Always specify this parameter to eliminate reader confusion and to guarantee predictable behavior. Different implementations produce different results when a radix is not specified, usually defaulting the value to 10.

Return value

An integer number parsed from the given string. If the first character cannot be converted to a number, NaN is returned.




看了好多评论 觉得解释的都不够详细，新手很难能看懂，我也来浅谈一下最后一题小明的疑惑，要解决这个问题，首先我们得先了解一下map和parseInt函数，map函数需要接3个参数:
currentValue    第一个参数，数组中当前被传递的元素。
index   第二个参数，数组中当前被传递的元素的索引。
array   第三个参数，调用 map 方法的数组。

parseInt()函数可解析一个字符串，并返回一个整数。
语法parseInt(string, radix)；
string    必需。要被解析的字符串。
radix    可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。
如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。
如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

在知道了这两个函数的语法之后，再来看看小明的写法。

var arr = ['1', '2', '3'];
var r;
r = arr.map(parseInt);

因为map()接收三个参数，parseInt()接收两个参数，所以map的第三个参数被parseInt忽略了，这个不难理解，但是要注意了，map的第二个参数并没有被忽略。现在来分析下程序，假如现在执行arr的第一个元素，即'1';对应到map参数可知，此时传入map的第一个参数即为被传递的元素'1';第二个参数即为其索引0；
这两个参数被传入parseInt中，即parseInt('1', 0);对应到上述parsent的参数规则可知，此时结果为1；
同理，parseInt('2',1) //radix小于2 返回NaN
parseInt('3',2) //3是非法的二进制数，返回NaN


It is common to use the callback with one argument (the element being traversed). Certain functions are also commonly used with one argument, even though they take additional optional arguments. These habits may lead to confusing behaviors.

// Consider:
['1', '2', '3'].map(parseInt);
// While one could expect [1, 2, 3]
// The actual result is [1, NaN, NaN]

// parseInt is often used with one argument, but takes two. The first is an expression and the second is the radix. To the callback function, Array.prototype.map passes 3 arguments: 
// the element, the index, the array
// The third argument is ignored by parseInt, but not the second one,
// hence the possible confusion. See the blog post for more details

function returnInt(element) {
  return parseInt(element, 10);
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// Actual result is an array of numbers (as expected)

// A simpler way to achieve the above, while avoiding the "gotcha":
['1', '2', '3'].map(Number); // [1, 2, 3]
*/