JavaScript基础篇——第二章类型转换与常见错误解析

五、类型转换

[5.1 转换必要性](#5.1 转换必要性)

[5.2 隐式转换（系统自动）](#5.2 隐式转换（系统自动）)

[5.3 显式转换（主动控制）](#5.3 显式转换（主动控制）)

六、常见错误解析

[6.1 常量未初始化](#6.1 常量未初始化)

[6.2 变量未定义](#6.2 变量未定义)

[6.3 重复声明变量](#6.3 重复声明变量)

[6.4 修改常量值](#6.4 修改常量值)

七、运算符与表达式

[7.1 赋值运算符](#7.1 赋值运算符)

[7.2 一元运算符](#7.2 一元运算符)

[7.3 比较运算符](#7.3 比较运算符)

[7.4 逻辑运算符](#7.4 逻辑运算符)

[7.5 运算符优先级](#7.5 运算符优先级)

[7.6 表达式 vs 语句](#7.6 表达式 vs 语句)

五、类型转换

5.1 转换必要性

根本原因：JS弱类型特性

典型问题场景：

复制代码

// 表单/prompt获取的值都是字符串

let price1 = prompt('请输入价格');

let price2 = prompt('请输入价格');

console.log(price1 + price2); // 字符串拼接而非加法！

转换本质：将数据转为目标类型再操作

5.2 隐式转换（系统自动）

触发规则：

操作符	转换规则	示例	结果
+	任一侧为字符串 → 字符串拼接	'3' + 2	'32'
- * /	转为数字计算	'8' - '3'	5 (数字)
比较符	数字优先比较	'10' > 9	true

开发技巧：

1.快速转数字：+str（如 +'12' → 12）

2.任何数据+字符串=字符串

5.3 显式转换（主动控制）

三类转换函数对比：

方法	特点	示例	返回值	适用场景
Number(value)	严格整体转换	Number('12.3px')	NaN	需要精确转换时
parseInt(str)	提取整数（忽略非数字后缀）	parseInt('12.3px')	12	解析带单位的数字
parseFloat(str)	提取浮点数	parseFloat('12.3')	12.3	解析含小数的字符串

NaN深入理解：

全称：Not a Number

类型：typeof NaN → 'number'

特性：

复制代码

NaN === NaN; // false！唯一不等于自身的值

isNaN(NaN);  // true 检测方法

六、常见错误解析

6.1 常量未初始化

错误提示：Uncaught SyntaxError: Missing initializer in const declaration

代码示例：

复制代码

const age; // 错误！缺少初始化

console.log(age);

本质原因：const声明必须立即赋值

修复方案：const age = 18;

6.2 变量未定义

错误提示：Uncaught ReferenceError: age is not defined

典型场景：

复制代码

// 场景1：忘记声明

console.log(userAge); // userAge未声明



// 场景2：拼写错误

let userName = 'Tom';

console.log(usarName); // 字母拼错

调试技巧：使用IDE的变量重命名功能避免拼写错误

6.3 重复声明变量

错误提示：Uncaught SyntaxError: Identifier 'age' has already been declared

冲突案例：

复制代码

let age = 18;

let age = 21; // 同一作用域禁止重复声明

正确做法：

复制代码

let age = 18;

age = 21; // 直接赋值更新

6.4 修改常量值

错误提示：Uncaught TypeError: Assignment to constant variable

经典错误：

复制代码

const PI = 3.14;

PI = 3.14159; // 禁止修改常量

设计原则：

"用const声明，除非确定需要重新赋值"

七、运算符与表达式

7.1 赋值运算符

核心功能：对变量赋值

基础运算符：=（将右侧值赋给左侧变量）

复制代码

let x = 10; // 基础赋值

复合赋值运算符：

运算符	等效表达式	示例	结果 (x初始为10)
+=	x = x + y	x += 5	x = 15
-=	x = x - y	x -= 3	x = 7
*=	x = x * y	x *= 2	x = 20
/=	x = x / y	x /= 4	x = 2.5
%=	x = x % y	x %= 3	x = 1

开发技巧：

循环计数简化：count += 1 代替 count = count + 1

7.2 一元运算符

自增运算符：

类型	符号	等效操作	特点
前置自增	++x	x = x + 1	先自增后返回值
后置自增	x++	x = x + 1	先返回值后自增

自减运算符：

类型	符号	等效操作
前置自减	--x	x = x - 1
后置自减	x--	x = x - 1

关键区别示例：

复制代码

let a = 5;

let b = a++; // b=5, a=6（后置：先赋值后自增）



let c = 5;

let d = ++c; // d=6, c=6（前置：先自增后赋值）

使用场景：

1.循环计数器：for(let i=0; i<10; i++) {...}

2.数组遍历索引控制

7.3 比较运算符

基础比较符：

运算符	名称	说明
>	大于	5 > 3 → true
<	小于	'a' < 'b' → true
>=	大于等于	5 >= 5 → true
<=	小于等于	10 <= 9 → false

相等性判断：

运算符	特点	示例	结果
==	值相等（隐式类型转换）	'5' == 5	true
===	严格相等（类型+值）	'5' === 5	false
!=	值不相等	'5' != 5	false
!==	严格不相等	'5' !== 5	true

三大黄金规则：

字符串比较：按字符ASCII码逐位对比

复制代码

'apple' > 'banana' // false（a的ASCII=97, b=98）

'10' > '2'         // false（比较首位字符'1'(49)和'2'(50)）

NaN特性：

复制代码

NaN === NaN; // false（唯一不等于自身的值）

isNaN(NaN);  // true（正确检测方法）

小数精度问题：

复制代码

0.1 + 0.2 === 0.3; // false（实际≈0.30000000000000004）

// 解决方案：使用精度容差 Math.abs(a-b) < 1e-10

开发铁律：

始终使用 === 和 !== 避免隐式转换陷阱

7.4 逻辑运算符

三大逻辑操作：

| 运算符 | 名称 | 功能 | 真值表规律 |
|------|-----|-------------|---------|----------|------|
| && | 逻辑与 | 两侧全真为真 | 一假则假 |
| ` | | ` | 逻辑或 | 至少一侧为真即真 | 一真则真 |
| ! | 逻辑非 | 取反（真→假，假→真） | 真变假，假变真 | | |

短路运算原理：

| 运算符 | 短路规则 | 应用场景 |
|------|--------------|----------------------------------|--------------|--------------|---|----------|
| && | 遇假即停，返回假值操作数 | 条件执行：isLogin && showUserMenu() |
| ` | | ` | 遇真即停，返回真值操作数 | 默认值设置：`name | | '匿名用户'` |

7.5 运算符优先级

完整优先级表（从高到低）：

| 优先级 | 运算符类型 | 具体运算符 | 示例 |
|-----|-------|---------------|-----------------------|----|-------------------------|
| 1 | 分组 | () | (2+3)*4 → 20 |
| 2 | 一元运算符 | ++ -- ! +（正号） | !false → true |
| 3 | 乘除取模 | * / % | 5 + 3*2 → 11 |
| 4 | 加减 | + - | 10 - 3 + 2 → 9 |
| 5 | 关系比较 | > < >= <= | 5 > 3 == true → true |
| 6 | 相等性判断 | == != === !== | |
| 7 | 逻辑与 | && | `true | | false && false→true` |
| 8 | 逻辑或 | ` | | ` | |
| 9 | 赋值 | = += -= 等 | | | |

两大黄金法则：

1.同级运算从左到右（除赋值运算符从右到左）

2.不确定时用()显式分组

7.6 表达式 vs 语句

本质区别：

特性	表达式	语句
定义	产生值的代码片段	执行操作的指令
能否赋值	可被赋值（有返回值）	不可被赋值（无返回值）
示例	3 + 4 → 7	if(...){...}（条件执行）
	x > 5 → true/false	for(...){...}（循环控制）
	isValid && submit() → 返回值	break（中断执行）

代码形态对比：

复制代码

// 表达式（可放在赋值右侧）

let result = prompt('输入'); // prompt()是函数表达式

let sum = 10 + 20;          // 算术表达式



// 语句（独立指令）

alert('警告！');            // 函数调用语句

if (age > 18) {            // 条件语句

  console.log('成年');

}

开发注意：

1.箭头函数要求返回表达式：() => x * 2

2.控制流语句不能出现在赋值右侧：let x = if(...){...} ❌

JavaScript基础篇——第二章 类型转换与常见错误解析

五、类型转换

5.1 转换必要性

5.2 隐式转换（系统自动）

5.3 显式转换（主动控制）

六、常见错误解析

6.1 常量未初始化

6.2 变量未定义

6.3 重复声明变量

6.4 修改常量值

七、运算符与表达式

7.1 赋值运算符

7.2 一元运算符

7.3 比较运算符

7.4 逻辑运算符

7.5 运算符优先级

7.6 表达式 vs 语句

JavaScript基础篇——第二章类型转换与常见错误解析