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

发布于:2023-01-24 ⋅ 阅读:(18) ⋅ 点赞:(0) ⋅ 评论:(0)

JS学习笔记(二)

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



一、强制 / 显式类型转换

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

1. 转换成字符串String

方法: \color{red}{方法:} 方法:

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

    1. 函数 + 对象 = 方法
    1. 对象是具有属性和方法的值,所有数据类型的量都是对象
    1. 参数是 隐式传递

使用yy函数的方式:yy(),函数如需要传入参数,则在括号内传入参数yy(传入参数)

  • (1)方法是特殊的函数
  • (2)参数是显示传递

(1)使用 toString()方法

注: NullUndefined 类型没有 toString() 方法;可以使用后续 String() 来将它们转换为字符串 nullundefined

<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) 结果为1Number(false) 结果为0
  • 2. Number(null) 结果为0
  • 3. Number(undefined) 结果为NaN
  • 4. Number([]) 结果为0
  • 5. Number({}) 结果为NaN

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

注:Number("")0ParseInt("")NaN

  • 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. 一元操作符

只操作一个值的操作符

(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后的值,再赋值给变量
    • 前自减--alet 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两者相等
NaN与任何值(含自身NaN)均不相等
全等运算符 === 不会 判断两侧变量是否全等 123 = "123",结果为 false null和undefined两者不全等
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高级程序设计》,如有错误,欢迎评论区指正。


网站公告

欢迎关注微信公众号

今日签到

点亮在社区的每一天
签到