JS学习笔记（二）

本系列更多文章，可以查看专栏 JS学习笔记

文章目录

JS学习笔记（二）
一、强制 / 显式类型转换
二、操作符
三、隐式类型转换
结尾

一、强制 / 显式类型转换

类型转换，指将其它类型转换成字符串值、数值和布尔值

1. 转换成字符串String

$\color{red}{方法：}$

变量a是某个类的实例化对象，且该类有xx方法，则变量a使用xx方法的方式：a.xx()

函数 + 对象 = 方法

对象是具有属性和方法的值，所有数据类型的量都是对象

参数是 隐式传递

使用yy函数的方式：yy（），函数如需要传入参数，则在括号内传入参数，yy(传入参数)

（1）方法是特殊的函数

（2）参数是显示传递

（1）使用 toString()方法

注： Null 和 Undefined 类型没有 toString() 方法；可以使用后续 String() 来将它们转换为字符串 null 和 undefined

<script>
	let test1 = 10;
	document.write(
		"test1的类型:" + typeof test1 + "<br>test1:" + test1 + "<br>"
	);
	test1 = test1.toString();
	document.write(
		"test1的类型:" + typeof test1 + "<br>test1:" + test1 + "<hr>"
	);
</script>

效果如下图所示：

在这里插入图片描述

（2）使用 String()函数

数据类型中拥有toString()方法的，实际使用String()函数时，就是在函数中调用了toString()方法。

<script>
	let test2 = 123; 
	document.write(
		"test2的类型:" + typeof test2 + "<br>test2:" + test2 + "<br>"
	);
	test2 = String(test2);
	document.write(
		"test2的类型:" + typeof test2 + "<br>test2:" + test2 + "<hr>"
	);
</script>

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. Number(true) 结果为1，Number(false) 结果为0

2. Number(null) 结果为0

3. Number(undefined) 结果为NaN

4. Number([]) 结果为0

5. Number({}) 结果为NaN

（2）使用 ParseInt()、ParseFloat()函数（仅用于字符串）

注：Number("") 为 0 ；ParseInt("") 为 NaN

ParseInt()函数，将字符串转换为整数值，可以转换二进制、十进制、八进制、十六进制的字面量

ParseFloat()函数，将字符串转换为浮点类型数值，仅可以转换十进制的字面量；会忽略第二个及以后的小数点

在这里插入图片描述

3. 转换成Boolean类型

（1）使用 Boolean()函数

原数据类型	转换前的值	转换后的值
Number类型	0和NaN	false
Number类型	其它Number值	true
String类型	空串	false
String类型	其它字符串（含连续多个空格字符串、false字符串）	true
Null类型	null	false
Undefined类型	undefined	false
Object类型	任何对象（含空对象{}）	true

二、操作符

1. 一元操作符

只操作一个值的操作符

（1）递增/递减操作符（++、- -）

遇到其它非数值类型，会将其它类型值隐式类型转换为 Number 类型

++，自增运算符，相当于将变量自身加1后的值，再赋值给变量

前自增++a，let a = 5; let b = ++a; // 此时，a = 6，b = 6;

后自增a++，let a = 5; let b = a++; // 此时，a = 6，b = 5;

单独使用前自增和后自增时，对于变量本身差别不大，都相当于只对变量作加一运算。

--，自减运算符，相当于将变量自身减1后的值，再赋值给变量

前自减--a，let a = 5; let b = --a; // 此时，a = 4，b = 4;

后自减a--，let a = 5; let b = a--; // 此时，a = 4，b = 5;

单独使用前自减和后自减时，对于变量本身差别不大，都相当于只对变量作减一运算。

（2）一元加和减（+、-）

遇到其它非数值类型，会将其它类型值隐式类型转换为 Number 类型

+，正号 +3、+0.666等

-，负号 -1、-Inifity等

2. 位操作符

有符号整数使用32位的前31位表示整数值，第32位表示数值符号，0为正，1为负。
注：从后往前数，依次为第0位，第1位……第31位

