Javascript中语句和表达式有什么区别
Yakim Zhang

平常你可能不在刻意区分语句和表达式,但在 React 中你会意识到二者的不同, JSX 语法中,花括号中 { } 必须是表达式,而不能是语句。

下面我们一起看下他们的区别。

表达式(Expressions)

一个表达式它是 javascript 代码,它会生成一些值。
例如:

  • 1 → 生成 1
  • “hello” → 生成 “hello”
  • 5 * 10 → 生成 50
  • num > 100 → 生成 = true or false
  • isHappy ? “🙂” : “🙁” → 生成表情
  • [1, 2, 3].pop() → 生成 3

语句(Statements)

语句也是 javascript 代码,每条语句都会让计算机处理一些事
例如,下面这些是语句

1
2
3
4
5
6
7
let hi = 5;

if (hi > 10) {
// More statements here
}

throw new Error("Something exploded!");

语句可以类比为钢架结构,表达式类比填充物。钢架结构可以填充砖块,语句中可以填充表达式。
如下案例,等于符号右边是表达式。

1
let hi = //表达式

对比

  1. 表达式会返回一个值,而语句不会。
  2. 语句可以包含表达式

语句会做一些事情,表达式会计算一个值。

如何判断呢?

  1. 看他能否放在等号右侧。
  2. 能否打印 console.log()

为什么 JSX 的 { } 中只能是表达式呢?

因为JSX是一种语法糖,它会将代码转变成React.createElement 去创建DOM节点,DOM节点上需要的是具体的值,而不是语句。