JavaScript基础-CSDN博客

本文链接：https://blog.csdn.net/weixin_70024004/article/details/125142480

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></body>
  <script>
    // + - * / %(余数/求模)
    var a = 10;
    var b = 20;

    console.log(a + b); // 30
    console.log(a - b); // -10
    console.log(a * b); // 200
    console.log(b / a); // 2
    console.log(b % a); // 0
  </script>
</html>

2.一元运算

a += 10; 相当于 a + 10 = ;

<!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>
    var a = 10;

    a += 10;
    a -= 10;
    a *= 10;
    a /= 10;
    a %= 10;
    console.log(a);
  </script>
</html>

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>
    var a = 10;
    var b = 20;
    // 自增一
    a++; // a+=1  11
    ++a; // 12

    console.log(a); // 12
    console.log(a++); // 12
    // a = 13
    console.log(++a); // 14

    // 自减一
    b--; // a-=1 19
    --b; // 18
    console.log(b); // 18
    console.log(--b); // 17
    console.log(b--); // 17

    /**
     * ++ -- 单独出现，无论出现在表达式的前边或者后边都是直接赋值
     * ++ -- 在使用的时候，++ -- 在前是先加后用，++ -- 在后先用再加
     */
  </script>
</html>

4.比较运算符

其结果是一个boolean类型的值 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>Document</title>
  </head>
  <body></body>
  <script>
    // >  <  >= <=  ==  !=  === !==
    var a = 10;
    var b = 20;
    console.log('a>b:', a > b); // false
    console.log('a<b:', a < b); // false
    a = 20;
    console.log('a>=b:', a >= b); // true
    console.log('a<=b:', a <= b); // true
    console.log('a==b:', a == b); // true
    console.log('a!=b:', a != b); // false
    console.log('a===b:', a === b); // true
    console.log('a!==b:', a !== b); // false

    var x = '10'; // stirng
    var y = 10; // number

    // == 只比较值是否相等
    console.log('x==y:', x == y); // true
    // === 比较值和数据类型是否相等
    console.log('x===y:', x === y); // false
  </script>
</html>

“=”赋值

“==”只比较值是否相等

“===”比较值和类型数据是否相等，定义变量的时候，会在内存中开辟一段空间，这段空间会有内存地址，定义变量就指向的是这个内存地址，不同的类型存储的地址是不一样的

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>Document</title>
  </head>
  <body></body>
  <script>
    // >  <  >= <=  ==  !=  === !==
    var a = 10;
    var b = 20;
    console.log('a>b:', a > b); // false
    console.log('a<b:', a < b); // false
    a = 20;
    console.log('a>=b:', a >= b); // true
    console.log('a<=b:', a <= b); // true
    console.log('a==b:', a == b); // true
    console.log('a!=b:', a != b); // false
    console.log('a===b:', a === b); // true
    console.log('a!==b:', a !== b); // false

    var x = '10'; // stirng
    var y = 10; // number

    // == 只比较值是否相等
    console.log('x==y:', x == y); // true
    // === 比较值和数据类型是否相等
    console.log('x===y:', x === y); // false
  </script>
</html>

5.逻辑运算符

&& || !

&&：逻辑与，短路与，联立两个或者多个boolean结果的表达式，当两个或者多个表达式的结果都为true,则结果为true,有一个为false,则结果为false

||：短路或，短路或，联立两个或者多个boolean结果的表达式，当有任意一个为true,则结果为true,所有的false,则结果为false

!: 逻辑非，短路非，取反: 如果表达式为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>Document</title>
  </head>
  <body></body>
  <script>
    var a = 10;
    var b = 20;

    // && || !
    // 联立两个或者多个boolean结果的表达式，当两个或者多个表达式的结果都为true,则结果为true,有一个为false,则结果为false
    //  false && true = false
    // true && true = true
    console.log(a > b && a < b); // false && true = false

    // ||
    // 联立两个或者多个boolean结果的表达式，当有任意一个为true,则结果为true,所有的false,则结果为false
    // false || true = true
    // false || false = false
    console.log(a > b || a < b); // false || true = true
  </script>
</html>

6.运算符的优先级

算数运算符：先算乘除，再算加减，有括号先算括号里边的

比较运算符：有括号先算括号里边的

逻辑运算符：先算左右的表达式，再运算，有括号先算括号里边的

7.三目运算符

也叫三元运算符

<!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>
    var a = 10;
    var b = 20;

    // 判断a是否大于b,ture:a大于b' false：'a不大于b'，将结果赋值给c
    var c = a > b ? 'a大于b' : 'a不大于b';
    console.log(c);
  </script>
</html>

8.分支结构

正常的代码执行顺序是从上至下，但是遇到分支结构和循环会改变现有的代码执行顺序

分支结构其实就是判断

if | if-else |if-else-if

if语句
<!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>
    // if(判断条件 boolean){满足条件执行的代码}
    // 判断条件 true/false  true 执行，false不执行
    var sex = '男';

    if (sex === '男') {
      console.log('男厕所');
    }

    if (sex === '女') {
      console.log('女厕所');
    }
  </script>
</html>

if-else
<!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>
    /*
    if(判断条件){
      判断条件为true执行的代码
    }esle{
      判断条件为false执行的代码
    }
    */

    var sex = '男';

    if (sex === '男') {
      console.log('男厕所');
    } else {
      console.log('女厕所');
    }
  </script>
</html>

if-else--if
<!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>
    /*
    if(){

    }else if(){

    }else if(){

    }
    */

    var score = 80;

    if (score >= 90) {
      console.log('优秀');
    } else if (score >= 80) {
      console.log('良好');
    } else if (score >= 60) {
      console.log('及格');
    } else {
      console.log('不及格');
    }
  </script>
</html>

switch-case

switch放的是值，case 就是条件，匹配合适的执行对应的代码，当匹配不到会执行default中的代码,break 防止case穿透

<!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>
    var sex = '男';

    switch (sex) {
      case '男': // 当性别为男
        console.log('去男厕所');
        break; // 防止case穿透
      case '女': // 当性别为女
        console.log('去女厕所');
        break;
      default: // 当性别为其他  // 当上边的case都不满足，则执行
        console.log('没有找到适合的你的厕所');
        break;
    }
  </script>
</html>