JS学习556~569（运算符）

最新推荐文章于 2023-11-28 15:54:22 发布

前进的北极熊

最新推荐文章于 2023-11-28 15:54:22 发布

阅读量265

点赞数

分类专栏： JavaScript 文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/m0_57809042/article/details/126943192

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1 运算符

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

JavaScript中常用的运算符有:

算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符

2 算术运算符

2.1 算术运算符概述

在这里插入图片描述

2.2 浮点数的精度问题

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

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

所以:不要直接判断两个浮点数是否相等!

<!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>
    <script>
        console.log(1 + 1);  // 2
        console.log(1 - 1);  // 0
        console.log(1 * 1);  // 1
        console.log(1 / 1);  // 1
        // 1. % 取余（取模）
        console.log(4 % 2);  // 0
        console.log(5 % 3);  // 2
        console.log(3 % 5);  // 3
        // 2. 浮点数 算数运算里面会有问题
        console.log(0.1 + 0.2);  // 0.30000000000000004
        console.log(0.07 * 100)  // 7.000000000000001
        // 3. 我们不能直接拿着浮点数来进行 是否相等
        var num = 0.1 + 0.2;
        console.log(num == 0.3);  // false
    </script>
</head>
<body>
    
</body>
</html>

2.3 一些问题

我们怎么判断一个数能够被整除呢？

它的余数时0就说明这个数能被整除，这就是%取余运算符的主要用途

请问1 + 2 * 3 结果是？

结果是7，注意算数运算符优先级的，先乘除，后加减，有小括号先算小括号里面的

2.4 表达式和返回值

表达式:是由数字运算符、变量等以能求得数值的有意义排列方法所得的组合

简单理解:是由数字、运算符、变量等组成的式子

<!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>
    <script>
        // 是由数字、运算符、变量等组成的式子 我们称为表达式  1 + 1
        console.log(1 + 1); // 2 就是返回值
        // 1 + 1 = 2
        // 在我们程序里面  2 = 1 + 1  把我们右边表达式计算完毕把返回值给左边
        var num = 1 + 1;
    </script>
</head>
<body>
    
</body>
</html>

3 递增和递减运算符

3.1 递增和递减运算符概述

如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减(--)运算符来完成。

在JavaScript中,递增(++)和递减(- -)既可以放在变量前面,也可以放在变量后面。放在变量前面时,我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。

注意：递增和递减运算符必须和变量配合使用

3.2 递增运算符

前置递增运算符

++num 前置递增，就是自加1，类似于num = num + 1,但是++num写起来更简单

使用口诀：先自加，后返回值

<!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>
    <script>
        // 1. 想要一个变量自己加1  num = num + 1 比较麻烦
        var num = 1;
        num = num + 1;
        num = num + 1;
        console.log(num);  // 3
        // 2. 前置递增运算符 ++写在变量的前面
        var age = 10;
        ++ age; // 类似于 age = age + 1
        console.log(age);
        // 3. 先加1  后返回值 
        var p = 10;
        console.log(++p + 10);
        
    </script>
</head>
<body>
    
</body>
</html>

后置递增运算符

num++后置递增，就是自加1，类似于num = num + 1,但是num++写起来更简单。

使用口诀：先返回原值，后自加

<!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>
    <script>
        var num = 10;
        num++;  // num = num + 1    ++num;
        console.log(num);
        // 1. 前置自增和后置自增如果单独使用  效果是一样的
        // 2. 后置自增 口诀：先返回原值 后自加1
        var age = 10;
        console.log(age ++ + 10);
        console.log(age);
    </script>
</head>
<body>
    
</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>
    <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;  // 1. e ++ = 10  e = 11  2. e = 12  ++e = 12
        console.log(f);  // 22
        // 后置自增   先表达式返回原值 后面变量再自加1
        
    </script>
</head>
<body>
    
</body>
</html>

