什么是 JavaScript 表达式和语句？

Question

JavaScript 的语言语法区分 表达式 和 语句 。
这两个概念有细微的不同，如果你想了解像 Vue 。

通常，表达式是计算为值的代码片段。 语句是执行操作的代码片段。 在 JavaScript 需要语句的任何地方，您都可以编写表达式。 但反之则不然：如果框架或 JavaScript 运行时需要表达式，则不能使用语句。

下面的代码片段都是表达式。 它们都评估为一个值。

0 // 0

1 + 1 // 2

'Hello' + ' ' + 'World' // 'Hello World'

{ answer: 42 } // { answer: 42 }

Object.assign({}, { answer: 42 }) // { answer: 42 }

answer !== 42 ? 42 : answer // 42

answer = 42 // 42

以下片段都是陈述。 他们 不 评估价值。

// `if` statement
if (answer !== 42) { answer = 42 }
// `for` is a statement
for (;;) { console.log('Hello, World'); }
// Declaring a variable is a statement
let answer = 42

函数参数

当您调用 JavaScript 函数时，所有参数都必须是表达式，而不是语句。

function print(v) {
  console.log(v);
}

print('Hello, World'); // OK
print(true ? 'Hello, World' : null); // OK

print(if (true) { 'Hello, World' }); // SyntaxError: Unexpected token if

区分代码片段是语句还是表达式的一种简便方法是考虑是否可以将代码片段作为参数传递给 console.log()。

您可能会看到代码依赖于这样一个事实，即为变量赋值是一个表达式，但声明一个变量是一个语句。 换句话说，只要您已经声明了变量，就可以将赋值作为参数传递给函数。

let answer;
console.log(answer = 42); // 42
answer; // 42

// SyntaxError
console.log(let value = 1);

立即调用函数表达式 (IIFE)

在 JavaScript 中，函数定义是表达式。

console.log(function() {}); // '[Function]'

还有 调用表达式 。 调用函数是一个表达式：

const getAnswer = function getAnswer() { return 42 };

console.log(getAnswer()); // '42'

但是，当您尝试同时调用一个函数时，事情会变得混乱，宣布它的时间。

// SyntaxError
function getAnswer() { return 42 }();

这是因为某些片段可以是表达式或语句，具体取决于上下文。 例如 function getAnswer() { return 42; } 当它位于赋值的右侧时是一个表达式，但是当它位于文件的开头时是一个语句。

解决方法是包装 function getAnswer() { return 42 } 在括号内。
括号，也称为 分组运算符 ，使 JavaScript 尝试将括号中的内容视为表达式。

// 42
(function getAnswer() { return 42 })();

将函数包装在括号中以立即调用它的模式称为 立即调用的函数表达式 或简称为 IIFE。

在 Vue 中

像 Vue 这样的前端框架允许您将 HTML 值绑定到 JavaScript 表达式 。 Vue 绑定必须只包含一个表达式。

const app = new Vue({
  data: () => ({ answer: null }),
  template: `
    <div>
      {{answer = 42}}
    </div>
  `
});

如果使用语句而不是表达式，Vue 会抛出模板编译错误。

const app = new Vue({
  data: () => ({}),
  // Will throw a "Error compiling template" error
  template: `
    <div>
      {{let answer = 42}}
    </div>
  `
});