JavaScript 基础语法：变量、类型与流程控制

JavaScript 基础语法：变量、类型与流程控制

欢迎来到 JavaScript 世界的第一站。无论你是完全零基础，还是从其他语言转来，掌握变量、数据类型和流程控制都是写出一切程序的前提。本教程将带你用最短路径掌握 JavaScript 的核心地基，所有概念都会配合实时可验证的示例，让你边学边练。

一、变量：存储数据的容器

变量是给内存中的值贴上的标签。在 JavaScript 中，我们使用 let、const 或 var 来声明变量。

1. 使用 let 和 const（现代写法）

• let：声明一个可重新赋值的变量。
• const：声明一个常量，一旦赋值就不能再改变（但注意：如果值是对象，其属性仍可修改）。

let age = 25;
age = 26;          // ✅ 允许

const birthYear = 1998;
birthYear = 1999;  // ❌ 报错：Assignment to constant variable

const person = { name: 'Alice' };
person.name = 'Bob'; // ✅ 允许修改对象属性
person = {};         // ❌ 不允许将 person 指向新对象

最佳实践：默认使用 const，只有当你确定变量值需要改变时才用 let。这样能减少意外修改带来的 bug。

2. var 的特点（了解即可）

var 是旧式的声明方式，现在已不推荐。它存在变量提升和作用域问题：

var x = 10;
if (true) {
  var x = 20;  // 同一个变量！
}
console.log(x); // 20，而不是10（因为没有块级作用域）

用 let/const 就不会有这种困扰。请在新代码中完全避免 var。

3. 变量命名规则

• 只能包含字母、数字、$ 或 _，不能以数字开头。
• 区分大小写：myvar 与 myVar 不同。
• 不能使用保留字，如 let、class、return。
• 推荐驼峰命名：firstName、totalPrice。
• 常量通常用大写加下划线：MAX_SIZE、API_URL。

二、数据类型：一切值的分类

JavaScript 是动态类型语言，变量本身不限定类型，值才有类型。数据类型分为两大类：原始类型（Primitive）和引用类型（Object）。

1. 原始类型（7种）

let num = 100;
let str = "Hello";
let isReady = true;
let maybe;          // undefined
let empty = null;   // null

typeof 操作符可以检测类型，但有两个历史遗留的“陷阱”：

typeof 42;            // "number"
typeof "hello";       // "string"
typeof undefined;     // "undefined"
typeof null;          // "object" （这是语言本身的 bug）
typeof [1,2,3];       // "object" （数组实际上也是对象）

判断 null 直接用 === null，判断数组可以用 Array.isArray()。

2. 引用类型（对象）

除了原始类型之外的所有值都是对象。最常见的：

• 普通对象：{ name: 'Alice', age: 30 }
• 数组（索引集合）：[1, 2, 3]
• 函数：function() {}
• 日期：new Date()

引用类型存储的是内存地址，赋值时复制的是引用：

let obj1 = { value: 10 };
let obj2 = obj1;
obj2.value = 20;
console.log(obj1.value); // 20 —— 两个变量指向同一个对象

三、流程控制：让代码学会判断和循环

流程控制语句决定了代码的执行顺序。

1. 条件语句：if...else 和三元运算符

let score = 85;

if (score >= 90) {
  console.log('优秀');
} else if (score >= 75) {
  console.log('良好');
} else {
  console.log('再接再厉');
}

更简洁的三元运算符：条件 ? 真时返回 : 假时返回

let message = score >= 60 ? '及格' : '不及格';

真值（truthy）与假值（falsy）：
在条件判断中，以下6个值为假：false, 0, ""（空字符串）, null, undefined, NaN。其他所有值都是真值。

if ("hello") { /* 会执行，非空字符串是真值 */ }
if (0) { /* 不会执行，0 是假值 */ }

2. switch 语句：多条件清晰匹配

当要对同一个变量匹配多个固定值时，switch 可读性更好。

let fruit = 'apple';

switch (fruit) {
  case 'banana':
    console.log('香蕉');
    break;
  case 'apple':
    console.log('苹果');
    break;
  default:
    console.log('未知水果');
}

注意：每个 case 末尾必须用 break，否则会“穿透”到下一个 case。

3. 循环：重复执行代码

① for 循环 —— 最常用，已知次数时用。

for (let i = 0; i < 5; i++) {
  console.log(i); // 0,1,2,3,4
}

② while 循环 —— 条件为真时一直执行，常用于未知次数。

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

③ for...of —— 遍历数组或可迭代对象（推荐）。

const colors = ['red', 'green', 'blue'];
for (const color of colors) {
  console.log(color);
}

④ for...in —— 遍历对象属性（注意会遍历原型链，通常配合 hasOwnProperty 使用）。

const person = { name: 'Tom', age: 25 };
for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key, person[key]);
  }
}

4. 循环控制：break 与 continue

• break：立即跳出整个循环。
• continue：跳过本次循环剩余代码，进入下一次迭代。

for (let i = 0; i < 10; i++) {
  if (i === 5) break;     // 到4就停止
  if (i % 2 === 0) continue; // 偶数跳过
  console.log(i);          // 输出 1,3
}

四、动手实践：将三者串联起来

以下是一个综合小示例，利用变量存储数据，用数据类型组织信息，再用流程控制实现逻辑：

// 变量与类型
const students = [
  { name: '小明', score: 92 },
  { name: '小红', score: 67 },
  { name: '小刚', score: 45 }
];

// 流程控制：循环 + 条件
for (const stu of students) {
  let grade;
  if (stu.score >= 90) {
    grade = 'A';
  } else if (stu.score >= 60) {
    grade = 'B';
  } else {
    grade = 'C';
  }
  console.log(`${stu.name} 的成绩等级是 ${grade}`);
}

这就是 JavaScript 基础语法的核心骨架。理解了变量、类型和流程控制，你就已经具备编写逻辑代码的能力，可以进入下一阶段：函数、对象与数组的高级操作。建议立即打开浏览器控制台（F12）或 Node.js 环境，把每个例子都敲一遍，让知识在指尖固化。