JavaScript 基本语法详解

当你开始学习 JavaScript，第一件要做的事就是了解它的"语言规则"——就像学习一门外语要先掌握词汇和句型一样。语法是 JavaScript 这门语言的基础骨架，它规定了代码该如何书写才能被正确理解。

本文将从最基础的知识点出发，系统讲解 JavaScript 的核心语法。

一、JavaScript 代码的书写方式

在 HTML 中使用 JavaScript，主要有三种方式。

1. 内联方式

直接在 HTML 元素的事件属性中编写代码，这种方式不推荐在实际项目中使用，不利于维护。

1
<button onclick="alert('你点击了按钮')">点击我</button>

2. 内部方式

使用 <script> 标签将 JavaScript 代码嵌入到 HTML 页面中，通常放在 <body> 底部或 <head> 中。

1
2
3
<script>
    alert('页面加载完成！');
</script>

3. 外部方式

将 JavaScript 代码写在独立的 .js 文件中，通过 <script> 的 src 属性引入。这是最推荐的做法，有利于代码复用和维护。

1
<script src="main.js"></script>

二、语句与注释

语句

JavaScript 程序由一系列语句组成，每条语句完成一个操作。语句之间通常用分号 ; 分隔。

1
2
let name = "张三";   // 赋值语句
alert(name);         // 函数调用语句

虽然 JavaScript 有自动分号插入机制，但强烈建议手动添加分号，避免因换行导致意外错误。

注释

注释用于解释代码的含义，不会被 JavaScript 引擎执行。

1
2
3
4
5
6
7
// 单行注释：以两个斜杠开头

/*
 * 多行注释：以斜杠星号开始
 * 以星号斜杠结束
 * 常用于函数说明或大段注释
 */

三、变量与常量

变量是用来存储数据的"容器"。JavaScript 中有三种声明变量的方式：var、let 和 const。

变量命名规则

  • 必须以字母、下划线 _ 或美元符号 $ 开头。
  • 其余部分可以是字母、数字、下划线或美元符号。
  • 不能使用 JavaScript 的保留关键字（如 if、for、while 等）。
  • 区分大小写，myName 和 myName 是两个不同的变量。
  • 推荐使用驼峰命名法：第一个单词小写，后续单词首字母大写，如 myFirstName。

let —— 可变的变量

let 是 ES6 引入的块级作用域变量声明方式，现代 JavaScript 推荐使用它来替代 var。

1
2
3
let age = 18;        // 声明并初始化
age = 19;            // 可以重新赋值
let name;            // 可以只声明不赋值，此时值为 undefined

const —— 不可变的常量

const 用于声明常量，一旦赋值就不能再改变。如果试图修改，会报错。

1
2
const PI = 3.14159;
// PI = 3.14;  // 错误！常量不能被重新赋值

需要注意：const 保证的是变量指向的"引用"不变。如果声明的是对象，对象本身的属性仍然可以修改。

1
2
3
const user = { name: "张三" };
user.name = "李四";   // 这是允许的
// user = {};        // 错误！不能重新赋值

var —— 旧的声明方式

var 是 ES6 之前唯一的变量声明方式，存在函数作用域和变量提升等问题，现代开发中已逐渐被 let 和 const 取代。

1
var oldWay = "不推荐使用";

四、数据类型

JavaScript 是弱类型语言，变量本身不限定类型，但每个值都有其类型。数据类型分为两大类：基本数据类型和引用数据类型。

基本数据类型

类型 说明 示例
number 数字，包括整数和浮点数 42、3.14、-10
string 字符串，用单引号或双引号包裹 "你好"、'World'
boolean 布尔值，只有 true 和 false true、false
undefined 未定义，变量声明但未赋值时的默认值 undefined
null 空值，表示"什么都没有" null
symbol 符号，ES6 新增，表示独一无二的值 Symbol('id')
bigint 大整数，用于表示超出 Number 范围的整数 9007199254740991n

引用数据类型

  • 对象（Object）：键值对的集合。
  • 数组（Array）：有序的数据集合。
  • 函数（Function）：可执行的代码块。

类型检测

使用 typeof 运算符可以检测一个值的数据类型。

1
2
3
4
5
6
7
typeof 42;          // "number"
typeof "hello";     // "string"
typeof true;        // "boolean"
typeof undefined;   // "undefined"
typeof null;        // "object"  （这是 JavaScript 的历史遗留问题）
typeof { name: "张三" }; // "object"
typeof [1, 2, 3];   // "object"

五、运算符

算术运算符

用于数学运算。

1
2
3
4
5
6
let a = 10 + 5;    // 加法：15
let b = 10 - 5;    // 减法：5
let c = 10 * 5;    // 乘法：50
let d = 10 / 5;    // 除法：2
let e = 10 % 3;    // 取模（余数）：1
let f = 2 ** 3;    // 幂运算：8

