1.算数运算符

1.数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。

2.运算符号:

1 + 求和加法

2 - 求差减法

3 * 求积乘法

4 / 求商除法

5 % 求余取模 (除法运算获取除法元素后剩下的整数)

3.优先级:先乘除后加减，有括号先算括号里面的

1.同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。 JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。

2.乘、除、取余优先级相同

3.加、减优先级相同

4.乘、除、取余优先级大于加、减

5.使用 () 可以提升优先级

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

    <script>
    //  算法运算符  加减乘除  求余  取模
        let num1 = 10;
        let num2 = 2 ;

        // 加法
        console.log(num1 + num2); // 12
        // 减法
        console.log(num1 - num2); // 8
        // 乘法
        console.log(num1 * num2);// 20
        // 除法
        console.log(num1 / num2);// 5

        // 求余=取模  获得整数
        // 除法运算  获取除法元素后  剩下的整数    列如:10/3(取值为  1)
        console.log(10 % 5);   //  0  10可以整除5  所以取值为0
        console.log(10 % 3);   //  1  10除不尽3  所以取值余数 1

        // 如果一个类出现多个算数运算符
        // 先乘除后加减  如果有括号 就先算括号
        console.log(1 + 1 * 2);
        console.log((1 + 1) * 3);
        // 如果一行类  确实有很多歌 算数运算符 都建议按照自己的想法来加括号
        console.log(1 + (1 +2 + 3) * 2 / 3 + (( 4 + 10 ) / 2 ));
        
    </script>
</body>
</html>

4.拓展:圆的面积计算 pi * r * r(π*半径的平方)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>02-圆的面积.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // π *  r的平方

      // 在js中 通过什么来代表 π
      // Math.PI d

      // console.log(Math.PI);

      let r = prompt('请输入圆的半径');

      console.log('圆的面积是: ' + Math.PI * r * r);
    </script>
  </body>
</html>

2.赋值运算符

1.对变量进行赋值的运算符

2.运算符号:

1.+=

2.-=

3.*=

4./=

5%=

3.作用:

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>Document</title>
</head>
<body>
    <script>
        // 方法一:
   /*      let num = 1 ;
        num = num + 1
        console.log(num);    //1 
    */
   /*  
        // 方法二:
        let num = 1;
        num  += 665;
        console.log(num);  //666
    */

        let num = 10 ;

        num -= 2 ;
        // num += 2 ;
        // num *= 2 ;
        // num /= 2 ;
        console.log(num);

    </script>
</body>
</html>

3.一元运算符

1.自增

1.作用:让变量的值+1

1.前自增 ++i 先自增后运算

2.后自增 i++ 先运算后自增

2.自减

1.作用:让变量的值 -1

2.前自减 --i 先自减后运算

3.后自减 i-- 先运算后自减

<!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>
    <script>
        let i = 1
        // 前置 自增
        // console.log(++i + 2);     //先计算自增1+i  在计算自增后的i+2结果为4

        // 后置 自增
        console.log(i++ + 2);
        // 后置自增   先计算i+2   在计算i++
        // a+b=c i后置自增a 你先得到结果c了  在计算a++只不过我们没有次输出打印了它而已



              // let i =1;

      // i++; // 就是做了一个加一的操作 很好理解！！
      // ++i; // 就是做了一个加一的操作 很好理解！！
      // i++; // 就是做了一个加一的操作 很好理解！！
      // ++i; // 就是做了一个加一的操作 很好理解！！

      // 在工作中，基本都是  i++ 或者 ++i 独立使用
      // 不喜欢 故意的人为制作那些 代码 抽象和很难理解的场景
      // 技术出现是用来 解决实际问题，就是一个工具，不会故意的把工具弄得很复杂

      // 初学者来说，一些不好的教程 就会 误导大家，故意或者无意拿这些题目来
      // 测试我们  完全没有必要

      // 建议 在初学者阶段 我们要故意避开这些东西！！


      

 /*      let i = 5;

console.log(--i); //  4

console.log(i--); //  打印的结果是 4

console.log(i); // 3  */
    </script>
</body>
</html>

4.比较运算符

1.作用:比较两个数据大小、是否相等

2.比较运算符号:

1.> ：左边是否大于右边

2.<：左边是否小于右边

3.>=：左边是否大于或等于右边

4.<=：左边是否小于或等于右边

5.==：左右两边是否相等

6.===：左右两边是否类型和值都相等

7.!==：左右两边是否不全等

8.比较结果为boolean(布尔)类型，即只会得到true或false

3.细节:

1.字符串比较，是比较的字符对应的ASCII码

从左往右依次比较
如果第一位一样再比较第二位，以此类推
比较的少，了解即可
图片不会上传自己去百度

2.NaN不等于任何值，包括它本身

3.尽量不要比较小数，因为小数有精度问题

4.不同类型之间比较会发生隐式转换

1.最终把数据隐式转换转成number类型再比较

