React中用map处理数字为何是字符串拼接而非数值相加？

为什么会得到字符串拼接结果？ #

1. map方法本身无问题：你的代码map((item) => + parseInt(item))已经成功将原字符串数组["8","8","12","1","7","4","2"]转换成了数字数组[8, 8, 12, 1, 7, 4, 2]。
2. 字符串拼接的根源：你仅完成了类型转换，但未执行求和操作。后续若直接将这个数字数组当作单个值使用（比如直接输出、或与其他字符串拼接），数组在隐式转换为字符串时，可能被处理成无分隔的元素拼接，最终得到类似88121743的结果。
3. 冗余的类型转换：+ parseInt(item)是多余写法——parseInt(item)已将字符串转为数字，前面的+不会改变结果，直接用+item就能实现字符串转数字的效果，更简洁。

如何用快捷方式实现数值相加？ #

要实现求和，需使用数组的累加专用方法reduce，有两种简洁写法：

写法1：先转类型再求和 #

let count = response.data.metrics.data
  .map(item => +item)
  .reduce((total, currentNum) => total + currentNum, 0);

写法2：合并类型转换与求和（更精简） #

let count = response.data.metrics.data.reduce((total, item) => total + +item, 0);

这里的+item负责将每个字符串元素转为数字，reduce从初始值0开始累加所有数字，最终得到预期的42。

内容的提问来源于stack exchange，提问作者Zak