详解类型转换

如果要问面试官一定会问的是什么或者说面试题一定会出的是什么?那答案一定是类型转换。

但是菜鸟只想说一句,类型转换真的是太多了,好难得记忆,所以这里就总结一下,顺便附征部分面试常见题!

类型转换

类型转换是js中逃不过去的坎,其中包含显示类型转换和隐式类型转换,其中的难点还要属隐式类型转换

一、显式类型转换

显示类型转换是通过具体的方法,手动的进行转换的方式。

1、数值运算符(+)和负数值运算符(-)

他们的作用可以将任何值转为数值(与 Number() 函数的作用类似),一般用于显示类型转换。
在这里插入图片描述
注意:

  • 在这里插入图片描述
  • 在这里插入图片描述
  • 所以有字符串参加 + 时,不会继续转化为数字,而是连接了!

2、parseInt

在这里插入图片描述

这里需要注意的是:

1、parseInt 只能转化纯数字的字符串 或者 开头是数字的字符串(舍弃后面全部)!

这里让菜鸟想起了一道面试题,之前还是很常见的:

在这里插入图片描述

请问输出的是什么?答案是 1, NaN, NaN

这里是因为map接收三个参数,然后 parseInt 默认接收了前两个,所以导致这个问题!

具体解释:

在这里插入图片描述

parseInt 的第二个参数这里需要理解清楚一点,是对要转换的数的进制基数,而不是要转换成的进制基数!

所以

在这里插入图片描述

而这个才是正确的

在这里插入图片描述

3、js提供的包装对象

我们可以通过 JavaScript 内置的一些 API 将一种类型转换为另一种类型,这称为显式类型转化。执行显式类型转换的最简单方法是使用 Boolean()Number()String()parseInt()等函数,例如:

String(2 - true);     // '1'
'56' === String(56);  // true
Number('2350e-2');    // '23.5'
Number('23') + 7;     // 30
Boolean('');          // false
Boolean(2) === true;  //true
字符串布尔型转布尔型

注意:

  1. 字符串的’true’ == true 或者 ‘true’ === true都是返回的false,false同理!

在这里插入图片描述

注:

不建议调用js的包装类型去定义基本类型的变量!

二、隐式类型转换

隐式类型转换是通过运算的方式,自动进行转换的方式。

1、数字与字符串运算

数字与字符串相运算时,会自动把字符串转换为数字类型(只有纯数字字符串才行 或者 以数字开头的字符串 可以使用 parseInt (String) 使其转换为数字[不能使用Number()]),然后计算出结果。

在这里插入图片描述
注意:

+ 比较特别,不仅可以表示加法,还表示 连接符 ,因此数字与字符串相加时,实际上是连接两个变量成为字符串,并不会发生隐式转换(上面第一条有说)

2、数字与布尔值运算

数字与布尔值运算时,会自动把布尔值转换为数字类型,true转换成1,false转换成0
在这里插入图片描述

3、undefined、null 参与运算

undefined表示未定义,而null表示已经定义,其值为空,因此隐式转换时,undefined不可以转换为数字,而 null可以转化为0

在这里插入图片描述

4、!参与运算

! 运算也可以用来做类型转换,将其他类型的值转换为布尔类型的值 (为了保证正确性可以采用两个非运算)

在这里插入图片描述

5、==的隐式转化

在这里插入图片描述

6、比较运算符类型转化

在这里插入图片描述

总结

基本就是:不管计算还是比较,都是将操作数转化为数字或者字符串来比较的!而且类型转换真的很重要,很多笔试都会考,必须记住!!!

注意

不管是隐式转换还是显式转换,只有调用的时候才会导致类型的变化,原本的变量还是原本的类型和数值!

类型转换表

在这里插入图片描述
在这里插入图片描述

注意:

1、请务必记下这些东西,笔试真的很容易考!

2、js中只有undefined、null、“”、0、NaN转化为Boolean类型是false!

toString

在这里插入图片描述

特殊情况

在这里插入图片描述

valueOf

在这里插入图片描述

对象转原始值

在这里插入图片描述

对象的隐式转化

在这里插入图片描述

3、类型比较的类型转换常见面试题

一、常见的特殊的比较

undefined == null; //true
undefined === null; //false
NaN == NaN; //false
NaN != NaN  //true


typeof null;  // Object
null instanceof object // false


// 比较过程
[] == ![]
// 将右边 ![] 进行转换
[] == false
// 隐式转换布尔值为数字
[] == 0
// 转换左边的 [],调用 [] 实例的 valueOf 方法
[] == 0
// valueOf 方法返回的不是基本类型值,再次调用 toString 方法
'' == 0
// 隐式转换字符串为数字
0 == 0
// 返回结果
true


// 比较过程
{} == !{}
// 将右边 !{} 进行转换 
{} == false
// 隐式转换布尔值为数字
{} == 0
// 转换左边的 {},调用 {} 实例的 valueOf 方法
{} == 0
// valueOf 方法返回的不是基本类型值,再次调用 toString 方法
'[object Object]' == 0
// 隐式转换字符串为数字
1 == 0
// 返回结果
false


1 + '1' == '1' + '1' == '11'
true + true == 1 + 1 == 2
4 + [] == '4' + '' == '4'
4 + {} == '4' + '[object Object]' == '4[object Object]'
4 + [1] == '4' + '1' == '41'
4 + [1, 2, 3, 4] == '4' + '1, 2, 3, 4' == '41,2,3,4'
'a' + + 'b' == 'a' + 'NaN' == 'aNaN'


'true' == true // false
'true' === true // false

NaN注意

1、NaN与任何值比较都是false,包括他自己,可以用 isNaN() 来判断是否为NaN !


在这里插入图片描述


2、NaN表示变量不是数字,但是 其类型却是数字类型


在这里插入图片描述


3、NaN用来判断一个数是不是NaN或者能不能转化成NaN


在这里插入图片描述

二、一般情况

一般情况下,当不同的类型进行比较时,先把左右的类型转换为数字类型( 当然前提是可以转换为数字类型 ):

在这里插入图片描述

注意:

虽然 null 和 false 都可以转换为数字类型的0,但是两者无法比较!

三、字符串类型

当比较的两个都是字符串类型的时候,不会转换为数字类型,而是按照字符串 每一位(一位一位的比较)Unicode码 进行比较。

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

PBitW

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值