Day-2-变量与数据

作者

Day 2: 变量与数据

🎯 学习目标

  • 理解变量的概念和作用
  • 掌握 JavaScript 的基本数据类型
  • 学会声明和使用变量
  • 理解变量作用域

💡 核心概念

什么是变量？

变量是存储数据的容器。可以把变量想象成一个盒子，盒子上有标签（变量名），里面装着数据（值）。

// 声明一个变量
let name = "张三";

// name 是变量名（盒子上的标签）
// "张三" 是变量值（盒子里的内容）

为什么需要变量？

没有变量的世界：

console.log("欢迎，张三！");
console.log("你好，张三，今天天气不错");
console.log("张三，你有3条新消息");
// 如果要改名，需要修改所有地方...

有变量的世界：

let name = "张三";
console.log(`欢迎，${name}！`);
console.log(`你好，${name}，今天天气不错`);
console.log(`${name}，你有3条新消息`);

// 改名只需要改一处
name = "李四";

📦 声明变量

1. let（现代推荐）

let age = 25;
age = 26;  // 可以重新赋值

let score;
score = 100;  // 可以先声明后赋值

2. const（常量）

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

const user = {
    name: "Alice"
};
user.name = "Bob";  // ✅ 可以修改对象属性

3. var（旧方式，不推荐）

var old = "旧方式";
// 存在变量提升等问题，现代代码推荐用 let 和 const

🔢 数据类型

1. 基本类型

数字（Number）

let age = 25;
let price = 99.9;
let negative = -10;

// 数学运算
let sum = 10 + 5;        // 15
let product = 3 * 4;     // 12
let division = 10 / 3;   // 3.333...

// 特殊值
let infinity = Infinity;   // 无穷大
let nan = NaN;            // Not a Number

字符串（String）

let name = "张三";
let message = 'Hello';
let template = `你好，${name}`;  // 模板字符串

// 字符串方法
console.log(name.length);         // 2
console.log(name.toUpperCase());  // "张三"
console.log(message.includes("el")); // true

布尔值（Boolean）

let isTrue = true;
let isFalse = false;

// 比较运算返回布尔值
let check = 10 > 5;  // true
let equal = 5 === 5; // true

空值

let empty = null;        // 空值
let notDefined;          // undefined
let alsoUndefined = undefined;

2. 引用类型

数组（Array）

let fruits = ["苹果", "香蕉", "橙子"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "你好", true, null];

// 访问数组元素
console.log(fruits[0]);  // "苹果"

// 数组长度
console.log(fruits.length);  // 3

对象（Object）

let person = {
    name: "张三",
    age: 25,
    city: "北京"
};

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

// 添加/修改属性
person.email = "zhang@example.com";
person.age = 26;

🎮 变量命名规则

命名规则

// ✅ 好的命名
let userName = "alice";
let isLoggedIn = true;
let maxCount = 100;

// ❌ 不好的命名
let x = "alice";           // 不明确
let name1 = "alice";        // 数字后缀
let User = "alice";         // 大写开头（留给类）
let 用户名 = "alice";       // 中文（虽然支持但不推荐）

命名约定

1. camelCase（小驼峰）

let firstName = "张";
let lastName = "三";
let isLoggedIn = false;

2. 常量用 UPPER_SNAKE_CASE

const MAX_RETRY_COUNT = 3;
const API_BASE_URL = "https://api.example.com";
const DEFAULT_TIMEOUT = 5000;

3. 布尔值用 is/has/can 开头

let isActive = true;
let hasPermission = false;
let canEdit = true;

🔄 类型转换

自动转换

// 数字 + 字符串 = 字符串
let result = 10 + "20";  // "1020"

// 数字 - 字符串 = 数字
let result2 = 10 - "2";  // 8

// 布尔值转换
let num = true + 1;      // 2
let text = false + "abc"; // "falseabc"

手动转换

// 转字符串
let num = 123;
String(num);       // "123"
num.toString();    // "123"
num + "";          // "123"

// 转数字
let str = "123";
Number(str);       // 123
parseInt(str);     // 123
parseFloat("3.14"); // 3.14

// 转布尔
Boolean(0);        // false
Boolean(1);        // true
Boolean("");       // false
Boolean("hello");  // true

🧪 检查类型

