箭头函数在没有花括号的情况下运行完美。添加了花括号{ return }，它会中断 [重复]答案

【问题标题】：Arrow function runs perfect without curly braces. Added curly braces{ return } and it breaks [duplicate]箭头函数在没有花括号的情况下运行完美。添加了花括号{ return }，它会中断 [重复]
【发布时间】：2019-06-18 20:58:49
【问题描述】：

我通过使用不带花括号的箭头函数将数据从我的对象完美呈现到 DOM。

我尝试在相同的箭头函数之后添加花括号。 DOM 不会渲染任何数据。

CODE WORKS WITHOUT CURLY BRACES AFTER ARROW FUNCTION

function displayMatches () {
    const matchArray = findMatches(this.value, cities)
    console.log(matchArray)
    const html = matchArray.map(place => 
        `<li>
            <span class="name">${place.city}, ${place.state}</span>
            <span class="population">${place.population}</span>
        </li>`
    ).join('')
    suggestion.innerHTML = html

}


THE SAME CODE BREAKS WITH CURLY BRACES AFTER ARROW FUNCTION 

function displayMatches () {
    const matchArray = findMatches(this.value, cities)
    console.log(matchArray)
    const html = matchArray.map(place => {
        return
        `<li>
            <span class="name">${place.city}, ${place.state}</span>
            <span class="population">${place.population}</span>
        </li>`
    }).join('')
    suggestion.innerHTML = html

}

【问题讨论】：

标签： javascript

【解决方案1】：

您正在成为分号插入规则中“陷阱”的受害者。在return 之后，如果表达式不在同一行开始，则假定使用分号。

如果你改变你的功能如下，它应该可以工作：

function displayMatches () {
    const matchArray = findMatches(this.value, cities)
    console.log(matchArray)
    const html = matchArray.map(place => {
        return `<li>
            <span class="name">${place.city}, ${place.state}</span>
            <span class="population">${place.population}</span>
        </li>`
    }).join('')
    suggestion.innerHTML = html

}

【讨论】：

【解决方案2】：

箭头函数中缺少花括号，意味着返回评估。

所以

    matchArray.map(place => 
      place.state
    )

    // is equal to
    matchArray.map(place => {
      return place.state
    })

我建议深入研究 es6 箭头函数以便更好地理解。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

【讨论】：

【解决方案3】：

当您使用箭头函数并在 return 语句下方返回一个值时会发生这种情况：

return
`My Statement` // unreachable code

你会得到一个错误。但如果你这样做：

return `My Statement` //reachable code

如果你这样做，它应该可以解决你的问题：

function displayMatches () {
    const matchArray = findMatches(this.value, cities)
    console.log(matchArray)
    const html = matchArray.map(place => {
        return `<li>
            <span class="name">${place.city}, ${place.state}</span>
            <span class="population">${place.population}</span>
        </li>`
    }).join('')
    suggestion.innerHTML = html

}

【讨论】：