两段具有相同目的和想法的JavaScript代码会产生不同的效果

Question

`

function string2int(s) {
var arr = [];
for (let x of s) {
arr.push(x);
}

arr.map(function (x) {return x*1;});
var result = arr.reduce(function (x, y) {return x*10 + y;});
alert(result);
}
string2int('123456');

`

`

function string2int(s) {
var arr = [];
for (let x of s) {
arr.push(x*1);
}

var result = arr.reduce(function (x, y) {return x*10 + y;});
alert(result);
}
string2int('123456');

`

正如函数名称stringint的名称所示，这两段代码的目的都是将字符串"123456"转换为int 123456，其想法是首先将"123456’转换为arr([1'，'2'，'3'，'4'，'5'，'6'])，然后使用每个字符乘以1将数组arr中的元素转换为int，最后使用reduce函数获得预期的int 1234156。然而，事实证明，只有第二段代码工作正常，第一段代码将输出结果10203040506。

我添加了警报(arr)；在arr.map(函数(x){return x*1；})下；在第一段代码中，发现即使在执行了map函数之后，数组arr中的元素仍然是int类型，为什么会这样？此外，在这种情况下，10203040506的最终结果如何？

Answer 1

第一部分的问题是使用map方法，该方法返回一个新数组，并且永远不会更改原始的arr数组。通过这样做，arr中的项将仍然是"string"类型，以及变量result。您可以通过将其添加到第一个函数的最后一行来验证这一点：

console.log(typeof result);

为了让你的代码工作，你需要为map方法声明一个新的变量来返回，然后对它使用reduce方法。示例：

let newArr = arr.map(function (x) {return x*2;});
var result = newArr.reduce(function (x, y) {return x*10 + y;});

编辑：或者，您可以使用forEach方法而不是映射，并且原始数组arr将被更改。

Answer 2

第一个函数无法将数字(表示数字的字符串)转换为int。侵入性最小的修复方法是在用一元+将数字推送到arr时进行转换。。。

function string2int(s) {
var arr = [];
for (let x of s) {
arr.push(+x);    // convert to int here
}

// arr.map(function (x) {return x*1;});  // this does nothing
var result = arr.reduce(function (x, y) {return x*10 + y;});
alert(result);
}
string2int('123456');

它可以通过实现split('')完成第一个循环的工作来改进，并且可以在减少循环中实现从数字到int的转换。。。

function string2int(s) {
return s.split('').reduce((a, digit) => a*10 + +digit, 0)
}
alert(string2int('123456'));