重新梳理JavaScript中ECMAscript的基础知识之二

目录

一、运算符

1.算数运算符

求圆的面积

2.赋值运算符

3.一元运算符

4.比较运算符

5.逻辑运算符

6.运算符的优先级

二、语句

1.表达式和语句

2.分支语句

1.if分支语句

案例：

案例：​

2.三元运算符

案例：

3.switch语句

案例： 简易的计算器

三、循环

1.

2.while循环

1.语法：

2.注意事项：

案例：

---

一、运算符

1.算数运算符

数学运算符也叫算数运算符 包括 : 加+  减- 乘* 除/ 余%（也叫取模）

算数运算符就比较简单了 就是小学所学的 + - * /  。需要注意一下的是% 取模在开发中经常用来求某个数字能否被整除

运算符的优先级总结：先乘除后加减，有小括号先算小括号里面的。

求圆的面积

    // 准备一个变量来接收用户输入半径
    let r = prompt('请输入圆的半径：')
    // 准备一个变量接收圆的面积计算的结果  注意等号右边先进行运算 再赋值给等号右边
    let s = 3.14 * r * r
    // 页面打印使用模板字符串
    document.write(`圆的面积是：${s}`)

2.赋值运算符

‘=’号就是赋值运算符 需要注意在JavaScript中的 ‘=’等号 和数学中的等号不一样

js中 ‘=’是把等号右边的值赋值给等号左边的变量，而在js中‘==’与数学中‘=’是一样的

其他赋值运算符还有：

1. +=
2. -=
3. *=
4. /=
5. %=

//以前给一个变量加一怎么做？
  <script>
    let num = 1
    num = num + 1
    console.log(num);  // 2
  </script>

//现在可以直接赋值
  <script>
    let num = 1
    num += 1
    console.log(num); // 2
  </script>

3.一元运算符

js中有很多种运算符 分为一元运算符、二元运算符、三元运算符。

每次我们加一都要写一遍比较麻烦，有什么简单的方法吗?

自增：符号：++   让变量自加1

自减： 符号：--  让变量自减1

使用场景：经常用来计数 进行多次操作 

用法：

前置自增：

<script>
    let num = 1
    ++num
</script>

让num自加1 相当于 num += 1

后置自增：

<script>
    let num = 1
    num++
</script>

让num自加1 相当于 num += 1

前置自增和后置自增没有任何区别  区别在于参与了算数运算规则就不一样了

前置自增：先自增1，再参加运算（++在前 先加）

  <script>
    let num = 1
    console.log(++i + 2); //结果是4
    // 注意：此时i 是2 在加上2
  </script>

后置自增：先参与运算，再自增1（++在后 后加）

  <script>
    let num = 1
    console.log(i++ + 2); //结果是3
    // 注意i++先进行运算在自加1  
    console.log(i)  //而此时的i是2
  </script>

自减同理

开发中一般单独使用 很少进行一起运算 而后置自增用的多

面试题：

 

let i = 1 
console.log(i++ + ++i + i)
// i++ 为1 参与运算 1 +.. 
//此时i自增1 变成2 + ++i  而++i 先自增1为 2+1=3 就是 1+2+1
//最后i自增了1 为3 是1+（2+1）+3
//输出为7

4.比较运算符

比较运算符：

• > ： 左边是否大于右边
• <： 左边是否小于右边
• >=： 左边是否大于或等于右边
• <=： 左边是否小于或等于右边
• ==： 左右两边是否相等
• ===： 左右两边是否类型和值都相等
• !==： 左右两边是否不

比较运算符的结果为布尔型，只会得到两个false 和 true

细节：

1. 字符串比较，是比较的字符对应的ASCII码
2. NaN不等于任何值，包括它本身
3. 不同类型之间比较会发生隐式转换成布尔型再比较
4. === 和 !==使用较多 而==用的少

5.逻辑运算符

逻辑运算符

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边都为true,结果才是true	一假即假
||	逻辑或	或者	符号两边都为false,结果才是false	一真即真
!	逻辑非	取反	true变false, false变true	真变假,假变真

逻辑与&&和逻辑或|| 的短路

&&：当符号左边为false时结果为false 不用管右边什么表达式

||：当符号左边为true时结果为true不用管右边什么表达式

原因：通过左边就能判断整个式子的结果，就没必要再关心右边

6.运算符的优先级

 一元运算符中的逻辑非优先级很高  !

逻辑与比逻辑或优先级高

二、语句

1.表达式和语句

区别：表达式是计算出结果；语句是做某件事

例如 表达式：1+2

        语句：alert（）

2.分支语句

程序控制三大流程控制语句：

1. 顺序语句 （执行从上往下的代码执行顺序就不多讲了）
2. 分支语句
3. 循环语句

分支语句可以让我们有选择性的执行代码

1.if分支语句

