为什么 [].map 带有大括号会改变它的工作方式？

Question

所以，基本上我有这个：

Array.prototype.toString = function() {
    return ("[" + this.map(thing => thing = '"' + thing + '"').join(', ') + "]")
}

当我调用它时：

['foo', 'bar'].toString()

返回

"["foo", "bar"]"

现在，这将完美运行。这个（带大括号）似乎不像我想要的那样工作：

Array.prototype.toString = function() {
    return ("[" + this.map(thing => {thing = '"' + thing + '"'}).join(', ') + "]")
}

它返回：

[, ]

那么有人可以告诉我区别吗？我不知道为什么 [].map 会这样工作。

Answer 1

这与数组或 map 方法无关。这完全是关于箭头函数的工作原理。

当您在右侧给出单个语句时，该语句将在函数内部进行评估并返回。

foo => bar

相当于：

function (foo) { return bar; }

当你把一个块放在右手边时，那个块只是因为函数体。

foo => { bar }

相当于：

function (foo) { bar; }

在第二个版本中，您没有return 语句，因此函数返回undefined。

如果使用块，则需要明确返回语句。

foo => { return bar; }

Answer 2

你没有在arrow function的块语句中返回一些东西

() => {
    // code
    return 42; // return is required in block statment
}


() => 42 // return is implicit

Array.prototype.toString = function() {
    return ("[" + this.map(thing => { return thing = '"' + thing + '"'}).join(', ') + "]")
};

console.log(['foo', 'bar'].toString())

较短，未分配给thing

Array.prototype.toString = function() {
    return ("[" + this.map(thing => '"' + thing + '"').join(', ') + "]")
};

console.log(['foo', 'bar'].toString())

Answer 3

如果没有大括号（或使用常规的弯括号），它会直接返回一个值，而大括号会执行多行代码。如果您希望此代码返回一个值，则必须在这些花括号内显式返回它。

Answer 4

因为当你添加{}时，它会将它从一个纯函数式箭头函数变成一个普通函数，只是它有箭头语法。如果你想从这里返回一个值，你需要在最后显式写return thing;：

Array.prototype.toString = function() {
    return ("[" + this.map(thing => {thing = '"' + thing + '"'; return thing;}).join(', ') + "]")
}

纯箭头函数起作用的原因是因为语句thing = '"' + thing + '"'实际上返回了结果，因此是函数的返回值。无需重新分配 thing 即可获得完全相同的结果：

Array.prototype.toString = function() {
    return ("[" + this.map(thing => '"' + thing + '"').join(', ') + "]")
}