【JavaScript】JavaScript 运算符 ③ ( 比较运算符 | 等于比较 运算符 == | 不等于比较 运算符 != | 严格等于比较 运算符 === )
文章目录
一、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>
执行结果 :
