ECMAScript语法

本章将详细介绍ECMAScript的基本语法规则,包括变量声明、注释、语句结构等核心语法元素,为后续学习打下坚实基础。

2.1 基本语法结构

ECMAScript程序由一系列语句组成,每条语句以分号(;)结尾(可选)。虽然分号不是必需的,但建议始终使用以避免自动分号插入机制可能带来的问题。

语句与表达式

在ECMAScript中,语句是执行某个操作的指令,而表达式是产生值的代码片段。例如:

// 语句 - 执行操作
var x = 5;
console.log(x);

// 表达式 - 产生值
5 + 3
x * 2
"Hello" + " World"

2.2 变量声明

ECMAScript中有三种声明变量的方式:var、let和const。它们在作用域和行为上有重要区别。

var声明

var是ES5及之前版本中声明变量的唯一方式,具有函数作用域或全局作用域:

var name = "张三";
var age; // 声明但未初始化,值为undefined
age = 25; // 后续赋值

let声明

let是ES6引入的块级作用域变量声明方式:

let name = "张三";
let age = 25;

if (true) {
    let city = "北京"; // 块级作用域
    console.log(city); // 正常输出
}
// console.log(city); // 错误:city未定义

const声明

const用于声明常量,一旦赋值就不能再改变:

const PI = 3.14159;
const user = { name: "张三", age: 25 };

// PI = 3.14; // 错误:不能重新赋值
user.age = 26; // 正确:修改对象属性

提示:推荐优先使用const,需要重新赋值时使用let,避免使用var。

2.3 注释

ECMAScript支持单行注释和多行注释两种形式:

// 这是单行注释

/*
这是多行注释
可以跨越多行
*/

/**
 * 这是JSDoc风格的注释
 * @param {string} name - 用户名
 * @param {number} age - 年龄
 * @returns {string} 格式化的用户信息
 */
function formatUserInfo(name, age) {
    return `${name}今年${age}岁`;
}

2.4 标识符命名规则

标识符是变量、函数、属性或参数的名称,必须遵循以下规则:

  • 第一个字符必须是字母、下划线(_)或美元符号($)
  • 后续字符可以是字母、数字、下划线或美元符号
  • 不能使用保留字作为标识符
  • 区分大小写
// 合法的标识符
let userName;
let _privateVar;
let $element;
let π = 3.14159; // Unicode字符也可作为标识符

// 非法的标识符
// let 123abc; // 不能以数字开头
// let my-name; // 连字符不被允许

2.5 语句结构

ECMAScript中的语句可以分为简单语句和复合语句:

简单语句

let x = 5;           // 表达式语句
console.log("Hello"); // 函数调用语句
return x * 2;        // 返回语句

复合语句

// 块语句
{
    let x = 1;
    let y = 2;
    console.log(x + y);
}

// 条件语句
if (x > 0) {
    console.log("正数");
} else {
    console.log("非正数");
}

// 循环语句
for (let i = 0; i < 5; i++) {
    console.log(i);
}

2.6 严格模式

严格模式是ES5引入的一种运行模式,可以使代码更安全、更规范:

// 全局严格模式
"use strict";
let x = 5;

// 函数级严格模式
function myFunction() {
    "use strict";
    // 函数内的严格模式代码
}

严格模式的主要限制包括:

  • 不允许使用未声明的变量
  • 不允许删除变量、对象或函数
  • 不允许函数参数重名
  • 禁止八进制字面量
  • eval不会在包含作用域中创建变量或函数

2.7 代码组织

良好的代码组织有助于提高可读性和维护性:

逻辑分组

// 用户相关功能
function getUserInfo() { /* ... */ }
function updateUserProfile() { /* ... */ }

// 订单相关功能
function createOrder() { /* ... */ }
function cancelOrder() { /* ... */ }

适当的空行和缩进

function processData(data) {
    // 数据验证
    if (!data) {
        throw new Error("数据不能为空");
    }
    
    // 数据处理
    const processed = data.map(item => {
        return {
            id: item.id,
            name: item.name.toUpperCase(),
            createdAt: new Date()
        };
    });
    
    return processed;
}