3.3 前置递增和后置递增小结

前置递增和后置递增运算符可以简化代码的编写，让变量的值 + 1 比以前的写法简单
单独使用时，运行结果相同
与其他代码用时，执行结果会不同
后置：先原值运算，后自加（先人后己）
前置：先自加，后运算（先己后人）
开发时，大多使用后置递增/减，并且代码独占一行，例如：num++;或者num- -;

4 比较运算符

4.1 比较运算符概述

概念：比较运算符（关系运算符）是两个数据进行时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果
在这里插入图片描述

<!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>
    <script>
        console.log(3 >= 5); // false
        console.log(3 <= 5); // true
        // 1. 我们程序里面的等于符号 是 ==  默认转换数据类型 会把字符串型数据转换为数字型 只要求值相等就可以
        console.log(3 == 5);
        console.log('pink老师' == '刘德华'); // false
        console.log(18 == 18); // true
        console.log(18 == '18') // true
        console.log(18 != 18); // false
        // 2. 我们程序里面有全等的 一模一样  要求 两侧的值 还有 数据类型完全一致才可以 true
        console.log(18 === 18);
        console.log(18 === '18'); // false
    </script>
</head>
<body>
    
</body>
</html>

4.2 =小结

在这里插入图片描述

5 逻辑运算符

5.1 逻辑运算符概述

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

在这里插入图片描述

5.2 逻辑与&&

两边都是true才返回true，否则返回false

5.3 逻辑或

两边都是false才返回false，否则返回true

5.3 逻辑非

逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如true的相反值是false

var isOK = !true;
console.log(isOK);  // false

eg:

<!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>
    <script>
        // 逻辑与 && 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)
    </script>
</head>
<body>
    
</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>
    <script>
        var num = 7;
        var str = "我爱你~中国~";
        console.log(num > 5 && str.length >= num); // true
        console.log(num < 5 && str.length >= num); // false
        console.log(!(num < 10)); // false
        console.log(!(num < 10 || str.length == num)); // false
    </script>
</head>
<body>
    
</body>
</html>

5.4 短路运算（逻辑中断）

短路运算的原理:当有多个表达式(值)时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值
1.逻辑与

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

2.逻辑或

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

console.log(12311 456) ; // 123
console.log(0||456); // 456
console.log(123 11 456 11 789); // 123

var num = 0;
console.log (123 || num++) ; // 123
console.log (num); // 0

eg:

<!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>
    <script>
      // 1. 用我们的布尔值参与的逻辑运算  true && false = false
      // 2. 123 && 456 是值 或者是 表达式 参与逻辑运算？
      // 3. 逻辑与短路运算  如果表达式1 结果为真 则返回表达式2  如果表达式1为假 那么返回表达式1
      console.log(123 && 456); // 456
      console.log(0 && 456); // 0
      console.log(0 && 1 + 2 && 456 * 56789); // 0
      console.log("" && 1 + 2 && 456 * 56789); // ''
      // 如果有空的或者否定的为假 其余是真的  0 '' null undefined NaN
      // 4. 逻辑或短路运算  如果表达式1 结果为真 则返回表达式1  如果表达式1为假 那么返回表达式2
      console.log(123 || 456); //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>

6 赋值运算符

概念：用来把数据赋给变量的运算符。
在这里插入图片描述

7 运算符优先级

在这里插入图片描述

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

练习1

console.log( 4 >= 6 || '人' != '阿凡达' && ! (12 * 2 == 144) && true); //true
var num = 10;
console.log(5 == num /2 && (2 + 2 * num).toString() === '22'); // true

练习2

var a = 3 > 5 && 2 < 7 && 3 == 4;  
console.log(a) ; //true
var b = 3 <= 4 || 3 > 1 || 3 != 2;
console.log(b) ; // true
var c = 2 === "2";
console.log(c) ; // false
var d = !c || b && a; 
console.log(d) ; // true