JavaScript之运算符相关知识

最新推荐文章于 2024-07-28 20:27:10 发布

熊凯瑞

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量240

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言 html5

本文链接：https://blog.csdn.net/qq_46106857/article/details/126142119

版权

JavaScript 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

运算符

运算符也被称为操作符，用于实现赋值、比较和执行算数运算等功能的符号。

1、算数运算符

1.1 主要的算数运算符

+、-、*、/、%

1.2 浮点数的精度问题

浮点数值的最高精度是17位小数，但在进行算术计算时，其精确度远远不如整数。

var result = 0.1 + 0.2;   //结果不是0.3，而是0.30000000000004
console.log(0.07*100);    //结果不是7，而是7.00000000000001

所以不能直接判断两个浮点数是否相等。

1.3 延申

为了判断一个数能被整除，可以用取余操作，如果余数为0，则可以整除。
优先级：先乘除，后加减，有小括号，先算小括号里面的。

1.4 样例

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之算数运算符</title>
    <script>
       console.log(1 + 1);  //2
       console.log(1 - 1);  //0
       console.log(1 * 1);  //1
       console.log(1 / 1);  //1
       //% 取余（取模）
       console.log(4 % 2);  //0
       console.log(5 % 3);  //2
       console.log(3 % 5);  //3
       //浮点数 算数运算里面会有问题
       console.log(0.1 + 0.2);  //0.30000000000000004
       console.log(0.07 * 100); //7.00000000000000001
       //我们不能直接拿着浮点数来进行相比较，是否相等
       var num = 0.1 + 0.2;
       console.log(num == 0.3);  //false
    </script>
</head>
<body>
    
</body>
</html>

2、递增和递减运算符

反复给数字变量添加或减去1，可以使用递增(++) 和递减(–) 运算符来完成。

2.1 前置递增运算符

++写在变量的前面，先加1，后返回值

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之前置递增运算符</title>
    <script>
       //前置递增运算符 ， ++写在变量的前面
      var age = 10;
      ++age; //类似于 age = age + 1
      console.log(age);
      //先加1，后返回值
      var p = 10;
      console.log(++p + 10); //21
    </script>
</head>
<body>
    
</body>
</html>

2.2 后置递增运算符

++写在变量的后面，先返回原值，后自加一

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之后置递增运算符</title>
    <script>
      var age = 10;
      age++; //类似于 age = age + 1
      console.log(age);
      //先返回原值，后加一
      var p = 10;
      console.log(p++ + 10); //20
      console.log(p); //11
    </script>
</head>
<body>
    
</body>
</html>

2.3 综合训练

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之后置递增运算符</title>
    <script>
      var a = 10;
      ++a;  //++a = 11,  a = 11
      var b = ++a + 2; //a = 12  ++a = 12
      console.log(b);   //14
      
      var c = 10;
      c++;  //c++ = 11, c = 11
      var d = c++ + 2; //c++ = 11, c = 12
      console.log(d);  //13
      
      var e = 10;
      var f = e++ + ++e;  //e++=10  e=11  e=12 ++e=12
      console.log(f); //22
    </script>
</head>
<body>
    
</body>
</html>

3、比较运算符

3.1 概述

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果。

符号   作用    用法
=      赋值    把右边给左边
==     判断    判断两边值是否相等（注意此时有隐式转换）
===    全等    判断两边的值和数据类型是否完全相同

3.2 样例

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之比较运算符</title>
    <script>
        console.log(3 >= 5);  //false
        console.log(2 <= 4);  //true
        //1.程序里的等于符号是 ==  默认转换数据类型 会把字符串型的数据转换为数字型
        console.log(3 == 5);  //false
        console.log('西瓜' == '香蕉');  //false
        console.log(15 == 15);  //true
        console.log(18 == '18'); //true
        console.log(18 != 18);  //false
        //2. 全等符号要求两侧的值还有数据类型完全一致才可以 true
        console.log(18 === 18);  //true
        console.log(18 === '18');  //false
    </script>
</head>
<body>
    
</body>
</html>

4、逻辑运算符

4.1 概述

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断。

逻辑运算符      说明         案例
&&             逻辑与     true&&false    两边都是true才返回true,否则返回false
||             逻辑或     true||false    两边都是false才返回false,否则返回true
！             逻辑非      !true         取反符，用来取一个布尔值相反的值

4.2 样例

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之输入输出语句</title>
    <script>
       //1. 逻辑与&& and 两侧都为 true 结果才是 true 只要有一侧为false 结果就为false
       console.log(3 > 5 && 3 > 2);  //false
       console.log(3 < 5 && 3 > 2);  //true
       //2. 逻辑或 || or 两侧都为 false 结果才是假 false  只要有一侧为true 结果就是true
       console.log(3 > 5 || 3 > 2);  //true
       console.log(3 > 5 || 3 < 2);  //false
       //3. 逻辑非  not !
       console.log(!true);  //false
       
    </script>
</head>
<body>
    
</body>
</html>

4.3 短路运算（逻辑中断）

短路运算的原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值。

4.3.1 逻辑与

语法：表达式1 && 表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

4.3.2 逻辑或

语法：表达式1 || 表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2

4.3.3 样例

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之输入输出语句</title>
    <script>
       //1.用布尔值参与的逻辑运算 true && false == false
       //2.逻辑与短路运算  如果表达式1 结果为真 则返回表达式2。如果表达式1为假  那么返回表达式1
       console.log(123 && 456); //456
       console.log(0 && 456); //0
       console.log(2 && 1 + 2 && 4 * 5);  //20
       console.log('' && 1 + 2 && 456 * 56789); 
       //3.如果有空的或者否定的为假 其余是真的  0  '' null  undefined  NaN 
       //4.逻辑或短路运算  如果表达式1 结果为真 则返回的是表达式1  如果表达式1为假  那么返回表达式2
       console.log(123 || 456); //123
       console.log(123 || 456 || 456 + 123); //123
       console.log(0 || 456 || 456 + 123); //456
       var num = 0;
       console.log(123 || num++); //123
       console.log(num);  //0
    </script>
</head>
<body>
    
</body>
</html>

5、赋值运算符

5.1 概念

用来把数据赋值给变量的运算符

赋值运算符           说明                        案例
=                   直接赋值                   var usrName = '我是值';
+= 、-=             加、减一个数后再赋值        var age=10; age+=5;  //15
*=、/=、%=          乘、除、取模后再赋值        var age=2; age*=5;  //10

5.2 样例

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之输入输出语句</title>
    <script>
        var num = 10;
        num += 5;
        console.log(num);
        var age = 2;
        age *= 3;
        console.log(age);

    </script>
</head>
<body>

6、运算符优先级

在这里插入图片描述

熊凯瑞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript之运算符相关知识

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果。符号作用用法= 赋值把右边给左边== 判断判断两边值是否相等（注意此时有隐式转换）=== 全等判断两边的值和数据类型是否完全相同逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断。逻辑运算符说明案例&& 逻辑与 true&&false 两边都是true才返回true,否则返回false。...
复制链接

扫一扫