【WEB 前端抱团学习群】0410 期技术分享:隐式类型转换

前言

2018 年伊始,我们准备实现一个小目标:

打造一个技术交流氛围浓郁的微信群。
让大家在这个群里轻松交流技术、没有扯淡,
拒绝吐槽,只关注技术学习本身。

因此,【WEB 前端抱团学习群】 就此诞生。

我们为这个群倾注极大精心与资源,期待给这个群提供诸多福利,例如:

1、聊天扯淡挺热闹,提个技术问题瞬间死寂?

——放心,在这个群里,拒绝扯淡,只谈学习。技术提问,必有回应~

2、独自一人无目的学习、没有学习目标?

——管理员会根据每人的基础做合理的学习计划、定期监督提醒~

3、自己学得怎么样?知识掌握的好不好?稀里糊涂的?

——群内提供阶段性技能水平测试,个人水平一目了然~

4、群里有没有技术大牛可以讨论的?

——每周邀请嘉宾(技术牛人、或妙味全职讲师)进行技术主题分享

5、做了练习无人点评、也不知道哪里可以优化或改进?

——专属的练习提交地址,会有资深讲师进行专业点评

6、都说进群抢红包,这群里会经常发红包么?

——围绕学习的奖励红包层出不穷,甚至会有奖学金提供唷~

7、还有更多可能的探索,我们会动态调整、不断尝试……

——也欢迎群友为我们提供各种建议,我们会认真倾听、努力改进~


VIP 进群:

“爱学习的人总是少数,但是大多数学习者都在这里!”
  • 扫码关注公众号,发送”VIP进群”关键字,入群共同学习,审核通过后入群


下午一如既往的发布整点群分享通知

今天下午的群技术分享通知来啦!

各种运算符相关运算规则及数据转换流程,是很多老司机都很容易翻船的地方,也是很多变态面试题根源出处;

例如:请分析以下结果的成因~
console.log([“0”] == [0]);
console.log(![“0”] == ![0]);
console.log([“0”]+0 == [0]+0);

今天讲师将为大家带来以下内容:

  • 隐式类型转换
  • 算术运算符相关的运算规则及转换过程
  • 逻辑符相关的运算规则及转换过程
  • 关系运算符的运算规则及转换过程
  • 以及,上面那道变态面试题的成因~

时间:16:00
嘉宾:妙味讲师莫涛
方式:微信群内-文字直播

时间临近16:00,省略群中伙伴们的超级期待,直接上干货~


今日分享主题:隐式类型转换

这个也是面试的时候,出面试题很多的一块,我们先举个例子。

  1. 比如下题:
  2. 下边的三个语句的执行结果为:
  3. console.log(["0"] == [0]);
  4. console.log(!["0"] == ![0]);
  5. console.log(["0"]+0 == [0]+0);
  6. Afalse true true
  7. Btrue false true
  8. Cfalse false true
  9. Dfalse false false
  10. 正确答案: A(解析在文末)

隐式数据类型转换:也就是说这个转换过程不受我们强制 js 偷偷自己转的;

  1. 10 - 5 结果为 5
  2. 按照道理数字和字符串是不能直接运算的
  3. 但是这里使用减号的时候,
  4. 减号就偷偷的把两边的数据都转换为数字然后进行运算,
  5. 这个就是隐式类型转换。

知道了隐式类型转换之后,我们来看看各种运算符带来的隐式类型转换。

我们先来看数学运算符的计算规则:

一、首先先来看下边这些:

-减,*乘,/除,%取模,

-=减等,*= 乘等,/除等,

%=模等,--自减,++自增,

+正号,-负号

这些运算符只能进行数学运算,所以在计算的时候会对比左右两侧的数据

如果,不是数字类型的数据,就转换成数字类型然后在进行计算,这个转换过程的规则和 Number() 方法的转换规则时一致的。

大家也可以理解为这些运算符帮我们调用 Number() 方法,把两侧数据都转换成数字之后再进行运算。

  1. 如下例:
  2. var a = true;
  3. console.log(++a);//2

a 本身是一个布尔值,但是自增计算的时候,就先把 a 转成了数字 1 ,然后 ++ 结果就是 2。

数学运算符除了上边的这些之外 还有

+ 加,+= 加等

这两个运算在 js 中稍微有些特殊,他们不只可以进行 加法运算 也可用于字符串连接

加号的转换规则如下

  1. 1.如果一个侧为NaN,则结果为NaN
  2. 2.如果两侧都是数字,则进行加法运算
  3. 3.如果一侧为字符串为字符串,另一侧是其他类型,则转成字符串之后,然后进行字符串连接
  4. 4.如果两侧都是字符串则进行字符串连接

二、接下来看看逻辑运算符 &&(与)||(或)!(非)

! 运算符:在处理数据时,如果不是布尔值,会直接调用 Boolean()方法进行转换,转换完之后,再进行计算。

&& 运算符:在执行时,遵从以下规则:

  1. 1、第一位是布尔值的true时,返回第二位的值,
  2. 例如:true&&1 返回 1
  3. 2、第一位是布尔值的false时,直接返回 false
  4. 3、第一位不是布尔值,则调用Boolean()进行转换
  5. 如果转换的结果为 true 则参照第1条;
  6. 否则,返回第一位的值
  7. 4、第一位不是布尔值,则调用Boolean()进行转换,
  8. 如果转换的结果为 true 则参照第1
  9. 否则,返回第一位的值
  10. 5、如果有一个值为null,返回null
  11. 6、如果有一个值为NaN,返回NaN
  12. 7、如果有一个值为undefined,返回undefined

