前端研习录（18）——JavaScript运算符合集

最新推荐文章于 2024-05-18 11:09:56 发布

清风不渡

最新推荐文章于 2024-05-18 11:09:56 发布

阅读量375

点赞数

分类专栏：前端研习录文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/WXKKang/article/details/126149955

版权

前端研习录专栏收录该内容

44 篇文章 3 订阅

订阅专栏

前端研习录（18）——JavaScript运算符合集

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

重拾前端记忆，记录学习笔记，现在进入JavaScript运算符部分

一、typeof运算符

typeof运算符可以判断变量的数据类型，为提高准确性，一般用于判断基本数据类型

数值类型返回：number
字符串类型返回：string
布尔值类型返回：boolean

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>
        var num = 10;
        console.log("num的数据类型为："+ typeof num);

        var str = "这是一个字符串"
        console.log("str的数据类型为："+ typeof str)

        var isman = true;
        console.log("isman的数据类型为："+ typeof isman)

        var user = {
            username : "admin",
            password : "123"
        }
        console.log("user的数据类型为："+ typeof user)

        console.log("null的数据类型为："+ typeof null)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

可以看到，当数据类型为对象或者null时，返回的都是object，所以为提高准确性，一般用于判断基本数据类型

二、算术运算符

1、加减乘除运算符

加减乘除运算符就是最基本的数学运算符，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>
        var num = 10+10;
        console.log("10+10="+ num);

        num = 10-10;
        console.log("10-10="+ num);

        num = 10*10;
        console.log("10*10="+ num);

        num = 10/10;
        console.log("10/10="+ num);
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

2、余数运算符

余数运算符即是取余数，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>
        var num = 15%10;
        console.log("15/10的余数为："+ num);
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

3、自增、自减运算符

自增、自减运算符（一元运算符），即是在本身基础上进行加1或者减1，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>
        var num_1 = 10;
        var num_2 = 15;
        console.log("10自增一次后结果为："+ ++num_1);
        console.log("15自减一次后结果为："+ --num_2);
    </script>
</body>
</html>

结果如下：
在这里插入图片描述
注意：++a即表示先自增后返回，a++表示先返回再自增；自减同理

三、赋值运算符

我们可以通过赋值运算符给变量进行赋值，常见的赋值运算符有以下几种：

运算符	表达式
=	将等号右边的值直接赋值给左边的变量
+=	x+=y等同于x=x+y
-=	x-=y等同于x=x-y
*=	x=y等同于x=xy
/=	x/=y等同于x=x/y
%=	x%=y等同于x=x%y

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>
        var x = 15;
        var y = 10;
        console.log("x的值为："+x);
        console.log("y的值为："+y);
        x+=y;
        console.log("x+=y的值为："+ x);
        x = 15;
        x-=y;
        console.log("x-=y的值为："+ x);
        x = 15;
        x*=y;
        console.log("x*=y的值为："+ x);
        x = 15;
        x/=y;
        console.log("x/=y的值为："+ x);
        x = 15;
        x%=y;
        console.log("x%=y的值为："+ x);
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

四、比较运算符

比较运算符即是对两个值进行比较，然后返回一个布尔值，表示是否满足指定条件，常见的比较运算符有以下几种：

比较运算符	描述
<	小于运算符
>	大于运算符
<=	小于或等于运算符
>=	大于或等于运算符
==	相等运算符
===	严格相等运算符
!=	不相等运算符
!==	严格不相等运算符

注意：

相等和不相等运算符只比较值
严格相等和严格不相等不但比较值还比较数据类型

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>
        var num_1 = 10;
        var num_2 = "10";
        console.log("num_1是否小于num_2：")
        console.log(num_1<num_2);

        console.log("num_1是否大于num_2：")
        console.log(num_1>num_2);

        console.log("num_1是否小于或等于num_2：")
        console.log(num_1<=num_2);

        console.log("num_1是否大于或等于num_2：")
        console.log(num_1>=num_2);

        console.log("num_1是否等于num_2：")
        console.log(num_1==num_2);

        console.log("num_1是否严格等于num_2：")
        console.log(num_1===num_2);

        console.log("num_1是否不等于num_2：")
        console.log(num_1!=num_2);

        console.log("num_1是否严格不等于num_2：")
        console.log(num_1!==num_2);
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

五、布尔运算符

布尔运算符包括以下三种：

布尔运算符	描述
!	取反运算符
&&	且运算符（多个条件都要满足）
\|\|	或运算符（满足一个条件即可）

注意：对于非布尔值，取反运算符会将其转换为布尔值，以下六个值取反后为true，其余都为false。

undefined null false 0 NaN 空字符串(“”)

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>
        console.log("----------以下为布尔值取反------------")
        console.log("true的相反值为：")
        console.log(!true);
        console.log("false的相反值为：")
        console.log(!false);

        console.log("----------以下为其他非布尔值取反------------")
        console.log("undefined的相反值为：")
        console.log(!undefined);
        console.log("null的相反值为：")
        console.log(!null);
        console.log("false的相反值为：")
        console.log(!false);
        console.log("0的相反值为：")
        console.log(!0);
        console.log("NaN的相反值为：")
        console.log(!NaN);
        console.log("空字符串的相反值为：")
        console.log(!"");
        console.log("123的相反值为：")
        console.log(!123);
        console.log("非空字符串的相反值为：")
        console.log(!"welcome");

        console.log("----------以下为且运算符------------")
        var num_1 = 10;
        var num_2 = 10;
        console.log("num_1等于num_2且num_1大于num_2");
        console.log(num_1==num_2 && num_1>num_2);
        console.log("----------以下为或运算符------------")
        console.log("num_1等于num_2或num_1大于num_2");
        console.log(num_1==num_2 || num_1>num_2);
    </script>
</body>
</html>