本系列更多文章，可以查看专栏 JS学习笔记
文章目录
- JS学习笔记（二）
- 一、强制 / 显式类型转换
- 1. 转换成字符串String
- （1）使用 toString()方法
- （2）使用 String()函数
- 2. 转换成Number类型
- （1）使用 Number()函数
- （2）使用 parseInt()、parseFloat()函数（仅用于字符串）
- 3. 转换成Boolean类型
- （1）使用 Boolean()函数
- 二、运算符
- 1. 算术运算符（+、-、*、/、**、%）
- 2. 赋值运算符（=、+=、-=、*=、/=、**=、%=）
- 3. 一元运算符（+、-）
- 4. 自增、自减运算符（++、- -）
- 5. 逻辑运算符（!、&&、||）
- 6. 关系运算符（>、<、>=、<=）
- 6. 相等&全等运算符（`==` 、 `===`、`!=`、`!==`）
- 7. 条件运算符（`?:`）
- 8. 运算符优先级
- 三、隐式类型转换
- 1. 自动转换为字符串String类型
- 2. 自动转换为数值Number类型
- 3. 自动转换为数值Boolean类型
- 结尾
一、强制 / 显式类型转换
类型转换，指将其它类型转换成字符串值、数值和布尔值
1. 转换成字符串String方法： color{red}{方法：} 方法：
变量a是某个类的实例化对象，且该类有xx方法，则变量a使用xx方法的方式：a.xx()
- 函数 + 对象 = 方法
- 对象是具有属性和方法的值，所有数据类型的量都是对象
- 参数是 隐式传递
函数： color{blue}{函数：} 函数：
（1）使用 toString()方法使用yy函数的方式：yy（），函数如需要传入参数，则在括号内传入参数，yy(传入参数)
- 方法是特殊的函数
- 参数是 显示传递
效果如下图所示：
（2）使用 String()函数
数据类型中拥有toString()方法的，实际使用String()函数时，就是在函数中调用了toString()方法。
BigInt类型值，会转换成对应的值
Null类型值（null）会转换为字符串null
Undefined类型值（undefined）会转换为字符串undefined
Boolean类型值，true会转换成字符串true，false会转换成字符串false
效果如下图所示：
2. 转换成Number类型 （1）使用 Number()函数
a. 将字符串转换为数值情况：
- 1. 如果字符串是合法数字，直接将字符串转换为Number类型数值
- 2. 如果字符串不是合法数字，则将字符串转换为NaN
- 3. 如果字符串是空串或连续多个空格**的字符串，则将字符串转换为0
- 4. 如果字符串是NaN、Inifity等Number类型特殊值，也会直接转换为Number类型特殊值
效果如下所示：
string 889.3 // number 889.3 string 123n // number NaN string // number 0 string -Inifity // number -Inifity
b. 将其它类型转换为数值情况：
- 1. 布尔值 true 转换为 number 1，布尔值 false 转换为 number 0
- 2. 空值 null 转换为 number 0
- 3. 空值 undefined 转换为 number NaN`
（2）使用 parseInt()、parseFloat()函数（仅用于字符串）
- ParseInt()函数，将字符串转换为整数值
- ParseFloat()函数，将字符串转换为浮点类型数值
3. 转换成Boolean类型 （1）使用 Boolean()函数
| 原数据类型 | 转换前的值 | 转换后的值 |
|---|---|---|
| Number类型 | 0和NaN | false |
| 其它Number值 | true | |
| String类型 | 空串 | false |
| 其它字符串（含连续多个空格字符串、false字符串） | true | |
| Null类型 | null | false |
| Undefined类型 | undefined | false |
| Object类型 | 对象 | true |
二、运算符 1. 算术运算符（+、-、*、/、**、%）
通常， color{red}{通常，} 通常，遇到其它非数值类型，会将其它类型值隐式类型转换为 Number 类型
2. 赋值运算符（=、+=、-=、*=、/=、**=、%=）
- +，加法运算符 2 + 3 = 5
- 特殊情况：当左右两端均为字符串时，将对字符串进行拼接 ， 'result = hello' + '0809'; // hello0809
- -，减法 2 - 3 = -1·
- *，乘法 2 * 3 = 6
- /，除法 3 / 2 = 1.5
- **，幂运算 2 ** 3 = 8，4 ** 0.5 =2
- %，取模运算，9 % 2 = 1， 15 % 6 =3
遇到其它非数值类型，会将其它类型值隐式类型转换为 Number 类型
使用 = 时，是将等号右边的变量、值、表达式（计算后的值）赋值给等号左边的变量，这里等号右边的变量仅看作一个值 color{red}{使用=时，是将等号右边的变量、值、表达式（计算后的值）赋值给等号左边的变量，这里等号右边的变量仅看作一个值} 使用=时，是将等号右边的变量、值、表达式（计算后的值）赋值给等号左边的变量，这里等号右边的变量仅看作一个值
3. 一元运算符（+、-）
- =，加法运算符 let b = 5; let a = b + 9; // a = 14
- +=，先将左右两边的变量相加，再将结果赋值给左边的变量，a = a + b; 可以写成 a += b
- -=，先将左右两边的变量相减，再将结果赋值给左边的变量，a = a - b; 可以写成 a -= b
- *=，先将左右两边的变量相乘，再将结果赋值给左边的变量，a = a * b; 可以写成 a *= b
- /=，先将左右两边的变量相除，再将结果赋值给左边的变量，a = a / b; 可以写成 a /= b
- **=，先将左右两边的变量作幂运算，再将结果赋值给左边的变量，a = a ** b; 可以写成 a **= b
- %=，先将左右两边的变量作取模运算，再将结果赋值给左边的变量，a = a % b; 可以写成 a %= b
遇到其它非数值类型，会将其它类型值隐式类型转换为 Number 类型
4. 自增、自减运算符（++、- -）
- +，正号 +3、+0.666等
- -，负号 -1、-Inifity等
遇到其它非数值类型，会将其它类型值隐式类型转换为 Number 类型
- ++，自增运算符，相当于将变量自身加1后的值，再赋值给变量
- 前自增++a，let a = 5; let b = ++a; // 此时，a = 6，b = 6;
- 后自增a++，let a = 5; let b = a++; // 此时，a = 6，b = 5;
- 单独使用前自增和后自增时，对于变量本身差别不大，都相当于只对变量作加一运算。
5. 逻辑运算符（!、&&、||）
- --，自减运算符，相当于将变量自身减1后的值，再赋值给变量
- 前自减--a，let a = 5; let b = --a; // 此时，a = 4，b = 4;
- 后自减a--，let a = 5; let b = a--; // 此时，a = 4，b = 5;
- 单独使用前自减和后自减时，对于变量本身差别不大，都相当于只对变量作减一运算。
遇到其它非布尔值类型，会将其它类型值隐式类型转换为 Boolean 类型
- !，逻辑非，将值转换成布尔值，并将布尔值变为相反的结果
- !true = false; !false = true;
- &&，逻辑与，类似于数学中的交集，当左右两侧的布尔值全为true时，结果为true；否则为false
- 是一种 短路与，当 && 左侧变量、表达式已经可以确定整体结果，将不会执行符号右侧的变量或表达式
- true && alert('true'); // 因为只有两侧都为true时，才能确定最终结果，所以右侧alert语句会执行
- false && alert('false'); // 因为有左侧有false，最终结果一定为false，故右侧alert语句不会执行
- &&，逻辑或，类似于数学中的并，当左右两侧的布尔值全为false时，结果为false；否则为true
- 是一种 短路或，当 || 左侧变量、表达式已经可以确定整体结果，将不会执行符号右侧的变量或表达式
- true || alert('true'); // 因为有左侧有true，最终结果一定为true，故右侧alert语句不会执行
- false || alert('false'); // 因为只有两侧都为false时，才能确定最终结果，所以右侧alert语句会执行
当 逻辑与 color{red}{逻辑与} 逻辑与 和 逻辑或 color{red}{逻辑或} 逻辑或 遇到 非布尔值类型的值，会将其转换为布尔值作相应的运算后，结果会 返回原值 color{red}{返回原值} 返回原值
① 左侧为true，无法决定最终结果，需要看右侧的值，最终结果为 number 3
let result = "5" && 3;
② 左侧为true，无法决定最终结果，需要看右侧的值，最终结果为 string 5
let result = 3 && "5";
③ 左侧为false，最终结果为boolean false
result = false && "5";6. 关系运算符（>、<、>=、<=）
通常， color{red}{通常，} 通常，遇到其它非数值类型，会将其它类型值隐式类型转换为 Number 类型
6. 相等&全等运算符（== 、 ===、!=、!==）
- 使用关系运算符，会比较符号左右两侧值是否满足关系运算符
- 满足，返回 ture
- 不满足，返回 false
- 特殊情况①： 若左右两侧皆为字符串，会逐位比较字符串中每位字符的Unicode编码大小
- “abc” >= "b"； // b比a大，故结果为false
- 特殊情况②： NaN与任何值做关系运算，结果均为false**
| 运算符类型 | 是否会将两侧值自动转换为相同类型 | 作用 | 示例/th> | 特殊情况 |
|---|---|---|---|---|
| 相等运算符 == | 会 | 判断两侧变量是否相等 | 123 = "123"，结果为 true | null和undefined两者相等 |
| NaN与任何值（含自身NaN）均不相等 | ||||
| 全等运算符 === | 不会 | 判断两侧变量是否全等 | 123 = "123"，结果为 false | null和undefined两者不全等 |
| NaN与任何值（含自身NaN）均不全等 | ||||
| 不相等运算符 !== | 会 | 判断两侧变量是否部相等 | 123 != "123"，结果为 false | 参考 == 特殊情况 |
| 不全等运算符 !== | 不会 | 判断两侧变量是否不全等 | 123 !== "123"，结果为 true | 参考 === 特殊情况 |
语法： 条件表达式?表达式1:表达式2
8. 运算符优先级
- 当条件表达式结果为 true ，最终结果为表达式1的结果
- 当条件表达式结果为 false ，最终结果为表达式2的结果
- a>=b?a:b; // 可用于求两者较大值代码
运算符优先级表格可以参考MDN运算符优先级
不确定优先级的情况下，可以使用()来控制运算顺序
三、隐式类型转换
由于JS是一门弱类型语言，在使用运算符时，可能会发生隐式类型转换
1. 自动转换为字符串String类型2. 自动转换为数值Number类型
- 利用值＋空串，将值自动转换为String类型 ，1 + " " = '1'
3. 自动转换为数值Boolean类型
- 利用算术运算符，将值自动转换为Number类型 ，+"123 " = 123
- 利用 !! (两次逻辑非运算)，将值自动转换为Boolean类型 ，!!123 = true
结尾
如有错误，欢迎评论区指正。
更多其它知识可查询在线文档：[MDN在线文档](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference
