【JavaScript】JavaScript 运算符 ③ ( 比较运算符 | 等于比较 运算符 == | 不等于比较 运算符 != | 严格等于比较 运算符 === )

最新推荐文章于 2024-05-03 11:47:20 发布
最新推荐文章于 2024-05-03 11:47:20 发布
阅读量960 收藏 26
点赞数 14
分类专栏： JavaScript 文章标签： javascript 开发语言 前端 JavaScript 比较运算符 等于比较 严格等于比较
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shulianghan/article/details/136754326
版权

文章目录





一、JavaScript 运算符


1、比较运算符 概念


JavaScript 语言 的 " 比较运算符 “ , 又称为 ” 关系运算符 " ,

" 比较运算符 " 的 作用是 将 2 个 数据 进行 比较 , 然后返回一个 " boolean 布尔类型的值 " , 作为 比较结果 ;


2、比较运算符 列举


JavaScript 语言 的 " 比较运算符 " 如下 :

  • < : 小于 比较 ;
console.log(1 < 2); // 输出 : true
  • > : 大于 比较 ;
console.log(1 > 2); // 输出 : false
  • >= : 大于等于 比较 ;
console.log(1 >= 2); // 输出 : false
  • <= : 小于等于 比较 ;
console.log(1 <= 2); // 输出 : false
  • == : 等于 比较 ;
console.log(1 == 2); // 输出 : false
console.log(1 == "1"); // 输出 : true
  • != : 不等于 比较 ;
console.log(1 != 2); // 输出 : false
  • === : 全等于 比较 , 又称为 严格等于 比较 , 数值 相等 , 并且 数据类型 相同 ;
console.log(1 === '1'); // 输出 : false
  • !== : 不全等 比较 , 没有达到 " 数值 相等 , 并且 数据类型 相同 " 的要求 , 也就是 数值 或 类型 有一个不等 , 返回值都是 false ;
console.log(1 !== '1'); // 输出 : true

3、等于比较 运算符 ==


等于比较 运算符 == 用于 比较 两个数据值 是否相等 ;

  • 如果两个值相等 , 则返回 true ;
  • 如果两个值不等 , 则返回 false ;
console.log(3 == 3); // 输出 : true
console.log(3 == 4); // 输出 : false
console.log("Tom" == "Jerry"); // 输出 : false

自动类型转换 : 使用 == 运算符 比较两个值之前 , 会将两个值 转换为 相同类型的值 ; 由于 比较前 会进行 类型转换 , == 运算符 会导致非预期的结果 ;

  • 如 : 将 字符串值 "3" 与 数字类型值 3 进行比较 , 会得到二者相等的结果 , 因为进行比较之前 , 会将 字符串 "3" 转为 数字类型的 3 ;
console.log(3 == '3'); // 输出 : true

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 1. 等于比较运算符 ==
        console.log(3 == 3); // 输出 : true
        console.log(3 == 4); // 输出 : false
        console.log("Tom" == "Jerry"); // 输出 : false

        // 类型自动转换
        console.log(3 == '3'); // 输出 : true
    </script>
</head>

<body>
</body>

</html>

展示效果 :

在这里插入图片描述


4、不等于比较 运算符 !=


不等于比较 运算符 != 用于 比较 两个数据值 是否不相等 ;

  • 如果两个值不等 , 则返回 true ;
  • 如果两个值相等 , 则返回 false ;
console.log(3 != 3); // 输出 : false
console.log(3 != 4); // 输出 : true
console.log("Tom" != "Jerry"); // 输出 : true

自动类型转换 : 使用 != 运算符 比较两个值之前 , 会将两个值 转换为 相同类型的值 ; 由于 比较前 会进行 类型转换 , != 运算符 会导致非预期的结果 ;

  • 如 : 将 字符串值 "4" 与 数字类型值 3 进行 不等于比较 , 会得到二者相等的结果 , 因为进行比较之前 , 会将 字符串 "4" 转为 数字类型的 4 ;
console.log("4" != 3); // 输出 : true
console.log("4" != 4); // 输出 : false

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 不等于比较运算符 !=
        console.log(3 != 3); // 输出 : false
        console.log(3 != 4); // 输出 : true
        console.log("Tom" != "Jerry"); // 输出 : true

        // 类型自动转换
        console.log("4" != 3); // 输出 : true
        console.log("4" != 4); // 输出 : false
    </script>
</head>

<body>
</body>

</html>

展示效果 :

在这里插入图片描述


5、严格等于比较 运算符 ===


严格等于比较 运算符 === 用于 比较 两个数据值 的 数据类型 和 值 是否都相等 ;

  • 如果两个值 的 数据类型 和 值 都相等 , 则返回 true ;
  • 如果两个值 的 数据类型 和 值 只要有一个不等 , 则返回 false ;
