宝宝版js教学（百万字）超详细基础语法

别怕！我用最接地气的话，把每个知识点拆成 “幼儿园能听懂” 的程度，每个概念都配 “生活例子 + 代码演示 + 逐行解释”，跟着看绝对能懂！

2.1 标识符：给代码里的 “东西” 起名字

核心问题：啥是标识符？

标识符就是给 变量、函数、属性 起的名字 —— 就像给你家宠物、玩具起名字一样，比如 “旺财”“奥特曼”，代码里的 “东西” 也得有名字才能用。

起名的规矩（必须遵守！）

首字符不能乱起：只能是「字母（a-z/A-Z）、下划线（_）、美元符号（）」比如不能叫小明（数字开头不行），但能叫小明小红发财”。
后面的字符随便加：除了上面 3 种，还能加数字 —— 比如 “userName2”“age_18”。
不能用 “禁用词”：有些词是 JS 的 “专属词汇”（叫关键字 / 保留字符），比如 “if”“for”“class”，就像不能给娃起名叫 “公安部” 一样，会冲突。
习惯写法（约定俗成）：多个单词用 “驼峰命名法”—— 首字母小写，后面单词首字母大写，比如 “studentName”（学生姓名）、“userAge”（用户年龄），别写成 “student_name”（虽然不报错，但不专业）。

举例子（对 vs 错）

对的标识符	错的标识符	错因
name	1name	数字开头
user123	user-123	有非法字符 “-”
_gender	if	用了关键字 “if”
$price	价格	中文不推荐（虽然能跑，但易乱码）

2.2 字面量和变量：装东西的 “盒子” 与 “固定东西”

2.2.1 字面量：写死的 “固定值”

啥是字面量？

就是代码里 直接写出来、不能改的值—— 比如 “123”“hello”“true”，像刻在石头上的字，永远是同一个，改不了。

生活例子

你手里的 1 块钱硬币，它的面值 “1” 就是字面量，永远变不成 2 块；你说的 “我是学生” 这句话，也是字面量，固定不变。

代码里的字面量

▼
javascript
复制代码
123;        // 数字字面量
"苹果";     // 字符串字面量（必须用引号包着）
true;       // 布尔字面量（只有true/false两个值）
null;       // 空值字面量

2.2.2 变量：能装东西的 “可重复用盒子”

啥是变量？

变量是 用来装字面量的容器—— 就像你家的保鲜盒，能装苹果（“苹果” 字面量），也能换成橙子（“橙子” 字面量），可以反复用、随时换内容。

为什么需要变量？

如果没有变量，你要写 “计算 123+456”“计算 123+789”，得重复写 123；有了变量，把 123 装进盒子a，之后直接用a+456“a+789” 就行，不用重复写。

变量的 3 步操作（声明→赋值→使用）

声明变量：用var关键字告诉 JS “我要建一个盒子啦”，比如 var a;（建一个叫a的空盒子）。
给变量赋值：用=把字面量放进盒子，比如 a = 123;（把 123 放进a盒子）。
使用变量：直接写变量名，就能用到里面的东西，比如 console.log(a);（打印盒子里的 123）。

简化写法（声明 + 赋值一步到位）

不用分两步，直接建盒子并装东西：

▼
javascript
复制代码
var b = "苹果";  // 建一个叫b的盒子，直接装进“苹果”
var c = true;    // 建一个叫c的盒子，装进true

代码演示 + 解释

▼
javascript
复制代码
// 1. 声明变量（空盒子）
var age;
// 2. 赋值（往盒子里放东西）
age = 18;
// 3. 使用（拿盒子里的东西）
console.log(age);  // 输出18（打印盒子里的18）

// 简化：声明+赋值
var name = "小明";
console.log(name); // 输出小明

2.3 数据类型：给 “盒子里的东西” 分类

核心问题：为什么要分类型？

就像你家冰箱会分 “冷藏层”（放蔬菜）、“冷冻层”（放雪糕），JS 给数据分类是为了：