正值：以真正的二进制格式存储，即31位中的每一位都代表2的对应幂。

负值：以二补数（或补码）的二进制编码存储。

此处不对以上内容，做过多解释，可以参考《JavaScript高级程序设计》

（1）按位非（~）

将数值转换为用32位表示的有符号整数（二进制数），每一位取反（0变1,1变0），得到按位非的结果。

let num1 = 25; 		// 二进制 00000000000000000000000000011001 
let num2 = ~num1; 	// 二进制 11111111111111111111111111100110 
console.log(num2); 	// -26 【25*(-1) -1 =-26】

相当于，对数值取反并减1

（2）按位与（&）

将数值转换为用32位表示的有符号整数（二进制数）后，将每一位对齐，作“与”运算（同位上的数均为1，结果为1；其余结果为0），得到“按位与”的结果。

（3）按位或（|）

将数值转换为用32位表示的有符号整数（二进制数）后，将每一位对齐，作“或”运算（同位上的数均为0，结果为0；其余结果为1），得到“按位或”的结果。

（4）按位异或（^）

将数值转换为用32位表示的有符号整数（二进制数）后，将每一位对齐，作“异或”运算（同位上的数相同，结果为0；不同，结果为1），得到“按位异或”的结果。

（5）左移（<<）

将数值转换为用32位表示的有符号整数（二进制数）后，将每一位向左移动指定位数，并保留操作数值的符号。

数值 << 指定位数

（6）有符号右移（>>）

将数值转换为用32位表示的有符号整数（二进制数）后，将每一位向右移动指定位数，有空位即补0，但是保留符号位不变。

数值 >> 指定位数

（7）无符号右移（>>>）

将数值转换为用32位表示的有符号整数（二进制数）后，将每一位向右移动指定位数，有空位即补0，符号位可能会改变。

数值 >>> 指定位数

3. 布尔操作符

遇到其它非布尔值类型，会将其它类型值隐式类型转换为 Boolean 类型

（1）逻辑非（!）

!，逻辑非，将值转换成布尔值，并将布尔值变为相反的结果

!true = false; !false = true;

（2）逻辑与（&&）

&&，逻辑与，类似于数学中的交集，当左右两侧的布尔值全为true时，结果为true；否则为false

是一种 短路与，当 && 左侧变量、表达式已经可以确定整体结果，将不会执行符号右侧的变量或表达式

true && alert('true'); // 因为只有两侧都为true时，才能确定最终结果，所以右侧alert语句会执行

false && alert('false'); // 因为有左侧有false，最终结果一定为false，故右侧alert语句不会执行

（3）逻辑或（||）

&&，逻辑或，类似于数学中的并，当左右两侧的布尔值全为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";

4. 算术操作符（+、-、*、/、**、%）

包括 乘性操作符(*、/、%)、加性操作符(+、-)、【ES6新增】指数操作符( ** )

$\color{red}{通常，}$ 遇到其它非数值类型，会将其它类型值隐式类型转换为 Number 类型

+，加法运算符 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

5. 关系操作符（>、<、>=、<=）

通常，遇到其它非数值类型，会将其它类型值隐式类型转换为 Number 类型

使用关系运算符，会比较符号左右两侧值是否满足关系运算符

满足，返回 ture

不满足，返回 false

特殊情况①： 若左右两侧皆为字符串，会逐位比较字符串中每位字符的Unicode编码大小

“abc” >= "b"； // b比a大，故结果为false

特殊情况②： NaN与任何值做关系运算，结果均为false**

6. 相等操作符（`==` 、 `===`、`!=`、`!==`）

等于 == 和不等于 !=

全等 === 和不全等 !==

