JavaScript - 为什么包含括号会导致三元表达式错误？答案

【问题标题】：JavaScript - why does inclusion of parenthesis result in an error in ternary expression?JavaScript - 为什么包含括号会导致三元表达式错误？
【发布时间】：2021-01-03 12:40:39
【问题描述】：

我有以下代码：

const showMessage = msg => console.log(msg);

let person = {
  firstName: `Mick`,
  lastName: `McCarthy`,
  firstTimeUser: true
}

(person.firstTimeUser === true) ? showMessage(`Welcome, ${person.firstName}!`): showMessage(`Glad you're back, ${person.firstName}!`)

这会导致错误：

home.js:7 Uncaught ReferenceError: Cannot access 'person' before initialization
    at home.js:7

但是，在以下情况下（三元表达式中的括号已被删除）：

const showMessage = msg => console.log(msg);

let person = {
  firstName: `Mick`,
  lastName: `McCarthy`,
  firstTimeUser: true
}

person.firstTimeUser === true ? showMessage(`Welcome, ${person.firstName}!`) : showMessage(`Glad you're back, ${person.firstName}!`)

没有错误，欢迎信息正确显示。

为什么会这样？我的印象是括号在三元表达式中是可选的。我想这与评估顺序有关，但由于三元表达式与let person = {... 在不同的行上，我不清楚为什么会这样。

事实上，在我正在学习的 JavaScript 课程的示例中，讲师展示了以下示例，无论是否使用括号都可以完美运行：

let price = 20

(price < 10) ? showMessage('yes') : showMessage('no')

但是，当我在自己的机器上尝试时，会出现同样的问题。他们会不会使用行为不同的旧版 JavaScript？如果有，发生了什么变化？

非常感谢！

【问题讨论】：

可能你需要一个分号。
自动分号插入不会在左括号之前开始，因此它会将其视为您尝试调用 person 上的函数。 20 不可能是任何可调用的，所以没有歧义。
@LouisCowell 分号不是可选的。它们也不是强制性的。它们很复杂。自动分号的工作原理是 javascript 将尝试将下一行代码附加到当前行并尝试编译它。如果导致语法无效，则尝试在行之间添加分号。过去每个人都会告诉您使用分号，因为人类无法有效地思考。但是一群人决定尝试找出所有需要分号的情况——这成为了standardjs标准..
.. 如果您不想使用分号，您必须遵循standardjs样式指南。如果不是，您必须使用分号。 Standardjs - standardjs.com
分号是必须的，句号。 ASI 是试图让语言对初学者更“宽容”的拐杖，但会导致一堆问题。我对忘记分号表示同情——我们都这样做——但我无法理解它们是“可选的”并且可以，甚至应该被省略的论点。

标签： javascript operator-precedence conditional-operator

【解决方案1】：

JavaScript 的分号插入

以下是 JavaScript 引擎如何看待您的代码

let person = {...}(person.firstTime === true ? )

以下也会出现同样的问题

console.log('Error')

[1, 2, 3].forEach(console.log)

但是如果console.log('Error')末尾有一个分号，那么下面的代码就可以正常工作了

必不可少，不要依赖 JavaScript 分号插入，否则会出现奇怪的错误。

【讨论】：

console.log('Error')是什么关系？
你没有回答为什么最后一个 sn-p 与 OP 的导师机器一起工作（如声称的那样）
@yqlim 在我的天真中，我认为分号是可选的，因此将它们从讲师的代码中排除以与我自己的代码保持一致。然而，事实证明它们不是（见上文！）。
@LouisCowell 在您的编辑器中使用自动 linter，告别这些愚蠢的问题。 VSCode 和 ESlint