明确 “能做什么操作”：比如数字能加减，字符串能拼接（“小明”+“你好”），布尔值能判断对错。
节省空间：不同类型占的内存不一样，分类后更高效。

JS 的 6 种数据类型（5 种基本 + 1 种引用）

先记一句话：“五基一引”——5 种基本类型（简单类型，像小积木，单独一块），1 种引用类型（复杂类型，像乐高城堡，由多块积木组成）。

2.3.1 5 种基本类型（重点！）

1. 字符串型（String）：文字 / 字符

啥是字符串？：所有用 单引号（'）或双引号（"）包起来的内容—— 比如名字、句子、符号，本质是 “字符的组合”。
生活例子：“我是学生”“abc123”“！@#”，都是字符串。 代码演示：

▼
javascript
复制代码
var str1 = "小明";    // 双引号（推荐用）
var str2 = '123';     // 单引号
var str3 = "他说：'你好'"; // 引号嵌套（外层双，内层单）

注意：没有引号的不是字符串！比如 var a = 123 是数字，var b = "123" 是字符串。

2. 数值型（Number）：整数 / 小数 / 特殊数字

啥是数值型？：所有数字，包括整数（123）、小数（3.14），还有两个特殊值（Infinity：无穷大，NaN：不是数字）。
生活例子：你的年龄 18（整数）、体重 52.5 公斤（小数）、数学里的∞（无穷大）。
代码演示：

▼
javascript
复制代码
var num1 = 18;       // 整数
var num2 = 3.14;     // 小数
var num3 = Infinity; // 正无穷大（比如 10 / 0 会得到这个值）
var num4 = NaN;      // 不是数字（比如 "abc" - 123 会得到这个值）

小知识：JS 里不分 “整数型” 和 “小数型”，统一叫 Number。

3. 布尔型（Boolean）：对 / 错

啥是布尔型？：只有两个值 ——true（对、真）和false（错、假），专门用来做 “判断”。
生活例子：“今天下雨了”（true/false）、“你满 18 岁了”（true/false）。 代码演示：

▼
javascript
复制代码
var isRain = true;   // 对（今天下雨）
var isAdult = false; // 错（没满18岁）

用途：后面写条件语句（if…else）会用到，比如 “如果 isRain 是 true，就带伞”。

4. undefined 型（Undefined）：没赋值的变量

啥是 undefined？：变量 声明了但没赋值 时，默认就是 undefined—— 相当于 “盒子建好了，但里面是空的，啥也没有”。
生活例子：你买了个新盒子，没放东西，打开就是 “空的”，对应 undefined。
代码演示：

▼
javascript
复制代码
var a;              // 只声明，没赋值
console.log(a);     // 输出 undefined
var b = undefined;  // 也能直接赋值（但没必要）

5.NULL

啥是 null？：专门表示 “空对象”—— 相当于 “你特意把盒子清空，里面啥也没有，不是忘了装”。
和 undefined 的区别？：
- undefined：“忘了装东西”（声明没赋值）
- null：“故意清空”（主动赋值为 null）
生活例子：你有个盒子，之前装了苹果，现在把苹果拿走了，特意留空，就是 null。 代码演示：

▼
javascript
复制代码
var box = null;     // 盒子故意清空
console.log(box);   // 输出 null

小坑：用typeof检查 null 时，会返回 “object”（JS 的历史 bug），记住它本质是 “空对象” 就行。

2.3.2 引用类型（Object）：复杂的 “组合体”

啥是引用类型？：除了上面 5 种，剩下的都是 Object—— 比如对象、数组、函数，本质是 “多个基本类型的组合”。
生活例子：一个 “人”（对象），有名字（字符串）、年龄（数字）、是否成年（布尔）；一个 “购物车”（数组），里面装了多个商品（对象）。 代码演示（简单对象）：

▼
javascript
复制代码
// 一个“人”对象，包含多个属性（字符串、数字、布尔）
var person = {
  name: "小明",    // 字符串
  age: 18,         // 数字
  isAdult: true    // 布尔
};