console.log(3 === 3); // 输出 : true
console.log(3 === 4); // 输出 : false
console.log(3 === "3"); // 输出 : false

自动类型转换 : 使用 === 运算符 比较两个值之前 , 不会进行类型自动转换 ;

console.log("3" === 3); // 输出 : false , 转换后的数据值相同 , 数据类型不同
console.log(4 === 3); // 输出 : false , 数据值不同 , 数据类型相同
console.log("Tom" === 3); // 输出 : false , 数据值不同 , 数据类型不同

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 严格等于 比较运算符 ===
        console.log(3 === 3); // 输出 : true
        console.log(3 === 4); // 输出 : false
        console.log(3 === "3"); // 输出 : false

        console.log("3" === 3); // 输出 : false , 转换后的数据值相同 , 数据类型不同
        console.log(4 === 3); // 输出 : false , 数据值不同 , 数据类型相同
        console.log("Tom" === 3); // 输出 : false , 数据值不同 , 数据类型不同
    </script>
</head>

<body>
</body>

</html>

展示效果 :

在这里插入图片描述


5、严格不等于比较 运算符 !==


严格不等于比较 运算符 !== 用于 比较 两个数据值 的 数据类型 和 值 是否不相等 ;

  • 如果两个值 的 数据类型 和 值 都相等 , 则返回 false ;
  • 如果两个值 的 数据类型 和 值 只要有一个不等 , 则返回 true;
console.log(3 !== 3); // 输出 : false , 类型和值都相同 
console.log(3 !== 4); // 输出 : true , 类型相同 , 值不同 
console.log(3 !== "3"); // 输出 : true , 类型不同 , 值相同

严格不等于比较 运算符 !== 比较之前 , 不会进行类型转换 ;


代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 严格等于 比较运算符 ===
        console.log(3 !== 3); // 输出 : false , 类型和值都相同 
        console.log(3 !== 4); // 输出 : true , 类型相同 , 值不同 
        console.log(3 !== "3"); // 输出 : true , 类型不同 , 值相同
    </script>
</head>

<body>
</body>

</html>

展示效果 :

在这里插入图片描述


6、赋值运算符 = / 等于比较运算符 == / 严格等于比较运算符 === 示例


代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 赋值运算符 = / 等于比较运算符 == / 严格等于比较运算符 === 示例
        // 注意 三种 运算符的 结合优先级

        // 赋值运算符 =
        let num1 = 10;
        var num2 = 20;
        var num3 = 20;
        console.log(`num1 = ${num1} , num2 = ${num2} , num3 = ${num3}`);

        // 等于比较运算符 ==
        var bool1 = num1 == num2;

        // 严格等于比较运算符 ===
        var bool2 = num2 === num3;

        // 不等于比较运算符 !=
        var bool3 = num1 != num2;

        console.log(`bool1 = ${bool1} , bool2 = ${bool2} , bool3 = ${bool3}`);
    </script>
</head>

<body>
</body>

</html>

执行结果 :
在这里插入图片描述