if分支语句分为：单分支、双分支、多分支

单分支的语法：

if (条件) {
   执行代码
}

小括号里为true时才执行大括号里面的代码

当小括号里面不是布尔型，不隐式转换为布尔型

案例：

需求：当成绩大于等于700时，被录取

    // 声明一个变量接收用户输入的数据
    let num = +prompt('请输入您的高考成绩：')
    // if 判断语句 如果输入的数大于等于700 则执行代码块
    if (num >= 700) {
      document.write('恭喜你被录取了！')
    }

双分支语句

    if (条件) {
      满足条件执行的代码
    } else {
      不满足条件执行的代码
    }

案例：

  //案例1
    <script>
    //声明变量接收数据
    let age = prompt('请你输入您的工龄：')
    let money = 15000
    // 判断条件
    if (age >= 1) {
      document.write(`你的工资是${money + 2000}`)
    } else if (age < 0) {
      document.write('请输入一个正确的数')
    } else {
      document.write(`你的工资是${money}`)
    }
  </script>

  案例2
    // 声明一个变量接收用户输入的数据 注意要隐式转换为数字型
    let year = +prompt('请输入一个年份')
    // 判断是否满足是闰年的条件 结果为真输出为闰年。结果为假输出平年
    if (year % 4 === 0 & year % 100 !== 0 || year % 400 === 0) {
      document.write(`您输入的${year}是闰年`)
    } else {
      document.write(`您输入的${year}是平年`)
    }

多分支语句

 释义：

1.  先判断条件1，若满足条件1就执行代码1，其他不执行
2.  若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
3. 若依然不满足继续往下判断，依次类推
4. 若以上条件都不满足，执行else里的代码n
5. 注：可以写N个条件，但这里演示只写

2.三元运算符

 和if双分支语句语句很相似可以口述 条件为真吗？ 为真取冒号前面 为假取冒号后面

案例：

判断两个数的大小

    // 声明两个边量接收用户输入的数据 此时注意要隐式转换数字型
    let num1 = +prompt('请你输入第一个数')
    let num2 = +prompt('请你输入第二个数')
    // 声明一个变量接收比较出的结果
    let res = num1 > num2 ? num1 : num2
    document.write(`你输入的${res} 比较大`)

数字补零

    // 准备弹出框
    let num = prompt('请输入一个数')
    // 三元表达式
    let result = num < 10 ? '0' + num : num
    document.write(`补零后的数是${result}`)

    // 判断数字是否小于0 如果小于0 就补零
    // if 语句 
    if (num < 10) {
      document.write(`${'0' + num}`)
    } else {
      document.write(num)
    }

3.switch语句

 释义：

1. 找到跟小括号里数据全等的case值，并执行里面对应的代码
2. 若没有全等 === 的则执行default里的代码
3. 例：数据若跟值2全等，则执行代

注意事项：

一般用于等值判断。不适合区间判断

还需要搭配break关键字使用 没有break会造成case穿透

案例： 简易的计算器

    // 声明三个变量接收用户输入的数据 注意要隐式转换为number类型
    let num1 = +prompt('请输入第一个数')
    let num2 = +prompt('请输入第二个数')
    let operator = prompt('请输入+ - * / 中的任意一个运算符')
    switch (operator) {
      case '+':
        document.write(`您输入的是加法运算，结果为${num1 + num2}`)
        break
      case '-':
        document.write(`您输入的是减法运算，结果为${num1 - num2}`)
        break
      case '*':
        document.write(`您输入的是乘法运算，结果为${num1 * num2}`)
        break
      case '/':
        document.write(`您输入的是除法运算，结果为${num1 / num2}`)
        break

      default:
        alert('请输入正确的数')

三、循环

1.

2.while循环

1.语法：

    while (循环条件) {
      要重复执行的代码(循环体)
    }

释义：
跟if语句很像，都要满足小括号里的条件为true才会进入执行代码
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到
小括号判断条件，直到括号内条件不满足，即跳出

2.注意事项：

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。

循环需要具备三要素：
1. 变量起始值
2. 终止条件（没有终止条件，循环会一直执行，造成死循环）
3. 变量变化量（用自增或者自减）

案例：

 

案例1    
    // 声明变量起始值
    let i = 1
    let sum = 0
    // 循环条件
    while (i <= 100) {
      document.write(i + '<br>')
      // 变量更新
      sum += i
      i++
    }

案例2
    // 声明变量起始值
    let i = 1
    let sum = 0
    // 循环条件
    while (i <= 100) {
      // 变量更新
      sum += i
      i++
    }
    document.write(sum)

案例3
    // 声明变量起始值
    let i = 1
    let sum = 0
    while (i < 100) {
      // 判断是否为偶数 条件就是能整除2
      if (i % 2 === 0) {
        sum += i
      }
      i++
    }
    console.log(sum)