注意：引用类型比较复杂，后面会单独详细讲，先记住 “除了五基都是 Object” 就行。

2.3.3 typeof 运算符：判断数据类型的 “检测仪”

啥是 typeof？

一个专门用来 检查数据类型 的工具 —— 把要检查的东西放后面，会返回一个字符串，告诉你这是什么类型。

代码演示（必看！）

▼
javascript
复制代码
// 检查数字
console.log(typeof 18);        // 输出 "number"
// 检查字符串
console.log(typeof "小明");    // 输出 "string"
// 检查布尔
console.log(typeof true);      // 输出 "boolean"
// 检查undefined
console.log(typeof undefined); // 输出 "undefined"
// 检查null（注意：返回"object"，是bug）
console.log(typeof null);      // 输出 "object"
// 检查对象
console.log(typeof {name: "小明"}); // 输出 "object"

用法：

写条件判断时能用，比如 “如果变量是数字，就做加法”：

▼
javascript
复制代码
var a = 123;
if (typeof a === "number") {
  console.log(a + 100); // 输出 223
}

2.4 强制类型转换：把 “苹果” 变成 “橘子”

核心问题：为啥要转换类型？

JS 里不同类型不能直接操作，比如你不能把 “123”（字符串）和 456（数字）直接相加 —— 得先把 “123” 变成数字，才能算 123+456=579。

强制类型转换就是 把一种数据类型，手动改成另一种，主要改 3 种：转字符串、转数字、转布尔。

2.4.1 转换为字符串（把其他类型变成文字）

有 3 种方法，最常用第 3 种（简单粗暴）：

方法 1：用 `.toString()` 方法（除了 null/undefined）

用法：在要转换的变量后面加 .toString()
注意：null 和 undefined 不能用（会报错）
代码演示

▼
javascript
复制代码
var num = 123;
var str = num.toString(); // 把数字123变成字符串"123"
console.log(str);         // 输出 "123"
console.log(typeof str);  // 输出 "string"

// 错误示例：null不能用toString()
var n = null;
// n.toString(); // 会报错！

方法 2：用 `String()` 函数（万能，啥都能转）

用法：String(要转换的东西)
优点：能转 null 和 undefined，不会报错代码演示：

▼
javascript
复制代码
// 转数字
console.log(String(456));      // 输出 "456"
// 转null（不会报错）
console.log(String(null));     // 输出 "null"
// 转undefined（不会报错）
console.log(String(undefined));// 输出 "undefined"

方法 3：加空字符串 `+ ""`（最常用，简单）

用法：在要转换的东西后面加 + ""（空字符串）
原理：JS 里 “数字 + 字符串” 会自动变成字符串，利用这个特性偷懒代码演示：

▼
javascript
复制代码
var num = 789;
var str = num + ""; // 数字789 + 空字符串 = 字符串"789"
console.log(str);   // 输出 "789"

var b = true;
var str2 = b + "";  // 布尔true变成字符串"true"
console.log(str2);  // 输出 "true"

2.4.2 转换为数字（把其他类型变成数字）

有 3 种方法，重点记 Number()（万能）和 parseInt()（转整数）：

方法 1：用 `Number()` 函数（万能转换）

用法：Number(要转换的东西)
转换规则（必记！）：
- 字符串：纯数字字符串→数字（"123"→123）；有非数字→NaN（"12a3"→NaN）；空串→0（""→0）
- 布尔：true→1，false→0
- null→0
- undefined→NaN
代码演示：

▼
javascript
复制代码
// 纯数字字符串→数字
console.log(Number("123"));    // 输出 123
// 非数字字符串→NaN
console.log(Number("12a3"));   // 输出 NaN
// 空串→0
console.log(Number(""));       // 输出 0
// 布尔→1/0
console.log(Number(true));     // 输出 1
// null→0
console.log(Number(null));     // 输出 0
// undefined→NaN
console.log(Number(undefined));// 输出 NaN

方法 2：用 `parseInt()` 函数（专门转整数）

