【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>

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