首页 > 基础教程 > 变量和数据类型

第2章: 变量和数据类型

什么是变量?

变量是用于存储数据值的容器。在现代 JavaScript 开发中，理解作用域、不可变性和类型安全是编写高质量代码的关键。

声明变量 (现代最佳实践)

在 JavaScript 中，2026年推荐使用以下方式声明变量:

1. const (首选，不可变引用)

// 声明常量引用 (推荐用于大多数情况)
const API_URL = "https://api.example.com";
const config = { timeout: 5000 };

// 对象和数组的内容可以修改，但引用不可变
config.timeout = 3000; // ✅ 允许
// config = {}; // ❌ 报错: Assignment to constant variable

2. let (用于需要重新赋值的变量)

// 用于需要改变值的变量
let counter = 0;
counter = counter + 1; // ✅ 允许

let items = [];
items.push('item'); // ✅ 允许

3. var (已过时，不推荐)

// ⚠️ 仅在维护旧代码时使用
// 新代码避免使用 var
var name = "张三";

最佳实践:

数据类型

JavaScript 有以下数据类型:

1. 原始类型

// 字符串 (String)
const name = "Hello";
const message = 'World';
const template = `Hello ${name}`; // 模板字符串

// 数字 (Number) 和 BigInt (ES2020)
const age = 25;
const price = 19.99;
const bigNumber = 9007199254740991n; // BigInt

// 布尔值 (Boolean)
const isActive = true;
const isCompleted = false;

// Symbol (ES2015) - 唯一标识符
const sym = Symbol('description');

// Undefined 和 Null
let x; // undefined
const y = null; // null

2. 引用类型

// 对象 (Object)
const person = {
    name: "张三",
    age: 25,
    city: "北京",
    // 简写属性
    greet() {
        return `Hello, I'm ${this.name}`;
    }
};

// 数组 (Array)
const colors = ["红色", "绿色", "蓝色"];
const numbers = [1, 2, 3, 4, 5];

// Map (ES2015) - 更强大的键值对集合
const map = new Map();
map.set('key', 'value');

// Set (ES2015) - 唯一值集合
const unique = new Set([1, 2, 2, 3]); // [1, 2, 3]

// WeakMap 和 WeakSet - 弱引用集合
const weakMap = new WeakMap();

现代特性: 解构和展开

ES2015 引入的解构和展开运算符让代码更简洁:

// 数组解构
const [first, second, ...rest] = [1, 2, 3, 4, 5];
// first = 1, second = 2, rest = [3, 4, 5]

// 对象解构
const { name, age, city = "上海" } = person;
// name = "张三", age = 25, city = "北京"

// 展开运算符
const newArray = [...colors, "紫色"]; // 合并数组
const newPerson = { ...person, email: "test@example.com" }; // 合并对象

可选链 (?.) 和 空值合并 (??)

ES2020 引入的现代操作符:

// 可选链 - 安全访问嵌套属性
const user = { profile: { name: "张三" } };
const name = user?.profile?.name; // "张三"
const age = user?.profile?.age; // undefined

// 空值合并 - 仅当值为 null 或 undefined 时使用默认值
const userName = user?.name ?? "匿名用户"; // "匿名用户"
const displayName = "" ?? "默认值"; // "" (空字符串不是 null/undefined)

// 可选链赋值 (ES2021)
user?.profile?.email = "test@example.com";

类型检查和转换

// typeof 操作符
console.log(typeof "hello"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
console.log(typeof {}); // "object"
console.log(typeof []); // "object" (数组也是对象)
console.log(typeof null); // "object" (历史遗留问题)
console.log(typeof undefined); // "undefined"

// 类型转换
const num = Number("123"); // 123
const str = String(123); // "123"
const bool = Boolean("hello"); // true

// 类型检查
Array.isArray([]); // true
Array.isArray({}); // false

变量命名规则 

// ✅ 好的命名
const API_BASE_URL = "https://api.example.com";
const MAX_RETRY_COUNT = 3;
let currentCount = 0;
const isLoading = true;
const hasPermission = false;
class UserManager { }

// ❌ 不好的命名
const url = "https://api.example.com";
let x = 0;
const flag = true;