JavaScript 基本的流程控制

 

if 多分支和switch的区别

 if 多分支语句和 switch的区别：

1. 共同点:

   • 都能实现多分支选择， 多选1

   • 大部分情况下可以互换

2. 区别：

   • switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。

   • switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次

   • switch 一定要注意 必须是 === 全等，一定注意 数据类型，同时注意break否则会有穿透效果

   • 结论：

     • 当分支比较少时，if…else语句执行效率高。

     • 当分支比较多时，switch语句执行效率高，而且结构更清晰。

1.1运算符

赋值运算符

赋值运算符(=)将等号右边的值赋予给左边, 要求左边必须是一个容器

其它赋值运算符:+=,-=,*=,/=,%=;使用这些运算符可以在对变量赋值时进行快速操作

let num = 1
     // 采取赋值运算符
    // num = num + 1
    // num += 1
    num += 3
    console.log(num)

1.2一元运算符

一元运算符: 仅操作一个操作数. 比如: 正负号等

前置自增:++i

后置自增:i++

前置自增和后置自增单独使用没有区别

但是：符号前置 => 先加1 再使用 (快捷记忆: ++在前 先加)

符号后置 => 先使用 再加1 (快捷记忆: ++在后, 后加)

前置自增和后置自增如果参与运算就有区别:

//前置自增：先自加再使用（记忆口诀：++在前 先加
 let i = 1
 console.log(++i + 1)// 3
//后置自增：先使用再自加（记忆口诀：++在后 后加） 
 let i = 1
 console.log(i++ + 1) //2
//面试题  了解即可
let i = 1
console.log(i++ + ++i + i)//7

1.3比较运算符

应用场景:比较两个数据大小、是否相等

>： 左边是否大于右边

<： 左边是否小于右边

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

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

==： 左右两边值是否相等

===： 左右两边是否类型和值都相等(全等)

!==： 左右两边是否不全等(不全等)

!=: 不等

比较结果为boolean类型，即只会得到 true 或 false

= 单等是赋值

== 是判断

=== 是全等

开发中判断是否相等，强烈推荐使用 ===

 

1.4逻辑运算符

 

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

1.5运算符优先级

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

逻辑与比逻辑或优先级高

 

 

2.语句

 

if分支

if语句有三种使用：单分支、双分支、多分支

单分支

语法:
if(条件){
    满足条件执行的代码
} 
​

括号内的条件为true时，进入大括号里执行代码

小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做~

双分支  

语法:
if(条件){
    满足条件执行的代码
}else{
   不满足条件执行的代码
} 
//需求用户输入，用户名：pink，密码：123456， 则提示登录成功，否则提示登录失败
// 示例代码
// 1. 用户输入
    let uname = prompt('请输入用户名:')
    let pwd = prompt('请输入密码:')
    // 2. 判断输出
    if (uname === 'pink' && pwd === '123456') {
      alert('恭喜登录成功')
    } else {
      alert('用户名或者密码错误')
    }

多分支

释义：

先判断条件1，若满足条件1就执行代码1，其他不执行

若不满足则向下判断条件2，满足条件2执行代码2，其他不执行

若依然不满足继续往下判断，依次类推

若以上条件都不满足，执行else里的代码n

注：可以写N个条件，但这里演示只写2个

 

三元运算符

其实是比 if 双分支更简单的写法，可以使用 三元表达式

语法:

条件 ? 满足条件执行代码1 : 不满足条件执行代码2

    // 三元运算符
    // 条件 ? 代码1 : 代码2
 	 console.log(3 > 5 ? 3 : 5)
        if (3 < 5) {
           alert('真的')
         } else {
          alert('假的')
        }
	// 三元写法
     3 < 5 ? alert('真的')  : alert('假的')
	// 
	let sum = 3 < 5 ? 3 : 5
    console.log(sum)// 3

 

switch语句

找到跟小括号里数据全等的case值，并执行里面对应的代码

若没有全等 === 的则执行default里的代码

例：数据若跟值2全等，则执行代码2

注意事项:

1. switch case语句一般用于等值判断,不适合于区间判断

2. switch case一般需要配合break关键字使用 没有break会造成case穿透

   语法:
   switch (表达式) {
         case 值1:
           代码1
           break  
         case 值2:
           代码2
           break  
         case 值3:
           代码3
           break  
         default:
           代码n
           break
       }

 

3.循环

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

 

跟if语句很像，都要满足小括号里的条件为true才会进入 循环体 执行代码

while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

循环三要素:

1.变量起始值

2.终止条件(没有终止条件，循环会一直执行，造成死循环)

3.变量变化量（用自增或者自减)

1. 变量的起始值
    let end = +prompt('请输入次数:')
    let i = 1
    // 2. 终止条件
    while (i <= end) {
      document.write('我要循环三次 <br>')
      // 3. 变量的变化量
      i++
    }

2.页面输出1~100
let i = 1
    while (i <= 100) {
      document.write(`这是第${i}个数<br>`)
      i++
    }

3.页面输出1~100 累加和
  let i = 1  // 变量的起始值
     let sum = 0  // 累加和变量
     while (i <= 100) {
       // 把i 累加到 sum 里面
 		//sum = sum + i
		sum += i
    	i++
    }
 	console.log(sum) // 5050

4.页面输出1~100 偶数和
 let i = 1
    let sum = 0
    while (i <= 100) {
      // 筛选偶数 只有偶数才累加
      if (i % 2 === 0) {
        sum = sum + i
      }
      // 每次循环都要自加
      i++
    }
    console.log(sum)

 

循环退出

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue

break 退出整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用

// break    
 let i = 1
    while (i <= 10) {
      console.log(i)
      //break:吃到第五个包子吃饱了，后面的包子都不吃了。整个循环结束，立即执行循环后面的代码
      if (i === 5) {
        break  // 退出循环
      }
      i++
    } 
console.log('吃完包子啦')

// continue 
let i = 1
    while (i <= 10) {
      //continue:吃到第五个包子，吃到虫子了。第五个包子不吃，但是没吃饱后面包子继续吃。
      //结束本次循环体,立即进入下一次循环判断
      if (i === 5) {
        i++
        continue
      }
      console.log(`我正在吃第${i}个包子`)
      i++

    }