【JS基础】流程控制，让逻辑产生分支（选择语句、循环语句）

选择结构

if语句

使用

if (true) {
	// ...
}

if (true) {
	// ...
} else {
	// ...
}

// 这种形式的只要匹配到了，就不会继续匹配了，注意和一直if、if、if的区别
if (true) {
	// ...
} else if (true) {
	// ...
} else {
	// ...
}

中断执行

if (isTrue) return // 在函数内部，条件为真直接返回，不执行下面语句
// ...

注意：

1. 是要在一个函数内部使用if，if就算嵌套内部使用return也能阻止函数后面代码的执行。
2. if (isTrue) return 1有返回值，也会中断执行。

利用中断执行，效果可以与if...else...类似：

if(){
	// ....
}else{
    // ....
}

// 对比

if(){
  return // ....
}
//....

一些简写

建议看这篇文章：【JS基础】积累一些if语句的另类写法

switch语句

使用

switch(状态值){				
   case	状态值1:								
	 code..1								
	 break;				
   case	状态值2:								
	 code..2								
	 break;	  // 注意：内部语句有return的话就不用写break了		
   case	状态值N:								
     code..3								
	 break;				
   default:	 // (放在最后面可以省略, 放在前面不可以省略) 				
     code..4							
	 break;							
}

// 例子：
for (var n = 2000; n <= 2030; n++) {
	switch (true) {
		case n % 400 == 0:
			document.write(n)
			document.write("<br />")
			break;
		case n % 4 == 0 && n % 100 !== 0:
			document.write(n)
			document.write("<br />")
			break;
	}	
}

当多种条件执行的是相同逻辑时，可以这么写：

let a = 3;
function fn(a) {
  switch (a) {
    case 1:
    case 3:
    case 5:
      return "singular";
    case 2:
    case 4:
    case 6:
      return "even";
  }
}
console.log(fn(a)); // "singular"

if与switch适用性

• 条件是范围用if，if的使用更加灵活，判断也可以更复杂。
• 条件是具体值用switch。

---

循环结构

for循环

使用

for (初始化表达式；条件表达式；条件改变表达式){
	// 循环体； 
}

for (let i=0; i<arr.length; i++) {
	// 循环体； 
}

// 多条件循环
for(var i=0, j=0; i<6, j<10; i++, j++){  // 坑在这里，i<6,j<10满足一个循环继续
	x=i+j;
}
// 必须全部满足了才能停止循环

中断执行

break跳出后续循环：

for(var i=0; i<10; i++){
	if(i == 5){
		break; // 当i=5时，中断循环，后续的都不执行了
	}
}

continue跳出本次循环，继续下次循环：

for(var i=0; i<10; i++){
	if(i==5){
		continue; //当i=5时，跳过本次循环，到i=6
	}
}

return跳出所有循环并返回（与break不同的是必须要被函数包裹）：

function fn() {
	for(var i=0; i<10; i++){
		for(var i=0; i<20; i++){
			if (xxx) return
		}
	}
}

无论嵌套多少层直接中断，但循环必须包在函数内，否则用return会报错

tips：个人亲自实验，for循环比for of性能好很多

深度中断循环

用jsLabel写法

outer: for(let i=0; i<10; i++){
	for(let j=0; j<10; j++){
		// ...
		// 最深的一层
		if (xxxx) {
			break outer // 直接中断顶层的循环
		}
	}
}

while语句

使用

// 普通用法
while (条件表达式) {
	// 循环体 
} 

// do...while用法，与while不同的是，这个会先执行循环体，再判断条件
do{
	// 循环体 
} while (条件表达式); 

for与while的适用性

• 知道循环的次数用for。
• 不知道循环次数，但知道结束条件用while。

举例while的用途，首尾开始遍历

let arr = [1, 2, 3, 4, 5, 6, 7]
let [i, j] = [0, arr.length - 1]
while (i <= j) {
    console.log(arr[i], arr[j])
    i++
    j--
}

for in 语句

使用

常用于枚举对象内容：通过循环出key获取内容

var obj = {
    a: "1",
    b: "2",
    showname: function () {
        alert(111)
    }
}
for (var attr in obj){
    console.log(attr)  //attr表示把a，b，showname循环出来，也就是属性
    console.log(obj[attr]) //表示把属性值给循环出来
}

注意：

• 对象只能循环出可枚举内容和后续添加的原型属性内容。

数组和字符串循环出来的是下标，可通过下标获取对应内容：

let arr = [1, 2, 3, 4];
let str = "123465";

for (let i in arr) {
  console.log(i); // arr[i]
}
for (let i in str) {
  console.log(i); // str[i]
}

for of语句

属于es6的语法，不能遍历对象！

let arr = [1, 2, 3, 4];
let str = "123465";
for (let i of arr){
    console.log(i) // i返回数组元素
}
for (let i of str) {
  console.log(i); // i返回字符串
}

还可以循环Map和Set，还有dom的集合伪数组。

这个循环还可以让异步代码在循环体中真正等待（可能表述不太清晰，看代码吧），代码来自慕课。

// 定时算乘法
function multi(num) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(num * num)
        }, 1000)
    })
}

// 使用 forEach ，是 1s 之后打印出所有结果，即 3 个值是一起被计算出来的
function test1 () {
    const nums = [1, 2, 3];
    nums.forEach(async x => {
        const res = await multi(x);
        console.log(res);
    })
}
test1();

// 使用 for...of ，可以让计算挨个串行执行
async function test2 () {
    const nums = [1, 2, 3];
    for (let x of nums) {
        // 在 for...of 循环体的内部，遇到 await 会挨个串行计算
        const res = await multi(x)
        console.log(res)
    }
}
test2()

for await of语句

专门用来在for循环里执行异步操作：

//模拟异步代码
function getData(times) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(times);
    }, times * 1000);
  });
}
let arrays = [getData(0), getData(1), getData(2)];
async function execute() {
  for await (let item of arrays) {
    console.log(item); // 获取到的是then的结果
  }
}
execute() // 0 1 2

如果用普通for循环执行，打印的都是promise的pedding状态。可以改成：

async function execute() {
   for (let item of arrays) {
       let data = await item
       console.log(data);
   }
 }