赋值运算符

用于给变量赋值。

1
2
3
4
5
6
7
let x = 10;        // 简单赋值
x += 5;            // 等同于 x = x + 5
x -= 3;            // 等同于 x = x - 3
x *= 2;            // 等同于 x = x * 2
x /= 4;            // 等同于 x = x / 4
x++;               // 自增：等同于 x = x + 1
x--;               // 自减：等同于 x = x - 1

比较运算符

用于比较两个值，返回布尔值。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 相等比较
5 == "5";          // true（宽松相等，会进行类型转换）
5 === "5";         // false（严格相等，类型不同直接返回 false）

// 不等比较
5 != "5";          // false
5 !== "5";         // true

// 大小比较
10 > 5;            // true
10 < 5;            // false
10 >= 10;          // true
10 <= 9;           // false

最佳实践：始终使用 === 和 !== 进行相等性比较，避免类型转换带来的意外结果。

逻辑运算符

用于组合多个条件。

1
2
3
true && false;     // 逻辑与：false
true || false;     // 逻辑或：true
!true;             // 逻辑非：false

字符串拼接

使用 + 运算符连接字符串。

1
2
3
let firstName = "张";
let lastName = "三";
let fullName = firstName + lastName;  // "张三"

ES6 引入了模板字符串，使用反引号包裹，支持嵌入变量：

1
2
let name = "张三";
let message = `你好，${name}！欢迎回来。`;  // "你好，张三！欢迎回来。"

六、条件语句

条件语句让程序根据不同的情况执行不同的代码。

if...else 语句

最基础的条件判断结构。

1
2
3
4
5
6
7
8
9
10
11
let score = 85;

if (score >= 90) {
    console.log("优秀");
} else if (score >= 80) {
    console.log("良好");
} else if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}

switch 语句

适用于多个固定值的匹配判断。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let day = 3;
let dayName;

switch (day) {
    case 1:
        dayName = "星期一";
        break;
    case 2:
        dayName = "星期二";
        break;
    case 3:
        dayName = "星期三";
        break;
    default:
        dayName = "未知";
}

console.log(dayName);  // "星期三"

三元运算符

一种简洁的条件表达式，适用于简单的条件赋值。

1
2
3
let age = 18;
let status = age >= 18 ? "成年" : "未成年";
console.log(status);  // "成年"

七、循环语句

循环用于重复执行一段代码。

for 循环

最常用的循环结构，适合已知循环次数的场景。

1
2
3
4
for (let i = 0; i < 5; i++) {
    console.log(`当前计数：${i}`);
}
// 输出：0, 1, 2, 3, 4

while 循环

适合循环次数未知，需要根据条件判断是否继续的场景。

1
2
3
4
5
let count = 0;
while (count < 3) {
    console.log(`计数：${count}`);
    count++;
}

do...while 循环

与 while 类似，但至少会执行一次。

1
2
3
4
5
let num = 5;
do {
    console.log(`数字：${num}`);
    num++;
} while (num < 3);   // 条件为 false，但循环体已执行过一次

遍历数组

使用 for...of 可以方便地遍历数组中的每个元素。

1
2
3
4
let fruits = ["苹果", "香蕉", "橙子"];
for (let fruit of fruits) {
    console.log(fruit);
}

八、函数

函数是一段可复用的代码块，通过 function 关键字定义。

函数声明

1
2
3
4
5
6
function greet(name) {
    return `你好，${name}！`;
}

let message = greet("张三");
console.log(message);  // "你好，张三！"

函数表达式

将函数赋值给一个变量。

1
2
3
const greet = function(name) {
    return `你好，${name}！`;
};

箭头函数（ES6）

更简洁的函数写法，尤其适合简单的函数。

1
const greet = (name) => `你好，${name}！`;

九、对象

对象是键值对的集合，用花括号包裹。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let user = {
    name: "张三",
    age: 25,
    city: "北京",
    sayHello: function() {
        console.log(`你好，我是${this.name}`);
    }
};

// 访问属性
console.log(user.name);        // "张三"
console.log(user["age"]);      // 25

// 调用方法
user.sayHello();               // "你好，我是张三"

十、数组

数组是有序的数据集合，用方括号包裹。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let colors = ["红色", "绿色", "蓝色"];

// 访问元素（索引从 0 开始）
console.log(colors[0]);        // "红色"

// 获取长度
console.log(colors.length);    // 3

// 添加元素
colors.push("黄色");           // 在末尾添加
colors.unshift("黑色");        // 在开头添加

// 删除元素
colors.pop();                  // 删除最后一个
colors.shift();                // 删除第一个

总结

JavaScript 的基本语法并不复杂，核心就是掌握：如何声明变量、如何处理数据、如何控制流程、如何组织代码。以上内容是 JavaScript 的基础骨架，熟练掌握这些语法，你就能开始编写功能性的代码了