|| 运算符:在执行时,遵从以下规则

  1. 如果第一个值经Boolean()转换后为false,则返回第二个值
  2. 否则返回第一个值

三、接下来看 关系运算符 <, >, <=, >= 的运算规则

关系运算本身也会比较任意类型,
具体的比较规则如下:

  1. 1、如果两个值都是数字,
  2. 则进行数字比较
  3. 2、如果两个值都是字符串,
  4. 则比较字符串对应的 Unicode
  5. 3、如果一个值是数字,
  6. 则将另外一个值转成数字进行比较
  7. 转换规则参照 Number 方法
  8. 4、如果一个数是对象,
  9. 则调用valueOf()方法
  10. 然后调用 toString方法
  11. 得到的结果按照前面的规则执行比较
  12. 如下例:
  13. var a = [0,1];
  14. /*
  15. valueOf() 结果为 0,1
  16. 然后调用 toString 方法转换成 '0,1'
  17. */
  18. console.log(a <= '0,1' );// true
  19. console.log(a >= '0,1' );// true
  20. 5、如果一个操作值是布尔值、nullundefined
  21. 则将其转换为数值,再进行比较
  22. 6、最后注意 NaNNaN 不等于任何值,所以直接返回 false

四、最后我们来看看 == 相等 和 != 不等

在比较两个值是否相等时,要注意 ==、!= 和 ===、!== 的区别,
前者两侧可以是任意类型都会进行比较,
后者如果两侧数据类型不一致,直接判断两侧不相等。

== 和 != 在具体比较时的规则如下:

  1. 1、两侧都是数字时,直接比较数字大小
  2. 2、两侧都是字符串时,直接比较字符串是否相同
  3. 3、两侧都是布尔值时,直接比较值是否相同
  4. 4、两侧都是对象时,比较两个对象的引用地址是否相同
  5. 5undefined null 在比较的时候只等于自己和其他任何类型都不相等,但是 undefined 等于 null
  6. 6、如果一个值是布尔值时,先把布尔值转成数字再比较
  7. 7、一个值是字符串,一个是数字时,会调用 Number() 转出数字再进行比较
  8. 8、如果一个值是对象, 先调用valueOf()方法进行比较,然后调用 toString 方法得出结果之后,参照上述过程进行比较

那关于常用运算符的规则我们就说到这了;


文初面试题解析

问题:下边的三个语句的执行结果为:

  1. console.log(["0"] == [0]);
  2. console.log(!["0"] == ![0]);
  3. console.log(["0"]+0 == [0]+0);
  4. Afalse true true
  5. Btrue false true
  6. Cfalse false true
  7. Dfalse false false
  8. 正确答案:A

解答:
(1)console.log([“0”] == [0]);

这里其实比较的是两个对象,那我们说过,对象比较的是啥,是引用地址,这里是两个对象,那肯定引用地址是不一样的,所以结果 为 false

(2)console.log(![“0”] == ![0]);
!会进行布尔值转换,对象转换的结果必然是 true,true == true,那结果也就是 true了

(3)console.log([“0”]+0 == [0]+0);

[“0”] 转换之后的结果为”0”,[“0”]+0 也就是 “0” + 0 ,+ 号,碰到字符串之后,会都转成字符串连接,[“0”]+0 最后的结果为 “00”,[0] 转换之后的结果为”0”,”0” + 0 的结果自然是 0,最后,比较 “00” == “00” ,结果自然是 true。

为了检测同学们的所学,又一道抢红包的题看看今天大家的学习成果:

问题:下列代码中最终输出:

  1. var a = [0];
  2. var b = ["0"];
  3. var c = (a==b)||(a&&b);
  4. console.log(c);
  5. A: true
  6. B: false
  7. C: [0]
  8. D: ["0"]
  9. 正确答案: D

答案解析:

(a == b) 前边说过是false了,
那个语句就变成了 false || (a&&b)

a&&b a:[0]转成布尔值 为 true,
所以这个语句返回 b 也就是 [“0”]

false||[“0”] 那最终输出 [“0”]

今天的分享就到这里,小伙伴们,你学会了嘛~


精彩课程推荐:

足不出户,享受优质远程课程!

远程《零基础前端开发 “PC 端+移动端+响应式开发” 课程》
https://miaov.com/index.php/news/newsDetail/nid/322

远程《JS 前端资深工程师就业精英班》
https://miaov.com/index.php/news/newsDetail/nid/316

远程《妙味 React+redux 高阶实战项目班》
https://www.miaov.com/index.php/news/newsDetail/nid/338

超五星级优质远程课服务:

1、系统完善的课程体系——内容有保障;
2、技术精湛的资深讲师授课——品质有保障;
3、远程视频直播 + 录播双管齐下——复习有保障;
4、全职老师全天 14 小时轮换在线答疑——服务有保障;
5、作业批改与练习讲解服务——答疑解惑有保障;
6、阶段式测评服务——学习效果有保障;
7、结课项目由妙味讲师倾心指导——毕业作品有保障;
8、简历指导 + 面试过程专人跟进——学完就业有保障;

报名咨询:

• 咨询QQ:2852509866、2852509867、2852509868
• 电话:010-57269690
• 微信:miaov-class

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
官方微博
常见问题
手机观看
微信扫一扫
公众号内观看视频
咨询客服
点击咨询QQ客服
微信客服
返回顶部