用法：parseInt(要转换的东西)
特点：只转整数，忽略小数；只认字符串开头的数字，后面非数字忽略；非字符串先转字符串
代码演示：

▼
javascript
复制代码
// 字符串转整数（忽略小数）
console.log(parseInt("123.45")); // 输出 123
// 字符串开头是数字，后面忽略
console.log(parseInt("12a34"));  // 输出 12
// 非字符串先转字符串
console.log(parseInt(true));     // 输出 NaN（true→"true"，没有数字）
console.log(parseInt(""));       // 输出 NaN

方法 3：用 `parseFloat()` 函数（专门转小数）

用法：parseFloat(要转换的东西)
特点：能转小数，其他规则和 parseInt 一样
代码演示：

▼
javascript
复制代码
// 转小数
console.log(parseFloat("123.45")); // 输出 123.45
// 开头数字，后面忽略
console.log(parseFloat("123.45a67")); // 输出 123.45

2.4.3 转换为布尔（把其他类型变成对 / 错）

只有 1 种方法：用 Boolean() 函数，规则超简单（记 “假值” 就行）：

转换规则：

只有 6 个值会变成 false（假值），其他全是 true（真值）：
1. 0 和 NaN（数字）
2. 空字符串 ""
3. null

2.5 运算符：代码里的 “计算器 + 判断工具”

运算符就像数学里的 “加减乘除”、生活里的 “比大小”“判断对错”，作用是对 1 个或多个值做操作，最后得到结果。比如之前学的typeof就是运算符，用来判断数据类型。

2.5.1 算术运算符：做数学计算（加、减、乘、除等）

专门处理 数字运算，和小学算术题几乎一样，就多了两个 “自增自减” 的特殊操作。

核心运算符（先记基础 6 个）

假设 y = 5，用表格讲清楚每个运算符的用法：

运算符	功能	例子	结果（x 的值）	注意点
+	加法	x = y + 2	7	数字相加；如果有字符串，就拼接（比如 "2"+3 → "23"）
-	减法	x = y - 2	3	只能做数字减法，非数字会转成数字（比如 "5"-2 → 3）
*	乘法	x = y * 2	10	数字相乘，支持小数（3*2.5 →7.5）
/	除法	x = y / 2	2.5	JS 里除法不自动取整（5/2≠2，而是 2.5）
%	取模（求余）	x = y % 2	1	算除法后剩下的数（5÷2 商 2 余 1），常用判断奇偶数
=	赋值	x = y	5	不是 “等于”！是把右边的值放进左边变量里

重点难点：自增（++）和自减（--）

这两个是 “变量自己加 1 / 减 1” 的快捷操作，分两种写法，差别很大！

前置自增（++x）：先加 1，再用加后的值

例子：y=5; x=++y; → 先把 y 变成 6，再赋值给 x → x=6，y=6

生活类比：先吃 1 口饭，再算自己吃了多少
后置自增（x++）：先用完当前值，再加 1

例子：y=5; x=y++; → 先把 y 的 5 赋值给 x，再把 y 变成 6 → x=5，y=6

生活类比：先算自己吃了多少，再吃 1 口饭

代码演示（逐行解释）：

▼
javascript
复制代码
var y = 5;
// 前置自增：先y+1，再赋值给x
var x1 = ++y; 
console.log(x1); // 输出6（y已经变成6了）
console.log(y);  // 输出6

// 重置y为5
y = 5;
// 后置自增：先把y=5赋值给x2，再y+1
var x2 = y++; 
console.log(x2); // 输出5（赋值时y还是5）
console.log(y);  // 输出6（赋值后y才变成6）

2.5.2 关系运算符：比大小（大于、小于等）

用来 比较两个值的大小关系，结果只有两种：true（对）或false（错）—— 比如 “5 是不是比 8 大？”“3 是不是小于 10？”

假设 x=5，直接看用法：

运算符	功能	例子	结果	生活类比
>	大于	x > 8	false	“5 大于 8 吗？”→ 错
<	小于	x < 8	true	“5 小于 8 吗？”→ 对
>=	大于或等于	x >= 8	false	“5 大于等于 8 吗？”→ 错
<=	小于或等于	x <= 8	true	“5 小于等于 8 吗？”→ 对