韩曙亮
关注
  • 14
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
详解JavaScript中的Object.is()与===运算符总结
11-20
三重相等运算符 === 严格检查2个值是否相同： 1 === 1; // => true 1 === '1'; // => false 1 === true; // => false 但是，ES2015规范引入了 Object.is()，其行为与严格的相等运算符几乎相同： Object.is(1, 1); // => true Object.is(1, '1'); // => false Object.is(1, true); // => false 主要问题是：什么时候使用 Object.is() 代替严格的相等性检查？让我们找出答案。 1.严格相等检查操作符 首先，让我
详解JavaScript中的Object.is()与"==="运算符总结
10-15
主要介绍了详解JavaScript中的Object.is()与"==="运算符总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
老生常谈javascript中逻辑运算符&&和||的返回值问题
12-03
今天在做逻辑运算符的时候遇到一个小问题一直转不过弯来，var a=(undefined&&123)||(3||5)的返回值是什么？ 首先是||的返回值问题： ||的返回值会返回最早遇到非以下类型的值： NaN null undefined 0 false; 所以3||5返回的是3； 如果||左右两边都是以上类型的值时，会返回最后一个 如 var a=0||null||undefined则a返回的值是undefined; 其次是&&的返回值问题： &&的返回值会返回最早遇到以下类型的值： NaN null undefined 0 false; 所以undefined&&123返回的值是undef
Javascript 按位与赋值运算符 (=)使用介绍
01-19
Javascript 按位与赋值运算符 (&=)，对变量值与表达式值设置按位“与”运算的结果。 变量和表达式均被视为 32 位二进制值，而一般表达式里面都是十进制整数，此时需要先转换成对应的二进制，然后向前加0，补足32位。 代码如下:result &= 【整数2】等价于result = result & 【整数2】 & 对两个 32 位表达式的每一个位执行按位“与”运算。 如果两个位均为 1，则结果是 1。 否则，结果为 0。 位1 位2 位与 0 0 0 1 1 1 0 1 0 1 0 0 下面的示例演示如何使用 & 位与运算符 和 &= 按位与赋值运算符： 代码如下:/
10.JavaScript比较运算符、比较中存在的陷阱和避免方法、==、null、undefined、===、严格相等
魏大大
04-18 730
JavaScript比较运算符 不论是哪种编程语言，比较运算符都必不可少，无论是JavaScript还是C，亦或是Java，他们的表现形式几乎没有太大的差别： 大于号 > 小于号 < 等于号 == 大于等于 >= 小于等于 <= 不等于 != 如果学习过其他语言的小伙伴肯定见怪不怪了，在这里， 双等号==用于相等性检测，使用双等号的目的主要是避免和赋值运算符=冲突； >=等价于数学中的≥； <=等价于数学中的≤； !=等价于数学中的≠。 比较的结果 所有的运算符都
javascript中比较运算符==和===和！=和！===的区别理解
weixin_45147894的博客
05-22 390
JavaScript中比较运算符== 和===和！=和！== 　JavaScript允许对任意数据类型做比较，如果操作数相等则返回true，否则返回false。　　　 分析下面代码你将明白四者具体区别： <script language="javascript"> var x=5; document.write((x===5)+"<br>");//结果为truedocument.write((x==="5")+"<br>");//结果为false docum...
JavaScript 的运算符【二】(比较运算符)
妖怪的博客
12-07 367
运算符是处理数据的基本方法，用来从现有的值得到新的值。JavaScript 提供了多种运算符，覆盖了所有主要的运算
JavaScript中的!!运算符
androdi__LT的博客
11-29 876
JavaScript中的运算符大体分为：算术运算符、比较运算符、布尔运算符、二进制运算符。运算符都比较基础，今天只讲布尔运算符中的!!运算符。 !!运算符用语言描述就是：取反再取反。单看一个！就是对一个值做取反运算。在所有的JavaScript值中除了以下六个值做 ! 运算后是true外其他所有的值做 ! 运算后都是false： 1、undefined 2、null 3、Nan 4、0 5、fal...
javascript相等运算符与等同运算符详细介绍
01-19
这两个运算符都接受任意类型的运算数，如果两个运算数相等，它们都返回true，否则都返回false，===运算符是等同运算符，它采用严格的同一特质定义检测两个运算数是否完全相同，亲们注意是完全相同哦。==运算符是相等...
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 842
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
最新发布
XING的博客
05-03 859
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
element-ui的bug记录
nick_zhang的博客
04-29 490
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
bpmn-js推荐几款常用的插件
飞云先生
04-30 99
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
表格隔行变色
weixin_54339833的博客
05-02 363
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 289
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
redux快速入门
qq_73270720的博客
04-29 325
简单的加减案例,学会redux快速入门
小区服务|基于SprinBoot+vue的小区服务管理系统(源码+数据库+文档)
weixin_66413741的博客
05-01 1066
这次开发的小区服务管理系统对安保管理、安保分配管理、客服聊天管理、字典管理、房屋管理、反馈管理、论坛管理、公告管理、反馈处理管理、住户管理、员工管理、管理员管理等进行集中化处理。经过前面自己查阅的网络知识，加上自己在学校课堂上学习的知识，决定开发系统选择B/S模式这种高效率的模式完成系统功能开发。这种模式让操作员基于浏览器的方式进行网站访问，采用的主流的Java语言这种面向对象的语言进行小区服务管理系统程序的开发，在数据库的选择上面，选择功能强大的Mysql数据库进行数据的存放操作。
js执行顺序
weixin_45392204的博客
04-29 333
同步任务：指的是在主线程上排队执行的任务，只有当前一个任务执行完毕，才能执行下一个任务（按照顺序执行）异步任务：指的是不进入主线程上的任务，进入任务队列的任务，只有当任务队列通知主线程某个异步任务可以执行，方可进入主线程进行执行。异步任务又分宏任务跟微任务宏任务：异步ajax请求、setTimeout、setInterval、文件操作、其他微任务：Promise.then、.catch 和.finally，process.nextTick、其他。
javascript中的=，！=，==，！==，===，！===
07-22
在 JavaScript 中，有几种常见的比较运算符，包括`=`，`!=`，`==`，`!==`，`===`和`!==`。它们的含义和用法如下： 1. `=`：赋值运算符，用于将一个值赋给一个变量。例如：`let x = 5;` 2. `!=`：不等于运算符，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值