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

韩曙亮

发布于 2024-03-18 08:37:30

1070

发布于 2024-03-18 08:37:30

文章被收录于专栏：韩曙亮的移动开发专栏

一、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>

执行结果 :