JavaScript Expressions vs Statements

了解 JavaScript 陈述式与表达式

@ JavaScript

Expressions 表达式

表达式产生一个值
  • 1 产生值 1
  • 你好 产生值 你好
  • 5 * 10 产生值 50
  • age >= 18 产生值 true 或 false
  • isHappy ? "🙂" : "🙁" 产生值 🙂 或 🙁
  • (function () { return 'Hi'; }()) 产生值 Hi
  • ({a: 1}) 产生值 {a: 1}

Statements 陈述式

执行动作完成任务

陈述式就像是指令，使用它会执行一些预定的动作。有陈述式的地方都可以输入表达式

// 指派 `5` 到 `age` 变量
const age = 5;
// 如果 `age` 大于等于 18，就执行 ...
if (age >= 18) {
  // ...
}

表达式与陈述式

表达式会产生一个值，它可以独立存在，也可以作为其他语句的组成部分。此外在特殊的情况下你会需要使用 ()🔗 来包覆表达式，否则 JavaScript 会错误的将其当作陈述式。

// IIFE Immediately Invoked Function Expression
(function () {
  // ...
})();
// Return Object
const f = () => ({ a: 1 });

总结

还有一个简单的方法辨别表达式与陈述式，就是把它们丢进 console.log，如果无语法错误且能执行就是「表达式」，反之就是「陈述式」（或单纯是不合规的语法）。我回过头来才发现表达式与陈述式的重要性，特别是在写 React / JSX 这类框架上的一些奇怪的限制，比如：「只能返回一个元素」、「为什么要用表达式来撰写？」，实际上是 JavaScript 本身运作上的限制。

参考文章