// typeof 操作符
typeof 42;           // "number"
typeof "hello";      // "string"
typeof true;         // "boolean"
typeof undefined;    // "undefined"
typeof null;         // "object" (历史遗留问题)
typeof [1,2,3];      // "object"
typeof {};           // "object"

// 更精确的类型检查
Array.isArray([1,2,3]);  // true
Array.isArray({});       // false

// 检查 null
let value = null;
value === null;          // true

🎯 实战示例

示例1：计算器

// 使用变量存储输入和结果
let num1 = 10;
let num2 = 5;
let operator = "+";

let result;
if (operator === "+") {
    result = num1 + num2;
} else if (operator === "-") {
    result = num1 - num2;
}
console.log(`${num1} ${operator} ${num2} = ${result}`);

示例2：用户信息管理

// 使用对象存储用户信息
let user = {
    name: "张三",
    age: 25,
    email: "zhang@example.com",
    isAdmin: false
};

// 更新用户信息
user.age = 26;
user.isAdmin = true;

// 显示用户信息
console.log(`用户: ${user.name}`);
console.log(`年龄: ${user.age}`);
console.log(`管理员: ${user.isAdmin ? "是" : "否"}`);

示例3：购物车

// 使用数组存储商品
let cart = [
    {name: "苹果", price: 5.5, quantity: 2},
    {name: "香蕉", price: 3.0, quantity: 3},
    {name: "橙子", price: 4.0, quantity: 1}
];

// 计算总价
let total = 0;
for (let item of cart) {
    total += item.price * item.quantity;
}
console.log(`总价: ¥${total.toFixed(2)}`);

⚠️ 常见错误

1. 变量名拼写错误

let userName = "Alice";
console.log(username);  // ❌ ReferenceError: username is not defined

2. 使用 const 重新赋值

const PI = 3.14;
PI = 3.14159;  // ❌ TypeError: Assignment to constant variable

3. 混淆 == 和 ===

console.log(5 == "5");   // true  (自动类型转换)
console.log(5 === "5");  // false (严格比较)
// 总是使用 ===

4. var 的变量提升

console.log(x);  // undefined (不是错误)
var x = 10;
// 使用 let 避免
console.log(y);  // ReferenceError
let y = 10;

✍️ 练习任务

练习1：变量交换

不使用第三个变量，交换两个变量的值。

let a = 5;
let b = 10;

// 你的代码
// ...

console.log(a); // 应该输出 10
console.log(b); // 应该输出 5

提示：使用解构赋值或数学运算

练习2：温度转换器

创建变量存储摄氏度，转换成华氏度。

let celsius = 25;
let fahrenheit = celsius * 9 / 5 + 32;
console.log(`${celsius}°C = ${fahrenheit}°F`);

练习3：个人信息卡片

使用对象存储个人信息，然后打印格式化的信息。

let person = {
    name: "你的名字",
    age: 25,
    city: "你的城市",
    hobby: ["阅读", "游戏", "运动"]
};

// 打印如下格式：
// 姓名: XXX
// 年龄: XX岁
// 城市: XXX
// 爱好: XXX、XXX、XXX

🎓 今日挑战

项目：学生成绩管理系统

使用变量和数据结构实现：

  1. 学生信息

    • 姓名
    • 学号
    • 成绩列表

  2. 功能实现

    • 计算平均分
    • 找出最高分
    • 判断是否及格（60分以上）

  3. 数据输出

    • 格式化显示学生信息
    • 显示成绩统计
// 提示：使用数组和对象
let student = {
    name: "张三",
    id: "2024001",
    scores: {
        chinese: 85,
        math: 90,
        english: 78
    }
};

// 实现以下函数：
function calculateAverage(scores) { }
function findMaxScore(scores) { }
function isPassing(scores) { }
function printReport(student) { }

💡 最佳实践

1. 优先使用 const

如果不需要重新赋值，使用 const。

2. 变量名要语义化

// ✅ 好
let daysUntilDeadline = 7;

// ❌ 差
let d = 7;

3. 避免全局变量

// ❌ 差
let globalData = "...";

// ✅ 好
function processData() {
    let localData = "...";
}

4. 及时释放不需要的变量

let largeData = fetchLargeData();
process(largeData);
largeData = null;  // 释放内存

学习时间: 2026-03-07 13:25
难度: ⭐⭐☆☆☆
预计用时: 2-3 小时
关键词: 变量, 数据类型, let, const, 对象, 数组
相关标签: #02-变量与数据