前端第二阶段-4（JavaScript运算符）

BadVictory

已于 2022-08-17 22:36:12 修改

阅读量87

点赞数

分类专栏： # 前端开发第二阶段文章标签： javascript 前端开发语言

于 2022-08-16 19:45:55 首次发布

本文链接：https://blog.csdn.net/victory_bad/article/details/126356874

版权

前端开发第二阶段专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本文详细介绍了JavaScript中的各种运算符，包括算数运算符（+、-、*、/、%）、比较运算符（>、<、>=、<=、!==、===、!=、==）、逻辑运算符（!、&&、||）、一元运算符（++、--）、三元运算符以及赋值运算符（=、+=、-=、*=、/=、%=）。通过实例展示了它们的使用方式和效果，帮助理解JavaScript中不同运算符的功能和用法。

摘要由CSDN通过智能技术生成

JavaScript运算符

JavaScript运算符有：

算数运算符
比较运算符
逻辑运算符
一元运算符
三元运算符
赋值运算符
字符串运算符

算数运算符

算数运算符：+、-、*、/、%

算数运算符
符号	说明
+	加
-	减
*	乘
/	除
%	取余

<!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>Document</title>
</head>
<body>
    
</body>
<script>
    /*
        算数运算：
        加 减 乘 除 取余
        +  —  *  /  %
    */
    console.log(2+4);//6
    console.log(3-0);//3
    console.log(3*2);//6
    console.log(10/5);//2
    console.log(3%3);//0
</script>
</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>Document</title>
</head>
<body>
    
</body>
<script>
    /*
        比较运算：
        大于 小于 大于等于 小于等于  全不等于 全等于 等于 不等于
         >    <     >=      <=       !==    ===   ==    !=
    */
    console.log(2>4);//false
    console.log(3<0);//false
    console.log(3>=2);//true
    console.log(3<=5);//true
    console.log(3!==3);//false
    console.log(3===5);//false
    // ⚠不要用==和!=
    /*
        console.log(3=="3"); 被隐性转换为 console.log("3"=="3")
    */
    console.log(3=="3");//true
    /*
        console.log(4!="4"); 被隐性转换为 console.log("4"!="4")
    */
    console.log(4!="4");//flase


    console.log(2>3);
    console.log(2<3);
    console.log(3>=3);
    console.log(2<=3);
    console.log(4!==3);
    console.log(3===3);
    
</script>
</html>

逻辑运算符

逻辑运算符：!、&&、||

逻辑运算符
符号	说明
!	非，取反语法：!表达式;
&&	与，条件全真，才为真语法：表达式1 && 表达式2;
\|\|	或，只要有一个条件为真，就为真语法：表达式1 \|\| 表达式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>Document</title>
</head>
<body>
    
</body>
<script>
    /*
        逻辑运算符：
            取反 并且 或者
             !   &&   ||
    */ 
    num1=10;
    num2=2;
    console.log(!num1>num2);//false
    // 条件1 && 条件2   所有的条件都要为真，才是真，否则为假
    console.log(num1<110 && num2>1);//true
    // 条件1 || 条件2   只要有一个条件为真，就是真
    console.log(num1<20 || num2<3);//true
</script>
</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>Document</title>
</head>
<body>
    
</body>
<script>
    /*
        一元运算:++(自增)   --（自减）
    */
    // 先自增在赋值
    let num1=2;
    num1=++num1
    console.log(num1);//3
    // 先自减在赋值
    let num2=2;
    num2=--num2
    console.log(num2);//1
    // 先赋值在自增
    let num3=2;
    num3=num3++
    console.log(num3);//2
    // 先赋值在自减
    let num4=2;
    num4=num4--
    console.log(num4);//2
</script>
</html>

三元运算符

三元运算符：

语法：条件？满足条件时打印 : 不满足时打印

1.判断是否满足条件

2.满足条件时打印 ? 后面的

3.不满足时打印 : 后面的

<!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>Document</title>
</head>
<body>
    
</body>
<script>
    /*
        三元运算：
        1.判断是否满足条件
        2.满足条件时打印?后面的
        3.不满足时打印:后面的
        语法：条件 ？ 满足条件时打印 : 不满足时打印
    */ 
    age=18
    console.log(age < 18 ? "未成年" : "成年");
</script>
</html>

赋值运算符

赋值运算符：= += -= *= /= %=

赋值运算符
符号	说明
=	赋值 a=b;
+=	加赋值运算 a+=b; <=> a=a+b
-=	减赋值运算 a-=b; <=> a=a-b
*=	乘赋值运算 a=b; <=> a=ab
/=	除赋值运算 a/=b; <=> a=a/b
%=	模赋值运算 a%=b; <=> a=a%b

<!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>Document</title>
</head>
<body>
    
</body>
<script>
    /*
        赋值运算：=   +=   -=   *=   /=   %=
    */ 
    let a=10;

    let b=1;
    b+=1        //等价于b=b+1,  2

    let c=3;
    c-=1        //等价于c=c-1,  2

    let d=23;
    d*=2        //等价于d=d*2,  46

    let e=10;
    e/=2        //等价于e=e/2,  5

    let f=10;
    f%=2         //等价于f=f%2,  0
    console.log(a+"\n",b+"\n",c+"\n",d+"\n",e+"\n",f);
</script>
</html>

字符串运算符

字符串运算符：+

字符串与任何变量进行“+”运算，都是进行字符串连接，运算结果为一个新的字符串

console.log("+可以将字符串拼接"+"\n");

BadVictory

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录