ES6 - 语法

ES6 - 语法基础

JavaScript 语法定义了一套编写程序所需的规则，JavaScript 引擎能够理解和执行这些程序。理解这些基础知识对于编写高效代码至关重要。

JavaScript 程序的核心组成部分

• 字面量 (Literals): 直接写在代码中的固定值。示例：100 (数字), "Hello ES6" (字符串), true (布尔值), null, [1, 2, 3] (数组), { name: "Alice" } (对象)。
• 变量 (Variables): 用于存储数据的命名位置。使用 let、const (ES6+) 或 var (旧版本) 声明。
• 运算符 (Operators): 对操作数（值或变量）执行操作的符号。示例：+, -, *, /, =, ===, &&, ||。
• 关键字 (Keywords): JavaScript 中具有特殊含义的保留词。示例：if, else, for, while, function, class, return, let, const, import, export。
• 标识符 (Identifiers): 给变量、函数、类等起的名称。它们必须遵循特定规则： - 必须以字母、下划线 (_) 或美元符号 ($) 开头。 - 后续字符可以是字母、下划线 (_)、美元符号 ($) 或数字。 - 区分大小写 (myVar 与 MyVar 不同)。 - 不能是保留关键字。
• 语句 (Statements): 由 JavaScript 引擎执行的指令，通常以分号 (;) 结尾。
• 表达式 (Expressions): 任何能解析为一个值的有效代码单元（例如，x + y，myFunction()，3 * 7）。
• 注释 (Comments): 代码中被解释器忽略的说明性文字，用于解释代码。 - 单行注释: // 这是一个注释 - 多行注释: /* 这是一个 多行注释 */

关键 JavaScript 关键字 (侧重 ES6+):

下表列出了一些现代 JavaScript 中常用的关键字：

关键字集合 1	关键字集合 2	关键字集合 3	关键字集合 4
async	await	break	case
catch	class	const	continue
debugger	default	delete	do
else	export	extends	false
finally	for	function	if
import	in	instanceof	let
new	null	return	super
switch	this	throw	true
try	typeof	var (遗留)	void
while	with (不推荐)	yield	static (在类中)

注意: 诸如 enum, implements, interface, package, private, protected, public 等词汇被保留供将来使用，不应作为标识符。

有效的标识符 vs 无效的标识符:

有效标识符示例	无效标识符示例
firstName _value $amount user1 calculateTotal	1stName (不能以数字开头) my-variable (不允许连字符) let (关键字) first name (不允许空格)

空白字符和换行

JavaScript 大部分情况下会忽略标记之间的空格、制表符和换行符。这允许灵活的代码格式和缩进，对于提高可读性至关重要。

大小写敏感性

JavaScript 是大小写敏感的。这意味着 myVariable、MyVariable 和 myvariable 将被视为三个不同的标识符。

分号

分号 (;) 用于终止语句。虽然 JavaScript 具有自动分号插入 (ASI)，它会尝试在看似缺少分号的地方插入分号，但依赖 ASI 可能会导致微妙的 bug。广泛接受的最佳实践是在每条语句的末尾显式包含分号。

示例:

console.log("Hello ES6"); // 存在分号
console.log("We are learning modern JavaScript"); // 存在分号

// 一行中的多条语句需要分号来分隔：
let x = 5; let y = 10; console.log(x + y);

您的第一个 JavaScript 代码 (现代方法)

让我们看一个使用现代实践的简单“Hello World”示例：

main.js

const message = "Hello, ES6 World!";
console.log(message);

• 第 1 行: 声明一个常量变量 message 并将其初始化为字符串 “Hello, ES6 World!”。const 意味着这个变量不能被重新赋值。
• 第 2 行: console.log() 是一个内置函数，用于将 message 的值打印到控制台（例如，浏览器开发者控制台或 Node.js 终端）。

执行代码（例如，使用 Node.js）：

• 将代码保存到名为 main.js 的文件中。
• 打开终端或命令提示符。
• 导航到保存文件的目录。
• 输入 node main.js 并按 Enter。

输出:

Hello, ES6 World!

严格模式 ("use strict";)

严格模式是一种选择进入 JavaScript 受限变体的方式。它有助于捕获常见的编码错误，并防止或对某些“不安全”的操作抛出错误。强烈建议用于新项目。

要为整个脚本启用严格模式，请将完全相同的语句 "use strict";（或 'use strict';）放在脚本的最开头。

"use strict";

// 在严格模式下，给未声明的变量赋值会抛出错误：
// undeclaredVar = "This would be an error.";

let declaredVar = "This is fine.";
console.log(declaredVar);

它也可以应用于单个函数：

function myStrictFunction() {
  "use strict";
  // anUndeclaredVariable = "Error inside this function";
  let anotherVar = "Also fine inside function";
  console.log(anotherVar);
}
myStrictFunction();

重要提示: ES6 模块（使用 import/export 语法）默认处于严格模式。您无需在模块文件的开头添加 "use strict";。

JavaScript 中的变量提升 (Hoisting)

变量提升 (Hoisting) 是 JavaScript 的默认行为，即将声明（而不是初始化）移动到其当前作用域（全局变量/函数为脚本作用域，局部变量/函数为函数作用域）的顶部，然后再执行代码。但是，初始化不会被提升。

• var 声明: 会被提升并初始化为 undefined。
• let 和 const 声明: 会被提升但未初始化。在代码中它们声明之前访问它们会导致 ReferenceError（这被称为暂时性死区 - Temporal Dead Zone, TDZ）。
• 函数声明 (function foo() {}): 会被完全提升（名称和函数体）。它们可以在代码中出现在声明之前被调用。
• 函数表达式 (const foo = function() {} 或 const foo = () => {}): 只有变量声明部分会被提升（像 var, let, 或 const 一样）。函数体赋值不会被提升，因此在赋值之前不能调用它们。

示例: var vs let 的变量提升

console.log(x); // undefined (var x 被提升并初始化为 undefined)
var x = 5;

// console.log(y); // ReferenceError: Cannot access 'y' before initialization (let y 被提升但在 TDZ 中)
// let y = 10;

示例: 函数提升

sayHello(); // 工作正常: "Hello from declared function!"

function sayHello() {
  console.log("Hello from declared function!");
}

// sayGoodbye(); // TypeError: sayGoodbye is not a function (如果是 var) 或 ReferenceError (如果是 let/const)
// const sayGoodbye = () => {
//   console.log("Goodbye from arrow function!");
// };

理解变量提升以及 let/const 的 TDZ 对于避免常见错误很重要。通常，为了提高代码清晰度，最好在使用变量和函数之前先声明它们。