代码演示：

▼
javascript
复制代码
var x = 5;
console.log(x > 8);  // false（5不比8大）
console.log(x <= 5); // true（5小于等于5，对）

2.5.3 赋值运算符：给变量 “装东西”（简化版）

比基础的=更高效，把 “运算 + 赋值” 合一步 —— 比如 “x = x + 5” 可以简化成 “x +=5”。

假设 x=10，y=5，看表格秒懂：

运算符	例子	等同于（展开写法）	结果（x 的值）
+=	x += y	x = x + y	15（10+5）
-=	x -= y	x = x - y	5（10-5）
*=	x *= y	x = x * y	50（10*5）
/=	x /= y	x = x / y	2（10÷5）
%=	x %= y	x = x % y	0（10÷5 余 0）

代码演示（简化写法超方便）：

▼
javascript
复制代码
var x = 10;
var y = 5;

x += y; // 相当于x = x + y
console.log(x); // 输出15

x %= y; // 相当于x = 15 % 5
console.log(x); // 输出0（15÷5余0）

2.5.4 逻辑运算符：判断 “并且、或者、不是”

处理 两个条件的逻辑关系，比如 “今天下雨并且我带伞了”“我要么吃苹果要么吃香蕉”，结果也是true或false。

假设 x=6，y=3，先记基础用法：

关键细节：短路特性（超实用！）

JS 里的&&和||有 “偷懒” 属性 —— 能少判断一个条件就少判断，提高效率：

&& 短路与：如果第一个条件是false，直接返回false，不看第二个条件

例子：(2>5 && 3<4) → 先看 2>5 是 false，直接返回 false，不管 3<4 对不对
|| 短路或：如果第一个条件是true，直接返回true，不看第二个条件

例子：(2<5 || 3>4) → 先看 2<5 是 true，直接返回 true，不管 3>4 错不错

非布尔值的特殊用法（记结论就行）

如果用&&或||判断非布尔值（比如数字、字符串），不会返回true/false，而是返回 “有效的值”：

&&：两个值都 “有效”（非假值），返回第二个值；有一个 “无效”，返回第一个无效值

例子："abc" && 123 → 都有效，返回 123；0 && "abc" → 0 是无效值，返回 0
||：两个值都 “无效”，返回第二个值；有一个 “有效”，返回第一个有效值

例子："" || "默认值" → 空串无效，返回 “默认值”；123 || 456 → 123 有效，返回 123

! 非（取反）的小技巧

!能把任意值转成布尔值（先转布尔，再取反）；如果加两个!!，就是 “先转布尔再取反再取反”—— 相当于直接转布尔值，和Boolean()函数一样！

▼
javascript
复制代码
!!"abc"; // true（"abc"是有效值，转布尔为true）
!!0;     // false（0是无效值，转布尔为false）
!!"";    // false（空串无效）
!!null;  // false（null无效）

2.5.5 比较运算符：判断 “相等不相等”（重点！）

专门判断 两个值是否一样，核心是区分==（相等）和===（全等）—— 这是 JS 的高频坑，一定要分清！

1. == 相等（会自动转类型）

“不管类型一不一样，先转成相同类型，再比值”—— 比如数字 5 和字符串 "5"，会把 "5" 转成 5，然后认为相等。

例子	结果	原因
5 == "5"	true	"5" 转成数字 5，值相等
18 == true	false	true 转成数字 1，18≠1
null == undefined	true	特殊规则：两者转类型后相等

2. === 全等（不转类型，严格比较）

“先看类型，类型不一样直接不相等；类型一样再比值”—— 最常用、最严谨，避免踩坑！

例子	结果	原因
5 === "5"	false	一个是数字类型，一个是字符串，类型不同
18 === 18	true	类型（数字）和值都相等
null === undefined	false	类型不同（null 是空对象，undefined 是未赋值）

3. != 和！== （不相等、不全等）