2.所以开发中，如果进行准确的比较我们更喜欢 === 或者 !==

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>05-比较运算符.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      //  比较后的结果 其实是一个 bool 类型 true , false

      console.log(3 > 10); // 打印什么结果 false
      console.log(3 > 1); //  true

      console.log(3 < 10); //  true
      console.log(3 < 3); // false

      console.log(3 <= 3); // 小于或者等于 3

      // 判断是否相等 要用 两个 "="  号
      console.log(3 == 2); // false

      // let num = 4;
      // num = 5; // 只写一个等于号 赋值
      // console.log(num == 5); // 两个等于号才是判断

      // 判断 3 不等于 5
      // console.log(3!=5); // !=  不等于

      // 拿数字和字符串比较
      console.log(3 == '3'); // true  因为两个 == 只会判断值 而不会判断类型

      console.log(3 === '3'); //  flase  3个等于号  既要判断类型 也要判断值

      console.log(3 === 3); // true

      console.log(3 != 3); // false
      console.log(3 != '3'); // false

      console.log(3 !== '3'); // true

      console.log('============');

      //  比较 一般都是对数字做比较
      //  对于字符串做比较 更多是判断两者是否相等
      // console.log('A' === 'B');

      // 如果拿字符串去 大小的比较，判断的标准是
      // 先把字符串 拿去做 转数字
      // 转完了数字之后， 才根据数字做大小比较！

      console.log('A' > 'B'); // 81 > 82   了解即可 ！！！
      console.log('高航' > '彭炎');

      // NaN = A    ||    NaN = B
      console.log(NaN === NaN); // false 不能以为 两者代码一样就相等 （不是一个数字    ）

      // js 处理小数 有问题 后面会补充 精度的问题！！
      console.log(0.4 + 0.2 === 0.6);

      // 类型转换
      // console.log(4 > '3');
      console.log(4 > Number('3'));
    </script>
  </body>
</html>

5.逻辑运算符

1.逻辑运算符的介绍

逻辑运算符用来解决多重条件判断

2. 逻辑运算符的使用

1.逻辑符号

1.&&

1.名称:逻辑与

2.读法:并且

3.特点: 符号两边都为true 结果才为true

4.口诀:一假则假

2.||

1.名称:逻辑或

2.读法:或者

3.特点: 符号两边有一个true就为true

4.口诀:一真则真两假则假

3. !

1.名称:逻辑非

2.读法:取反

3.特点: true变false false变true

4.口诀:真变假假变真

5.可以反复套娃使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>06-逻辑运算符.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      /*
      有个数据  大于5 而且 小于 10
       */
      let num = 6;

      console.log(num > 5 && num < 10); // true

      console.log(num > 5 && num < 4); // 一假则假  false

      // 我有钱包    要不 等于 1块钱  要不就 等于  0

      let money = 10;
      // 一真则真
      console.log(money === 1 || money === 0); // 只要满足了随便一个条件 那么这个钱包就是我的

      let gender = true; // true 男生

      console.log(gender); // true 
      console.log((!gender));  // 取反了 false 
    </script>
  </body>
</html>

3.逻辑运算符里的短路

1.短路只存在于 && 和 || 中，当满足一定条件会让右边代码不执行

1.&& 左边为false就短路

2.|| 左边为true就短路

2.原因：通过左边能得到整个式子的结果，因此没必要再判断右边

3.运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>07-短路运算.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 一假则假  && 左边为false 右边就不再去执行
      // console.log(2 > 10 && 1 < 3 && 3 > 1 && 9 > 5 && 5 < 10 && 8 > 2);

      // 工作中常见的写法
      // 如果今天还下雨 那我就去吃海鲜
      //   不下雨 不去吃海鲜了
      // let rain = false;

      // 左边成立了 右边才会去执行
      // rain && console.log('下雨 去吃海鲜');

      // 逻辑或 一真则真
      // 只要 || 左边 成立了为true，右边就不再去执行
      // console.log(100 > 3 || 2 > 6 || 9 > 10 || 10 > 11 || 13 > 20);

      // 工作中 常用的技巧
      // 如果下雨，那么我就不玩了
      let rain = false;
      rain || console.log('去玩');

      // 两个短路运算  逻辑或 和 逻辑与 
      //   工作中的语法  逻辑与来说   满足了 就去执行
      //   工作中的语法  逻辑或来说   不满足了 就去执行
    </script>
  </body>
</html>

6.运算符优先级:

小括号 ()
一元运算符 ++ -- !
算数运算符先*/+-后
关系运算符 > >= < <=
相等运算符 == != === !==
逻辑运算符先&& 后||
赋值运算符 =
逗号运算符 ,

04.JavaScript运算符

1.算数运算符

1.数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。

2.运算符号:

3.优先级:先乘除后加减，有括号先算括号里面的

4.拓展:圆的面积计算 pi * r * r(π*半径的平方)

2.赋值运算符

1.对变量进行赋值的运算符

2.运算符号:

3.作用:

3.一元运算符

1.自增

2.自减

4.比较运算符

1.作用:比较两个数据大小、是否相等

2.比较运算符号:

3.细节:

1.字符串比较，是比较的字符对应的ASCII码

2.NaN不等于任何值，包括它本身

3.尽量不要比较小数，因为小数有精度问题

4.不同类型之间比较会发生隐式转换

5.逻辑运算符

1.逻辑运算符的介绍

2. 逻辑运算符的使用

1.逻辑符号

1.&&

2.||

3. !

3.逻辑运算符里的短路

1.短路只存在于 && 和 || 中，当满足一定条件会让右边代码不执行

2.原因：通过左边能得到整个式子的结果，因此没必要再判断右边

3.运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值

6.运算符优先级: