前端JavaScript中的 == 和 ===区别,以及他们的应用场景,快来看看吧,积累一点知识。

简介: 等于操作符用两个等于号( == )表示,如果操作数相等,则会返回 true

一、等于操作符


等于操作符用两个等于号( == )表示,如果操作数相等,则会返回 true


前面文章,我们提到在JavaScript中存在隐式转换。等于操作符(==)在比较中会先进行类型转换,再确定操作数是否相等


遵循以下规则:


如果任一操作数是布尔值,则将其转换为数值再比较是否相等

let result1 = (true == 1); // true


如果一个操作数是字符串,另一个操作数是数值,则尝试将字符串转换为数值,再比较是否相等

let result1 = ("55" == 55); // true


如果一个操作数是对象,另一个操作数不是,则调用对象的 valueOf() 方法取得其原始值,再根据前面的规则进行比较

let obj = {valueOf:function(){return 1}}
let result1 = (obj == 1); // true


null 和undefined相等

let result1 = (null == undefined ); // true


如果有任一操作数是 NaN ,则相等操作符返回 false

let result1 = (NaN == NaN ); // false


如果两个操作数都是对象,则比较它们是不是同一个对象。如果两个操作数都指向同一个对象,则相等操作符返回true

let obj1 = {name:"xxx"}
let obj2 = {name:"xxx"}
let result1 = (obj1 == obj2 ); // false


下面进一步做个小结:


两个都为简单类型,字符串和布尔值都会转换成数值,再比较


简单类型与引用类型比较,对象转化成其原始类型的值,再比较


两个都为引用类型,则比较它们是否指向同一个对象


null 和 undefined 相等


存在 NaN 则返回 false


二、全等操作符


全等操作符由 3 个等于号( === )表示,只有两个操作数在不转换的前提下相等才返回 true。即类型相同,值也需相同

let result1 = ("55" === 55); // false,不相等,因为数据类型不同
let result2 = (55 === 55); // true,相等,因为数据类型相同值也相同


undefined 和 null 与自身严格相等

let result1 = (null === null)  //true
let result2 = (undefined === undefined)  //true


三、区别


相等操作符(==)会做类型转换,再进行值的比较,全等运算符不会做类型转换

let result1 = ("55" === 55); // false,不相等,因为数据类型不同
let result2 = (55 === 55); // true,相等,因为数据类型相同值也相同


null 和 undefined 比较,相等操作符(==)为true,全等为false

let result1 = (null == undefined ); // true
let result2 = (null  === undefined); // false


小结

相等运算符隐藏的类型转换,会带来一些违反直觉的结果

'' == '0' // false
0 == '' // true
0 == '0' // true
false == 'false' // false
false == '0' // true
false == undefined // false
false == null // false
null == undefined // true
' \t\r\n' == 0 // true


但在比较null的情况的时候,我们一般使用相等操作符==

const obj = {};
if(obj.x == null){
  console.log("1");  //执行
}


等同于下面写法

if(obj.x === null || obj.x === undefined) {
    ...
}


使用相等操作符(==)的写法明显更加简洁了


所以,除了在比较对象属性为null或者undefined的情况下,我们可以使用相等操作符(==),其他情况建议一律使用全等操作符(===)

相关文章
|
8天前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
7天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
8天前
|
前端开发 算法 JavaScript
最小堆最大堆了解吗?一文了解堆在前端中的应用
该文章详细解释了堆数据结构(特别是最小堆)的概念与性质,并提供了使用JavaScript实现最小堆的具体代码示例,包括堆的插入、删除等操作方法。
最小堆最大堆了解吗?一文了解堆在前端中的应用
|
9天前
|
自然语言处理 JavaScript 前端开发
JS中this的应用场景,再了解下apply、call和bind!
该文章深入探讨了JavaScript中`this`关键字的多种应用场景,并详细解释了`apply`、`call`和`bind`这三个函数方法的使用技巧和差异。
|
8天前
|
存储 前端开发 算法
太平洋大西洋水流问题如何解决?一文了解图在前端中的应用
该文章深入探讨了图数据结构的基本概念及其在前端领域的多种应用,包括图的不同表示方法(邻接矩阵与邻接表)和经典的图算法(如深度优先搜索与广度优先搜索),并通过具体实例讲解了如何使用JavaScript来解决图相关的编程问题,如太平洋大西洋水流问题。
太平洋大西洋水流问题如何解决?一文了解图在前端中的应用
|
8天前
|
JSON 前端开发 JavaScript
一文了解树在前端中的应用,掌握数据结构中树的生命线
该文章详细介绍了树这一数据结构在前端开发中的应用,包括树的基本概念、遍历方法(如深度优先遍历、广度优先遍历)以及二叉树的先序、中序、后序遍历,并通过实例代码展示了如何在JavaScript中实现这些遍历算法。此外,文章还探讨了树结构在处理JSON数据时的应用场景。
一文了解树在前端中的应用,掌握数据结构中树的生命线
|
8天前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
8天前
|
算法 前端开发 机器人
一文了解分而治之和动态规则算法在前端中的应用
该文章详细介绍了分而治之策略和动态规划算法在前端开发中的应用,并通过具体的例子和LeetCode题目解析来说明这两种算法的特点及使用场景。
一文了解分而治之和动态规则算法在前端中的应用
|
9天前
|
缓存 JavaScript 前端开发
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
该文章详细讲解了JavaScript中的作用域、闭包概念及其应用场景,并简要分析了函数柯里化的使用。
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
|
9天前
|
存储 JSON 前端开发
栈在前端中的应用,顺便再了解下深拷贝和浅拷贝!
该文章探讨了栈在前端开发中的应用,并深入讲解了JavaScript中深拷贝与浅拷贝的区别及其实现方法。
栈在前端中的应用,顺便再了解下深拷贝和浅拷贝!
下一篇
无影云桌面