和上面对应，!=会转类型，!==不转类型：

▼
javascript
复制代码
5 != "5";    // false（转类型后相等，所以“不相等”是错的）
5 !== "5";   // true（类型不同，所以“不全等”是对的）

2.5.6 条件运算符：二选一的 “快捷判断”

也叫 “三元运算符”，是if...else的简化写法 ——“满足条件就选 A，不满足就选 B”。

语法（记公式）：

变量 = (条件) ? 值1 : 值2;

→ 翻译：如果条件是 true，变量就等于值 1；否则等于值 2

生活例子：

“如果年龄 < 18，就说‘年龄太小’，否则说‘年龄合适’”

代码演示（简化前 vs 简化后）：

▼
javascript
复制代码
var age = 16;
// 简化前（if...else）
var result;
if (age < 18) {
  result = "年龄太小";
} else {
  result = "年龄合适";
}
console.log(result); // 输出“年龄太小”

// 简化后（条件运算符）
var result2 = (age < 18) ? "年龄太小" : "年龄合适";
console.log(result2); // 输出“年龄太小”

2.5.7 逗号运算符：一句话写多个操作

用逗号分隔多个语句，会 从左到右依次执行，最后返回最后一个语句的结果 —— 常用在变量声明时一次性定义多个变量。

例子：

▼
javascript
复制代码
// 一次性声明3个变量（逗号分隔）
var num1 = 1, num2 = 2, num3 = 3;
console.log(num1, num2, num3); // 输出1 2 3

// 执行多个操作，返回最后一个结果
var a = (1+2, 3+4, 5+6);
console.log(a); // 输出11（只返回最后一个5+6的结果）

2.5.8 运算符优先级：先算哪个？（记口诀）

和数学里 “先乘除后加减” 一样，JS 运算符也有优先级 —— 不用死记表格，记 3 个核心规则就行：

括号（()）最高：先算括号里的
算术运算符 > 比较运算符 > 逻辑运算符
赋值运算符（=、+= 等）最低：最后算

例子（先算括号里的乘法，再算加法，最后比较）：

▼
javascript
复制代码
var res = (2*3) + 4 > 10; 
// 步骤：先算2*3=6 → 6+4=10 → 10>10？false → res=false
console.log(res); // 输出false

2.6 代码块：把多条语句 “打包”

代码块就是用 大括号 {} 把多条语句包起来，当成 “一条语句” 用 —— 比如把 “声明变量、修改变量、打印变量” 打包，一起执行。

核心特点：

里面的语句会按顺序执行
结尾 不用加分号（大括号本身就是结束标志）
常用在条件语句、循环语句里（把要执行的代码打包）

代码演示：

▼
javascript
复制代码
// 一个代码块：打包3条语句
{
  var a = 123; // 声明变量
  a++; // 变量加1（变成124）
  console.log(a); // 打印结果
}
// 输出124（代码块里的语句依次执行）

2.7 条件语句：让代码 “做判断”（if...else/switch...case）

默认情况下，JS 代码是 “从上到下依次执行” 的 —— 条件语句能让代码 “选择性执行”：满足条件就执行 A，不满足就执行 B。

2.7.1 if...else：最常用的 “判断语句”

相当于生活里的 “如果... 就...，否则就...”，分 3 种用法，覆盖所有判断场景。

用法 1：只有 “如果”（满足条件才执行）

语法：

▼
javascript
复制代码
if (条件) {
  满足条件时执行的代码;
}

例子（如果年龄 <18，打印 “未成年”）：

▼
javascript
复制代码
var age = 16;
if (age < 18) {
  console.log("未成年"); // 条件满足，执行这句话
}
// 输出“未成年”

用法 2：“如果... 否则...”（二选一）

语法：

▼
javascript
复制代码
if (条件) {
  满足条件执行;
} else {
  不满足条件执行;
}

用法 3：“如果... 否则如果... 否则...”（多选一）

语法：

▼
javascript
复制代码
if (条件1) {
  满足条件1执行;
} else if (条件2) {
  满足条件2执行;
} else {
  都不满足执行;
}

