Javascript 中数据类型那些可能会中招的细节,阿里P8大牛亲自讲解

本文详细解释了JavaScript中的比较运算符(!=,==,===)在处理不同类型数据时的转换规则,包括null,undefined,对象,数字,字符串和布尔值的比较。还介绍了typeof用于检测数据类型的用法。同时提到了React和Vue的区别,特别是在状态管理、组件属性和双向绑定等方面。
摘要由CSDN通过智能技术生成
  • !! 两个感叹号是将其他的数据类型转换为 boolean 类型,相当于Boolean()
转换规则:
1、如果只有一个值,判断这个值是真还是假,遵循:只有 0 NaN “” null undefined 这五个是假,其余的都是真

例如:

console.log(!3)  // false

console.log(![]) // false

console.log(!{}) // false

console.log(!null) // true

console.log(!0) // true

console.log(!undefined) //true

console.log(!“”)) //true

注意: 此处 数字0才为假,如果是字符串的’0’,同样为真

例如:

if(0){

console.log(“为真”)

}else{

console.log(“为假”)

}

if(‘0’){

console.log(“为真”)

}else{

console.log(“为假”)

}

第一个输出 为假,第二个输出 为真

2、如果是两个值比较是否相等,遵循这个规则:

val1 == val2 两个值可能不是同一数据类型的,如果是 == 比较的话,会进行默认的数据类型转换

  • 1)、对象 == 对象,永远不相等

  • 2)、对象 == 字符串 现将对象转换为字符串(调用toString的方法),然后在进行比较

[] 转换为字符串 “”

{} 转换为字符串 “[object Object]”

所以:  [] == “” 为 true

{} == “” 为 false

  • 3)、对象 == 布尔类型 对象先转为字符串(toString),然后把字符串转换为数字(Number),布尔类型也转换为数字(true是1 false 是0),最后让两个数字比较

例如:

console.log([] == false) // 为 true

解析:首先 []转为字符串"“,然后字符串转为数字类型number,Number(”")结果为0,false

转为数字类型,Number(false) 结果也为0,所以 [] == false, 就解析成了 0与0的比较,所以相等,

返回true

  • 4)、对象 == 数字 对象先转为字符串(toString),然后把字符串转换为数字(Number)

  • 5)、数字 == 布尔 布尔类型转换为数字

  • 6)、数字 == 字符串,字符串转换为数字

例如:5 == ‘5’ // 为 true

  • 7)、字符串 == 布尔 都转换为数字

  • 8)、null === undefined 结果是true

console.log(null == undefined) // true

  • 9)、null和undefined 和其他任何数据类型都不相等

console.log(null == 0) // false

console.log(undefined == 0) // false

3、除了== 是比较,===也是比较(绝对比较),如果数据类型不一样肯定不相等

例如:

console.log(0 == false) // true

console.log(0 === fasle) // false

console.log(5 == “5”) // true

console.log(5 === “5”) // false

console.log(null == undefined) // true

console.log(null === undefined) // false

三、typeof(数据类型检测)

typeof 用来检测数据类型的,用法:typeof + 要检查的值,

返回一个字符串,包含了数据类型的字符( “number”,“string”,“boolean”,“undefined”,“function”,“object”)

  • typeof null 返回的结果是 “object”

  • typeof undefined 返回的结果是 “undefined”

虽然null 和 undefined 同为number数据类型,但是通过typeof检测的值不是number,而且也不相同。

  • typeof null 结果是 “object”

  • typeof [] 结果是 “object”

小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。

img
img
img
img

由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
img

react和vue的比较

相同
1)vitual dom
2)组件化
3)props,单一数据流

不同点
1)react是jsx和模板;(jsx可以进行更多的js逻辑和操作)
2)状态管理(react)
3)对象属性(vue)
4)vue:view——medol之间双向绑定
5)vue:组件之间的通信(props,callback,emit)

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

eact和vue的比较

相同
1)vitual dom
2)组件化
3)props,单一数据流

不同点
1)react是jsx和模板;(jsx可以进行更多的js逻辑和操作)
2)状态管理(react)
3)对象属性(vue)
4)vue:view——medol之间双向绑定
5)vue:组件之间的通信(props,callback,emit)

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-hshywmsp-1710787084745)]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值