[Day11] 陈述式与表达式

JavaScript 语句类型可被分为陈述式与表达式，而两者差别叙述如下：

陈述式 Statement

陈述式是用於命令执行指定的一系列操作，最大的特徵是不会回传结果

陈述式的类别

陈述式常见的类别有：

• 流程控制 (Block 区块、if else、switch)
• 宣告 (var、let、const)
• 函数与类别 (function、return)
• 迭代 (for 回圈、while)
• 其他 (debugger、export、import)

详细类别可看 MDN - 陈述式与宣告

陈述式的范例

利用 Chrome 的开发者工具在 console 上输入 宣告 与 if 语句，因为陈述式不会回传值，只会跳出undefined

• var 宣告

  

• if 语句

  

陈述式的注意事项

因陈述式不能回传结果，因此不能赋值在其他变数上

var nickName = if(1===1) {};
// Uncaught SyntaxError: Unexpected token 'if'

表达式 Expression

表达式又可称为表示式、运算式，常会透过一些符号(运算子)结合上下语句来运算并会回传结果

表达式的类型

• 算术 (ex: 123)
• 字串 (ex: "string")
• 逻辑 (ex: True)
• 主流运算式 (ex: this)
• 左侧运算式 (ex: new)

详细类别可看 MDN - 运算式与运算子

表达式的范例

利用 Chrome 的开发者工具在 console 上输入表达式，会回传结果

范例1

输入 100+100 会回传 200

范例2

赋值运算子 为表达式，所以会回传值

var nickName; // 陈述式

nickName = 'Carol'; // 表达式

若再次在 console 输入 nickName，会回传 Carol

所以陈述式、表达式不一定是一个完整的语句，只有其中的片段也是可以称为表达式或陈述式

函式陈述式与函式表达式

函式也有分为 函式陈述式与 函式表达式，两者最大的差异在於使否有提升

在 Day7 提升 中，也有提到关於函式陈述式与函式表达式的差异

函式陈述式

函式陈述式又称为具名函式，直接宣告一个函式并给予一个名子，在创造阶段时，会先在记忆体中将函式陈述式的所有内容做保留(提升)

function fn() {
    // ...
}

函式表达式

函式表达式又称为匿名函式，会先宣告一个变数，再使用等号运算子将右边的函式赋值到左边变数上，因不会被提升，所以若要利用函式表达式，就必须等到执行阶段，函式已经赋予到变数上，才能运行此函式

var fn = function() {
    // ...
}

Block 常误解的区块

Block 语句

Block 语句为陈述式，且可以包含陈述式，并以大括号 { } 来界定区块

{
    陈述式1
    ...
    陈述式n
}

范例

{
    var nickName = 'Carol';
}

Block 不能用变数接收

前面提到 Block 语句为陈述式，而陈述式不能回传结果，因此不能赋值在其他变数上

// 因是陈述式不能用变数接收，故会报错

var people = {
   var nickName = 'Carol';
}
// Uncaught SyntaxError: Unexpected identifier

物件实字

若在 Block 内放入表达式，则为物件实字，是 JavaScript 定义物件的其中一种方法

{
    nickName = 'Carol';
}

也因物件实字是表达式所以可以用变数接收

var people = {
    nickName = 'Carol';
}

因 Block 的关系，let、const 作用域只在 Block 内，在 Block 外层是无法取到此变数

// 在 Block 外无法提取变数 nickName

console.log(nickName); // Uncaught ReferenceError: nickName is not defined
{
    const nickName = 'Carol';
}

另外因 var 为 函式作用域 所以在 Block 外层是取的到此以 var 宣告的变数

console.log(nickName);
{
    var nickName = 'Carol';
}

参考文献

六角学院 - JavaScript 核心篇

MDN - 陈述式与宣告

MDN - 运算式与运算子