例子（判断年龄区间）：

▼
javascript
复制代码
var age = 18;
if (age < 18) {
  console.log("小于18岁");
} else if (age == 18) { // 条件1不满足，判断条件2
  console.log("刚好18岁"); // 条件2满足，执行这句话
} else {
  console.log("大于18岁");
}
// 输出“刚好18岁”

2.7.2 switch...case：多分支的 “快捷判断”

适合 “一个变量等于多个值” 的场景（比如 “今天是周一 / 周二 /.../ 周日”），比多个else if更简洁。

语法（必加 break！）：

▼
javascript
复制代码
switch (变量) {
  case 值1:
    变量等于值1时执行;
    break; // 执行完就退出，不往下走（关键！）
  case 值2:
    变量等于值2时执行;
    break;
  default:
    变量不等于任何值时执行; // 相当于else
}

例子 1：判断星期几

▼
javascript
复制代码
var today = 1;
switch (today) {
  case 1: console.log("周一"); break;
  case 2: console.log("周二"); break;
  case 3: console.log("周三"); break;
  default: console.log("输入错误");
}
// 输出“周一”

例子 2：判断月份天数（多个 case 共用代码）

▼
javascript
复制代码
var month = 10;
switch (month) {
  // 31天的月份：1、3、5、7、8、10、12
  case 1: case 3: case 5: case 7: case 8: case 10: case 12:
    console.log("31天");
    break;
  // 30天的月份：4、6、9、11
  case 4: case 6: case 9: case 11:
    console.log("30天");
    break;
  case 2: console.log("28天"); break;
  default: console.log("输入错误");
}
// 输出“31天”

2.8 循环语句：让代码 “重复执行”（while/do...while/for）

循环语句能让代码 “满足条件就反复执行”（比如输出 1-10、批量处理数据）。

2.8.1 while 循环：先判断，再执行

语法：while (条件) { 循环体（重复执行的代码） }

→ 先检查条件，满足才执行循环体，可能一次都不执行。

例子：输出 1-10

▼
javascript
复制代码
var i = 1; // 计数器（开始值）
while (i <= 10) { // 条件：i<=10时循环
  console.log(i); // 输出i
  i++; // 计数器+1（避免死循环）
}
// 输出1、2、3...10

2.8.2 do...while 循环：先执行，再判断

语法：do { 循环体 } while (条件);

→ 先执行一次循环体，再检查条件，至少执行一次（用得少）。

例子：输出 1-10

▼
javascript
复制代码
var i = 1;
do {
  console.log(i);
  i++;
} while (i <= 10); // 结尾要加分号！

2.8.3 for 循环：最常用（计数器一步到位）

语法：for (初始化计数器; 循环条件; 更新计数器) { 循环体 }

→ 把 “计数器初始化、条件判断、更新” 写在一行，清晰高效。

例子：输出 1-10

▼
javascript
复制代码
// 步骤：1. var i=1（初始化）；2. 检查i<=10（满足则执行循环体）；3. 执行后i++（更新）；重复2-3
for (var i = 1; i <= 10; i++) {
  console.log(i);
}

2.8.4 跳转控制：break 和 continue（循环里用）

break：直接结束最近的一次循环（比如循环 10 次，第 5 次 break 就停）
continue：结束本次循环，直接开始下一次（比如第 5 次 continue，跳过第 5 次，继续第 6 次）

进阶：标签跳出多层循环

给外层循环加个 “标签”，用break 标签名跳出多层循环：

▼
javascript
复制代码
// 给外层循环加标签outer
outer: for (var i = 0; i < 3; i++) {
  for (var j = 0; j < 3; j++) {
    if (j == 1) {
      break outer; // 跳出外层循环，不是只跳内层
    }
    console.log(j);
  }
}
// 只输出0（j=1时跳出外层循环）

宝宝版js教学（百万字）超详细 基础语法

2.1 标识符：给代码里的 “东西” 起名字

核心问题：啥是标识符？

起名的规矩（必须遵守！）

