为什么在[].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会像这样工作。

- Chromata

---

如果你不相信我，可以尝试在Chrome浏览器控制台中执行它。 - Chromata

当使用花括号时，必须使用 return，否则结果将会是未定义的。 - str

为什么在第二个里面有赋值操作？ - Nina Scholz

Answer 1

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

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

foo => bar

等价于：

function (foo) { return bar; }

当您在右侧放置一个块时，该块仅成为函数主体。

foo => { bar }

等价于：

function (foo) { bar; }

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

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

foo => { return bar; }

- Quentin

---

我不知道是否应该将这个标记为我的回答还是Rhumborl的回答。 - Chromata

Answer 2

在箭头函数的块语句中，你不能返回任何内容。

() => {
    // 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())

- Nina Scholz

---

如果他想使用隐式返回，他应该摆脱括号，并将所有内容放在一行中，就像他所做的那样。 - Belmin Bedak

Answer 3

没有花括号（或使用普通的圆括号），它会直接返回一个单一的值，而花括号则执行多行代码。如果你想让这段代码返回一个值，你必须在这些花括号中显式地返回它。

- Jayce444

---

基本上，我需要添加一个返回语句吗？ - Chromata

是的。你可以在花括号里放置尽可能多的代码，但最终必须返回一些东西。 - Jayce444

@DaDerpFace 这是一个选择，第二个选择是去掉代码块括号但仍然将整个表达式放在一行中，这样return关键字就会被隐含 - 这只适用于ES2015中的箭头函数。 - Belmin Bedak

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(', ') + "]")
}

- Rhumborl

---

() => {} 仍然是一个箭头函数，具有所有箭头函数的特性，但不会自动返回表达式。 - Nina Scholz