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