举例子（对 vs 错）

2.2 字面量和变量：装东西的 “盒子” 与 “固定东西”

2.2.1 字面量：写死的 “固定值”

啥是字面量？

生活例子

代码里的字面量

2.2.2 变量：能装东西的 “可重复用盒子”

啥是变量？

为什么需要变量？

变量的 3 步操作（声明→赋值→使用）

简化写法（声明 + 赋值一步到位）

代码演示 + 解释

2.3 数据类型：给 “盒子里的东西” 分类

核心问题：为什么要分类型？

JS 的 6 种数据类型（5 种基本 + 1 种引用）

2.3.1 5 种基本类型（重点！）

1. 字符串型（String）：文字 / 字符

2. 数值型（Number）：整数 / 小数 / 特殊数字

3. 布尔型（Boolean）：对 / 错

4. undefined 型（Undefined）：没赋值的变量

5.NULL

2.3.2 引用类型（Object）：复杂的 “组合体”

2.3.3 typeof 运算符：判断数据类型的 “检测仪”

啥是 typeof？

代码演示（必看！）

用法：

2.4 强制类型转换：把 “苹果” 变成 “橘子”

核心问题：为啥要转换类型？

2.4.1 转换为字符串（把其他类型变成文字）

方法 1：用 .toString() 方法（除了 null/undefined）

方法 2：用 String() 函数（万能，啥都能转）

方法 3：加空字符串 + ""（最常用，简单）

2.4.2 转换为数字（把其他类型变成数字）

方法 1：用 Number() 函数（万能转换）

方法 2：用 parseInt() 函数（专门转整数）

方法 3：用 parseFloat() 函数（专门转小数）

2.4.3 转换为布尔（把其他类型变成对 / 错）

转换规则：

2.5 运算符：代码里的 “计算器 + 判断工具”

2.5.1 算术运算符：做数学计算（加、减、乘、除等）

核心运算符（先记基础 6 个）

重点难点：自增（++）和自减（--）

2.5.2 关系运算符：比大小（大于、小于等）

2.5.3 赋值运算符：给变量 “装东西”（简化版）

2.5.4 逻辑运算符：判断 “并且、或者、不是”

关键细节：短路特性（超实用！）

非布尔值的特殊用法（记结论就行）

! 非（取反）的小技巧

2.5.5 比较运算符：判断 “相等不相等”（重点！）

1. == 相等（会自动转类型）

2. === 全等（不转类型，严格比较）

3. != 和！== （不相等、不全等）

2.5.6 条件运算符：二选一的 “快捷判断”

语法（记公式）：

生活例子：

代码演示（简化前 vs 简化后）：

2.5.7 逗号运算符：一句话写多个操作

2.5.8 运算符优先级：先算哪个？（记口诀）

2.6 代码块：把多条语句 “打包”

核心特点：

2.7 条件语句：让代码 “做判断”（if...else/switch...case）

2.7.1 if...else：最常用的 “判断语句”

用法 1：只有 “如果”（满足条件才执行）

用法 2：“如果... 否则...”（二选一）

用法 3：“如果... 否则如果... 否则...”（多选一）

2.7.2 switch...case：多分支的 “快捷判断”

语法（必加 break！）：

例子 1：判断星期几

例子 2：判断月份天数（多个 case 共用代码）

2.8 循环语句：让代码 “重复执行”（while/do...while/for）

2.8.1 while 循环：先判断，再执行

2.8.2 do...while 循环：先执行，再判断

2.8.3 for 循环：最常用（计数器一步到位）

2.8.4 跳转控制：break 和 continue（循环里用）

进阶：标签跳出多层循环

目录

方法 1：用 `.toString()` 方法（除了 null/undefined）

方法 2：用 `String()` 函数（万能，啥都能转）

方法 3：加空字符串 `+ ""`（最常用，简单）

方法 1：用 `Number()` 函数（万能转换）

方法 2：用 `parseInt()` 函数（专门转整数）

方法 3：用 `parseFloat()` 函数（专门转小数）