使用map出错的某个栗子

79 阅读1分钟

实现将数组每一项转换成number类型

let strArr = ['2', '4', '7']
let numArr = strArr.map(parseInt);
console.log(numArr);

期待的结果是: [2, 4, 7], 实际上返回的结果[2, NaN, NaN],

代码里面 parseIntmapcallbackmap 的参数 callback 有3个参数:

  1. currentValue 当前项;
  2. index 当前项索引,
  3. array map调用的数组,

此时 parseInt 接收到的参数 parseInt(currentValue, index);

我们再参考下 parseInt mozilla文档说明, parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数, radix 是2-36之间的整数,表示被解析字符串的基数。

问题就出在 parseInt 函数的 第二个 参数: radix,

radix: 从 2 到 36,表示字符串的基数。例如指定 16 表示被解析值是十六进制数。请注意,10不是默认值!文章后面的描述解释了当参数 radix 不传时该函数的具体行为。

我们想得到的结果是转换成十进制数, 那么 radix 应该是 10, 但是callback 接收的是 数组的 index

// 如果 `radix` 是 `undefined`、`0`或未指定的, 且第一个入参 不是 以 `0x` | `0X` | `0` 开头
// `radix` 默认为 10
// 如果第一个字符不能转换为数字,`parseInt`会返回 `NaN`

parseInt('2', 0); -> 2
parseInt('4', 1); -> NaN
parseInt('7', 2); -> NaN

解决方案:

function parseIntRadix_10(str) {
  return parseInt(str, 10);
}

let strArr = ['2', '4', '7']
let numArr = strArr.map(parseIntRadix_10);
console.log(numArr);

结果: [2, 4, 7]

其实地上本没有路, 走的人多了, 小区里的草坪就秃了!