小苏同学的知库

# 表达式和语句

表达式：表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果。

语句：js整句或命令，js语句是以分号结束（可以省略）

表达式和语句区别：

  • 表达式计算出一个值，但语句用来自行使某件事发生（做什么事）

    • 表达式 3+4
    • 语句：alert()、console.log()等

  • 其实某些情况，也可以把表达式理解为语句，因为它是在计算结果，也是做事。

# 顺序结构

代码从上往下执行就是顺序结构。

​

# 分支结构

根据条件选择执行代码（通常用于判断区间）

# if

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

// 单分支：
if（条件）{
  代码块
}

如果只有一条代码块，可以不用写 {}

if (true) console.log("xiaosutongxue");	// xiaosutongxue

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


# if...else...

小括号内的条件为true时，执行代码块1，反之执行代码块2。

// 双分支：
if（条件）{
  代码块1
} else {
  代码块2
}

# if...else if...

先判断条件1，若条件1满足则执行代码块1，其它不执行；

若条件1不满足则向下判断条件2，此时若条件2满足则执行代码块2，其它不执行；

若条件2依然不满足则继续向下判断，依次类推；

最终若以上条件都不满足，就执行else里的代码块n。

// 多分支：
if（条件1）{
  代码块1
} else if（条件2）{
  代码块2
} else if（条件3）{
  代码块3
} else {
  代码块n
}

# 三元运算符

三元运算符是针对 if 判断的简写形式。

条件 ? 满足条件执行的代码 : 不满足条件执行的代码

let a = 3,b = 4;
let c = a > b ? 1 : 0
console.log(c);	// 0

# switch

可以将 switch 理解为 if 的另一种结构清晰的写法。

switch语句一般用于等值判断，不适合于区间判断。

首先找到跟小括号里表达式全等的case值，并执行里面对应的代码；若没有全等的则执行default里的代码，default语句是可以不写的。break 关键字会终止 switch 的执行，如果 case 执行后缺少 break 则接着执行后面的语句，直到遇到break或者switch语句执行结束，这就是case穿透。

// 一般用于等值判断
switch（表达式）{
	case 值1:
		代码1
		break
	case 值2:
		代码2
		break
	default：
		代码n
		break
}

注意：switch case一般需要配合break关键字使用，没有break会造成case穿透

# if 和 switch 的使用技巧

  • 如果是判断区间用 if
  • 如果是固定值用 switch

# 循环结构

所谓循环就是指某段代码被重复执行的过程。

# for

for 的三个参数可以都省略或取几个

for(起始条件; 循环条件; 变化值){
	循环体
}

# for循环嵌套

//一个循环里再套一个循环，一般用在for循环里
for(外部声明记录循环次数的变量; 循环条件; 变化值){
	for(内部声明记录循环次数的变量; 循环条件; 变化值){
		循环体
	}
}

# while

while跟if语句很像，都要满足小括号里的条件，只有当条件为true时才会执行代码块

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

while(循环条件){
	循环体
}

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

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

注意：循环内的弹窗有断点的效果。

# for循环和while循环的区别

  • 如果明确了循环的次数，推荐使用for循环
  • 如果不明确循环的次数，推荐使用while循环

# do...while...

后条件判断语句，无论条件是否为真都会先进行循环体，也就是说循环体至少执行一次。

do{
	循环体
} while(循环条件)

# for...in...

用于遍历对象的所有属性，for...in... 主要用于遍历对象，不建议用来遍历数组。

// 遍历对象
let obj = {
  name: "小苏同学",
  url: "xiaosutongxue.com"
};
for (const key in obj) {
  // key是对象的属性，obj[key]是对象中属性key对应的值
  if (obj.hasOwnProperty(key)) {
    console.log(obj[key]);
  }
}

// 遍历数组
let arr = ['钢铁侠', '绿巨人', '蜘蛛侠'];
for (const key in arr) {
  // key是数组的索引，arr[key]是数组中索引key对应的值
  console.log(key);	// 0 1 2
  console.log(arr[key]);	// 钢铁侠 绿巨人 蜘蛛侠
}

# for...of...

用来遍历 Arrays（数组）、Strings（字符串）、Maps（映射）、Sets（集合）等可迭代的数据结构。

与 for...in... 不同的是 for...of... 每次循环取其中的值而不是索引。

// 遍历数组
let arr = [1, 2, 3];
for (const iterator of arr) {
  console.log(iterator);	// 1 2 3
}

// 遍历字符串
let str = "xiaosutongxue";
for (const iterator of str) {
  console.log(iterator);	// x i a o s u t o n g x u e
}

# continue与break

continue ：结束本次循环，继续下次循环。

break ：

  1. 结束switch结构
  2. 终止循环（跳出所在循环）

注意：循环体内 break后面的语句不再执行。


# label

标签（label）为程序定义位置，可以使用continue/break跳到该位置。

// i+n 大于 15 时退出循环
outside: for (let i = 1; i <= 10; i++) {
  inside: for (let n = 1; n <= 10; n++) {
    if (n % 2 != 0) {
      continue inside;
    }
    console.log(i, n);
    if (i + n > 15) {
      break outside;
    }
  }
}

← 函数 →