第2课：变量与数据类型——JS的“记忆盒子”

::: block-1 不经历风雨，怎么见彩虹？无人能随随便便成功，努力吧，你一定会成为那个闪闪发光的人！ :::

欢迎来到「JavaScript 魔法学院」第 2 课！上节课我们让网页"动"了起来，今天要学习 JS 的 核心能力 ------用"记忆盒子"（变量）存储数据，并掌握数据的"分类标签"（类型）。文末还有实战：密码强度校验器，等你来挑战！

一、变量：JS 的"记忆盒子"

1. 变量的作用

为什么需要变量？

像生活中用便签记录信息，变量用于存储程序中的数据（如用户名、商品价格）。

声明变量的三把钥匙：

js 复制代码

let age = 25;         // 可变的盒子（推荐）
const PI = 3.14;      // 不可变的盒子（常量）
var oldName = "Tom";  // 旧版钥匙（有缺陷，少用）

2. let / const / var 的区别

关键字	重复声明	作用域	可变性
let	❌	块级作用域	✅
const	❌	块级作用域	❌
var	✅	函数作用域	✅

避坑指南：

优先用 const，必要时用 let，避免 var
const 声明对象时，属性可修改（盒子不能换，但内容可改）

js 复制代码

const user = { name: "Alice" };
user.name = "Bob";  // 允许！
user = {};          // 报错！

二、数据类型：数据的"分类标签"

1. 基本类型（值类型）

类型	示例	特征
Number	12, NaN	所有数字，包含整数和浮点数
String	"Hello", '2024'	文本，用单/双引号包裹
Boolean	true, false	只有两个值，表示真/假
Null	null	表示"空值"（人为赋值）
Undefined	undefined	变量未赋值时的默认值

经典问题：

js 复制代码

console.log(0.1 + 0.2 === 0.3);  // false？为什么？
console.log(0.1 + 0.2); // 0.30000000000000004

答案：二进制浮点数精度丢失，可用 toFixed(2) 四舍五入解决。

2. 引用类型（对象类型）

Object：键值对集合

js 复制代码

const person = {
  name: "Lucy",
  age: 20,
  isStudent: true
};

Array：有序数据列表

js 复制代码

const colors = ["red", "green", "blue"];
console.log(colors[0]);  // "red"

3. 检测数据类型

typeof：识别基本类型

js 复制代码

console.log(typeof 42);         // "number"
console.log(typeof []);         // "object"（局限！）

instanceof：检测引用类型

js 复制代码

console.log([] instanceof Array);  // true

三、实战：密码强度校验器

1. 实现功能

用户输入密码后，实时显示强度：

弱：长度 < 6

中：6 ≤ 长度 ≤ 10

强：长度 > 10 且包含特殊字符（!@#）

2. 完整代码

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二课：变量与数据类型</title>
    <style>
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div class="container">
        <input type="" id="password" placeholder="输入密码">
        <p id="strength"></p>
    </div>
    <script>
        const passwordInput = document.getElementById("password");
        const strengthText = document.getElementById("strength");
        passwordInput.addEventListener("input", function () {
            const password = passwordInput.value;
            let strength = "弱";
            // 判断逻辑
            if (password.length >= 6) {
                strength = "中";
                if (password.length > 10 && /[!@#]/.test(password)) {
                    strength = "强";
                }
            }
            strengthText.innerHTML = `密码强度：<span style="color: red;">${strength}</span>`;
        });
    </script>
</body>

</html>

3. 代码解析

用 const 声明 DOM 元素，避免重复查找
addEventListener 监听输入事件
正则表达式 / $!@#$ / 检测是否包含特殊字符
使用模板字符串拼接带样式的结果

下节预告

第 3 课：运算符与流程控制------JS 的"决策者"

if/else 如何做条件判断？
for 循环的隐藏技巧
实战：自动生成九九乘法表！

关注公众号，回复【JS】获取本课源码+工具包！