详解JavaScript运算符中==和===的区别

 更新时间:2023年05月23日 08:20:44   作者:摸鱼王胖嘟嘟  
在JavaScript中==运算符和===运算符是经常遇到的,那么二者有哪些区别呢,本文就来和大家进行简单的讨论,感兴趣的小伙伴可以跟随小编一起学习学习

前言

简单的来讲:

== 代表的是相等

=== 代表的是严格相等

==运算符

==,两边值类型不同的时候,要先进行类型转换,再比较

如果两个都是数值||字符串||布尔值,直接进行比较

console.log(1 == 1); // true
console.log(1 == 2); // false
console.log('a' == 'a'); // true
console.log('a' == 'b'); // false
console.log(true == true); // true
console.log(true == false); // false

如果一个是String类型,另一个是Number类型,会把String类型转换成Number类型再进行比较

console.log(1 == '1'); // true
console.log(1 == 'true'); // false

如果有一个操作符是布尔值,在比较时就会转换成Number类型再比较

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

如果有一个是对象,另一个不是,则会调用对象的 valueOf() 和 toString() 把对象进行一个转换

console.log([] == false); // true
console.log([] == 0); // true

只有 null 遇到 undefined 进行比较是 true,其他组合都是不相等的

console.log(null == undefined); // true
console.log(null == 0); // false 
console.log(null == false); // false
console.log(undefined == 0); // false

===运算符

==,不做类型转换,类型不同的一定不等。

  • 先判断数据的类型是否相等,如果类型都不同,直接就返回 false
  • 如果数据类型相等,就会开始判断值是否相等
  • 如果两个都是 Object,那么会判断它们的引用地址是否一致
console.log(1 === '1'); // false
console.log(0 === false); // false
console.log(null === undefined); // false
let a = {};
let b = {};
let c = a;
console.log(a === b); // false
console.log(a === c); // true

练习

console.log("==========================")
		let obj = {
		    a: 10,
		    b: 'hello'
		};


		let obj1 = {
		    a: 10,
		    b: 'hello'
		};
		console.log(obj);
		console.log("对象之间比较,== 与 === 结果相同");
		console.log("obj == obj1结果:" + (obj == obj1));  // false 相同类型,== 与 === 无区别,比较引用
		console.log("obj === obj1结果:" + (obj === obj1));// false 相同类型,== 与 === 无区别,比较引用
		
		console.log("==========================")
		console.log("String与Number之间比较")
		let num = 10;
		let num1 = 10;
		let str = "10";
		let str1 = "String";
		console.log("String == Number结果:" + (num == str));  // true 转为Number值相同 
		console.log("String === Number结果:" + (num === str));// false 类型不同
		console.log("同类型值相同 == 结果:" + (num == num1));  // true 类型相同,值相同
		console.log("同类型值相同 === 结果:" + (num === num1));// true 类型相同,值相同
		console.log("同类型值不同 == 结果:" + (str == str1));  // false 类型相同, 值不同
		console.log("同类型值不同 === 结果:" + (str === str1));// false 类型相同, 值不同
		
		console.log("=========================");
		let objStr = '{"a":10,"b":"hello"}';
		console.log("对象与字符串 == 比较" + (objStr == obj));  // false 对象内容内部结构与字符串表示方式不同
		console.log("对象与字符串 === 比较" + (objStr === obj));// false 类型不同

输出:

==========================
{a: 10, b: 'hello'}
对象之间比较,== 与 === 结果相同
obj == obj1结果:false
obj === obj1结果:false
==========================
String与Number之间比较
String == Number结果:true
String === Number结果:false
同类型值相同 == 结果:true
同类型值相同 === 结果:true
同类型值不同 == 结果:false
同类型值不同 === 结果:false
=========================

到此这篇关于详解JavaScript运算符中==和===的区别的文章就介绍到这了,更多相关JavaScript运算符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS中的Error对象及使用JSON.stringify()序列化Error问题

    JS中的Error对象及使用JSON.stringify()序列化Error问题

    这篇文章主要介绍了JS中的Error对象及使用JSON.stringify()序列化Error问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • JavaScript实现图片合成下载的示例

    JavaScript实现图片合成下载的示例

    这篇文章主要介绍了JavaScript实现图片合成下载的示例,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-11-11
  • 浅谈利用JavaScript进行的DDoS攻击原理与防御

    浅谈利用JavaScript进行的DDoS攻击原理与防御

    这篇文章主要介绍了浅谈利用JavaScript进行的DDoS攻击原理与防御,以及介绍了相关的中间人攻击原理,需要的朋友可以参考下
    2015-06-06
  • Web前端开发工具——bower依赖包管理工具

    Web前端开发工具——bower依赖包管理工具

    Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,把功能分散到各个模块中,让模块和模块之间存在联系,通过 Bower 来管理模块间的这种联系,本文给大家介绍bower依赖包管理工具,感兴趣的朋友一起学习
    2016-03-03
  • JavaScript 点击页面上的按纽,弹出层,背景变灰

    JavaScript 点击页面上的按纽,弹出层,背景变灰

    点击页面上的按纽,弹出一个层,背景变灰,这样的效果现在网页应用的比较多,这里只是个简单的实现方式
    2010-06-06
  • 无阻塞加载脚本分析[全]

    无阻塞加载脚本分析[全]

    script标签的阻塞行为会对页面性能产生负面影响,大多数浏览器在下载或执行脚本的同时,会阻塞下载位于它之后的资源,也会阻塞渲染位于它之后的元素。
    2011-01-01
  • ES6学习之变量的两种命名方法示例

    ES6学习之变量的两种命名方法示例

    最近在学习ES,所以想着将自己学习的一些经验技巧总结一下,方便学习,所以下面这篇文章主要跟大家分享介绍了关于ES6学习之变量的两种命名方法,文中通过示例代码介绍的很详细,需要的朋友们下面来一起看看吧。
    2017-07-07
  • JavaScript实现网页留言板功能

    JavaScript实现网页留言板功能

    这篇文章主要为大家详细介绍了JavaScript实现网页留言板功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 重学JS之显示强制类型转换详解

    重学JS之显示强制类型转换详解

    这篇文章主要给大家介绍了关于重学JS之显示强制类型转换的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • 详解js中Json的语法与格式

    详解js中Json的语法与格式

    本文详细介绍了js中Json的语法与编写格式,有需要的朋友可以看下
    2016-11-11

最新评论