运算符类型	是否会将两侧值自动转换为相同类型	作用	示例/th>	特殊情况
相等运算符 ==	会	判断两侧变量是否相等	123 = "123"，结果为 true	null和undefined两者相等
相等运算符 ==	会	判断两侧变量是否相等	123 = "123"，结果为 true	NaN与任何值（含自身NaN）均不相等
全等运算符 ===	不会	判断两侧变量是否全等	123 = "123"，结果为 false	null和undefined两者不全等
全等运算符 ===	不会	判断两侧变量是否全等	123 = "123"，结果为 false	NaN与任何值（含自身NaN）均不全等
不相等运算符 !==	会	判断两侧变量是否部相等	123 != "123"，结果为 false	参考 == 特殊情况
不全等运算符 !==	不会	判断两侧变量是否不全等	123 !== "123"，结果为 true	参考 === 特殊情况

7. 条件操作符（ `? :` ）

语法： 条件表达式?表达式1:表达式2

当条件表达式结果为 true ，最终结果为表达式1的结果

当条件表达式结果为 false ，最终结果为表达式2的结果

a>=b?a:b; // 可用于求两者较大值代码

8. 赋值操作符（=、+=、-=、*=、/=、**=、%=）

遇到其它非数值类型，会将其它类型值隐式类型转换为 Number 类型

$\color{red}{使用=时，是将等号右边的变量、值、表达式（计算后的值）赋值给等号左边的变量，这里等号右边的变量仅看作一个值}$

=，加法运算符 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

9. 逗号操作符（,）

通常，用于在一条语句中执行多个操作（常见）。

let a = 1,b = 2,c = 3;

或者，在赋值时，使用逗号操作符分隔值，最终返回表达式最后一个值（不常见）。

let num = (1,2,3,4); // let num = 4;

10. 操作符优先级

操作符优先级表格可以参考MDN操作符优先级

不确定优先级的情况下，可以使用()来控制运算顺序

三、隐式类型转换

由于JS是一门弱类型语言，在使用运算符时，可能会发生隐式类型转换

1. 自动转换为字符串String类型

利用值＋空串，将值自动转换为String类型，1 + " " = '1'
注：在使用"+"时，若前一个变量为字符串类型时，后一个变量为数值类型时，会将数值类型转换为String类型，做拼串操作

2. 自动转换为数值Number类型

利用算术运算符，将值自动转换为Number类型，+"123 " = 123
注：在使用"+"时，若前一个变量为数值类型时，后一个变量为字符类型时，会将字符类型转换为Number类型，做加法运算

3. 自动转换为数值Boolean类型

利用 !! (两次逻辑非运算)，将值自动转换为Boolean类型，!!123 = true

结尾

部分内容参考《ECMAScript 6 入门》《JavaScript权威指南》《JavaScript高级程序设计》，如有错误，欢迎评论区指正。

本文含有隐藏内容，请开通VIP 后查看

JS学习笔记（二）显式类型转换、操作符、隐式类型转换

JS学习笔记（二）

文章目录

一、强制 / 显式类型转换

1. 转换成字符串String

（1）使用 toString()方法

（2）使用 String()函数

2. 转换成Number类型

（1）使用 Number()函数

（2）使用 ParseInt()、ParseFloat()函数（仅用于字符串）

3. 转换成Boolean类型

（1）使用 Boolean()函数

二、操作符

1. 一元操作符

（1）递增/递减操作符（++、- -）

（2）一元加和减（+、-）

2. 位操作符

（1）按位非（~）

（2）按位与（&）

（3）按位或（|）

（4）按位异或（^）

（5）左移（<<）

（6）有符号右移（>>）

（7）无符号右移（>>>）

3. 布尔操作符

（1）逻辑非（!）

（2）逻辑与（&&）

（3）逻辑或（||）

4. 算术操作符（+、-、*、/、**、%）

5. 关系操作符（>、<、>=、<=）

6. 相等操作符（== 、 ===、!=、!==）

7. 条件操作符（ ? : ）

8. 赋值操作符（=、+=、-=、*=、/=、**=、%=）

9. 逗号操作符（,）

10. 操作符优先级

三、隐式类型转换

1. 自动转换为字符串String类型

2. 自动转换为数值Number类型

3. 自动转换为数值Boolean类型

结尾

网站公告

今日签到

热门文章

最新发布

6. 相等操作符（`==` 、 `===`、`!=`、`!==`）

7. 条件操作符（ `? :` ）