JavaScript中==和===的区别
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
前言
JavaScript 中的相等运算符无疑是新手开发者最容易混淆的知识点之一。
==
和===
这两个运算符的细微差别往往会在代码中造成一些令人困惑的行为
在本文中,我们将深入探讨这两个相等运算符的工作原理,比较它们的特点和局限性
让我们开始吧!
区别
-
类型转换:
==
运算符在比较时会进行隐式类型转换,将操作数转换为相同的类型后再进行比较。===
运算符不会进行隐式类型转换,它会先检查操作数的类型,如果类型不同就直接返回false
。
-
比较结果:
==
运算符在进行比较时,会尽量将操作数转换为相同的类型,然后再比较值。===
运算符严格比较,不仅要求值相同,还要求类型相同。
== 示例
在进行==操作有以下的规则:
- 如果两个操作数的类型相同,则直接比较它们的值。
- 如果操作数中有布尔值,则先将布尔值转换为数字,再进行比较。
- 如果其中一个操作数是字符串,另一个是数字,则将字符串转换为数字,再进行比较。
- 如果其中一个操作数是对象,另一个不是,则调用对象的
valueOf()
方法获取原始值,再进行比较。如果无法获取原始值,则调用toString()
方法获取字符串,再进行比较。
接下来对他们进行比较
- Number vs Number:
1 2 3 | console.log(5 == 5); // true console.log(0 == -0); // true console.log(NaN == NaN); // false |
数字之间的比较会直接比较它们的值。需要注意的是,NaN
与任何值(包括自己)都不相等。
- String vs String:
1 2 3 | console.log( "hello" == "hello" ); // true console.log( "42" == "42" ); // true console.log( "" == "" ); // true |
字符串之间的比较会逐个字符进行比较。
- Boolean vs Boolean:
1 2 | console.log( true == true ); // true console.log( false == false ); // true |
布尔值之间的比较会直接比较它们的值。
- Null vs Undefined:
1 2 3 | console.log( null == undefined); // true console.log( null == null ); // true console.log(undefined == undefined); // true |
null
和 undefined
在比较时被视为相等。
- Number vs String:
1 2 3 4 | console.log(5 == "5" ); // true console.log(0 == "" ); // true console.log(0 == "0" ); // true console.log(42 == "hello" ); // false 当无法转换为数字转换为0 |
当一个操作数是数字,另一个是字符串时,字符串会被转换为数字进行比较。
- Boolean vs Number:
1 2 3 | console.log( true == 1); // true console.log( false == 0); // true console.log( true == 2); // false |
布尔值在比较时会先转换为数字,true
转换为 1
,false
转换为 0
。
- Object vs Primitive:
1 2 | console.log([10] == 10); // true console.log({} == "[object Object]" ); // true |
当一个操作数是对象,另一个是原始值时,对象会先调用 ToPrimitive
抽象操作进行转换。
=== 示例
如果类型不同,=== 直接返回false
- Number vs Number:
1 2 3 | console.log(5 === 5); // true console.log(0 === -0); // true console.log(NaN === NaN); // false |
数字之间的严格比较会直接比较它们的值。需要注意的是,NaN
与任何值(包括自己)都不相等。
- String vs String:
1 2 3 | console.log( "hello" === "hello" ); // true console.log( "42" === "42" ); // true console.log( "" === "" ); // true |
字符串之间的严格比较会逐个字符进行比较。
- Boolean vs Boolean:
1 2 | console.log( true === true ); // true console.log( false === false ); // true |
布尔值之间的严格比较会直接比较它们的值。
- Null vs Undefined:
1 2 3 | console.log( null === undefined); // false console.log( null === null ); // true console.log(undefined === undefined); // true |
null
和 undefined
在严格比较时是不相等的。
- Number vs String:
1 2 3 4 | console.log(5 === "5" ); // false console.log(0 === "" ); // false console.log(0 === "0" ); // false console.log(42 === "hello" ); // false |
当一个操作数是数字,另一个是字符串时,它们不会进行任何类型转换,直接返回 false
。
- Boolean vs Number:
1 2 3 | console.log( true === 1); // false console.log( false === 0); // false console.log( true === 2); // false |
布尔值和数字在严格比较时也不会进行任何类型转换,直接返回 false
。
- Object vs Primitive:
1 2 | console.log([10] === 10); // false console.log({} === "[object Object]" ); // false |
当一个操作数是对象,另一个是原始值时,它们的类型不同,所以直接返回 false
。
总结
本文讲解了==和===的数据对比之间的区别,通过代码示例深入分析
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
2023-07-19 记录--你还在用传统轮播组件吗?来看看遮罩轮播组件
2022-07-19 记录--vue中使用vue-video-player实现直播推流播放m3u8
2021-07-19 RageFrame学习笔记:创建路由+导入layui