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(...){...} ❌