js基础02

内容概述

1. 浏览器断点调试

2. 条件判断

3. 循环语句

 

 

学习内容

 

 

断点调试

我在网上看到一篇比较详细的控制面板的使用教程，原网址

 

条件判断

if语句

if语句：满足条件的时候执行代码块。这个条件可以是一个变量、也可以是一个表达式，比如：‘abc’、‘2 > 1’等。js会对表达式的最终结果进行隐式转换，转换成boolean形式。

if(条件) {
    条件成立的时（true）时执行
}

当程序满足条件a的时候执行代码块1，不满足的时候执行代码块2。两个代码块只执行一个，这个时候就要用到 if~else语句了

if(条件a) {
   代码块1 
} else {
    代码块2
}

当存在多个判断条件的时候，比如：老师要发奖状，特等奖发给小张同学，一等奖发给小明，二等奖发给小红，进步奖发给小王同学、小马和小心。虽然上面也是只能有一个代码块执行，但是有多种情况，这个同学可能是校长、小明，也可能是小红，这个时候if~else就不满足了

if(小张) {
   特等奖 
} else if(小明) {
    一等奖
} else if(小红) {
    二等奖
} else if(小王 || 小马 || 小心) {
    进步奖
} else {
    不发奖
}

转换成代码：

var stu = '校长'
​
if(stu === '小张') {
   console.log('特等奖') 
} else if(stu === '小明') {
    console.log('一等奖')
} else if(stu === '小红') {
    console.log('二等奖')
} else if(['小王', '小马', '小心'].indexOf(stu) >= 0) {
    console.log('进步奖')
} else {
    console.log('不发奖')
}

 

switch语句

用于基于不同条件执行不同动作。可以用switch语句来选择多个需要被执行的代码块之一

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
} 

代码解释： 计算一次switch表达式，把表达式的值与每一个case的值进行对比，如果存在匹配就执行关联代码，break；的意思就是终止判断，不执行后面的判断和操作。如果不存在匹配的就执行默认代码块。

上面发奖状的例子经过switch语句改造之后：

var stu = '小张'
​
switch(stu) {
    case '小张': 
        console.log('特等奖')
        break;
   case '小明': 
        console.log('一等奖')
        break;
   case '小红': 
        console.log('二等奖')
        break;
   case '小王': 
        console.log('进步奖')
        break;
   case '小马': 
        console.log('进步奖')
        break;
   case '小新': 
        console.log('进步奖')
        break;
    default:
        console.log('不发奖')
}

1. 每一个代码块后一定要加一个break;。不加的话也不会报错，但是执行完这个匹配条件后代码还会继续向下走，浪费程序；

2. 语句最后的default代码块适用于没有符合的条件的时候默认执行的代码块，也可以不要，就不会执行任何操作。

 

 

 

循环语句

js循环，用于循环多次执行同一个代码块。

比如我们要打印：‘起床啦’10次。

console.log('起床啦')
console.log('起床啦')
console.log('起床啦')
console.log('起床啦')
console.log('起床啦')
console.log('起床啦')
console.log('起床啦')
console.log('起床啦')
console.log('起床啦')
console.log('起床啦')

像上面那样写10次console.log('起床啦')显然有点浪费，此时我们就可以用到循环：

for(这段代码要执行10次) {
  console.log('起床啦')
}

是不是简便很多了，js中的常见的循环语句有以下三种：

• for - 多次遍历代码块。是创建循环的时候最常用到的。

• for/in - 遍历对象属性

• while - 当指定条件为 true 时循环一段代码块

• do/while - 当指定条件为 true 时循环一段代码块

 

for循环：

语法：

for(语句1, 语句2, 语句3) {
    要执行的循环体
}

语句1在循环开始前执行：通常用于声明一个初始变量,不是必要的

语句2定义循环条件：首次进入循环之前会执行一次，之后没执行完一次循环体后都会执行一次，直到返回值为false时跳出循环。

语句3定义循环增量：首次进入循环前不会执行，之后每执行完一次循环体后都会执行一次（在语句2执行之前）

for(var i = 0; i < 10; i++) {
  console.log('起床啦')}
​
// 省略语句1
var i = 0
for(; i < 10; i++) {
  console.log('起床啦')}

 

for/in循环：

用来循环遍历对象的属性：

for(var key in object) {
    要执行的循环体
}

上面key是对象的属性名（键），通过object[key]可以获取对应的属性值。

var obj = { a: 1, b: 2, c: 3 }
​
for(var key in obj) {
  console.log(key, '---', obj[key])
}

对应的结果：

a --- 1
b --- 2
c --- 3

 

也可以把上面key的声明放到循环体外面：

var key
for(key in object) {
    要执行的循环体
}

也可以用for/in来循环数组，此时key对应的就是数组的下标索引

 

for/of循环：

用于循环遍历可迭代的对象的值，目前主要清楚有数组和字符串就可以。

for(var item of iterable) {
    要执行的循环体
}

与for/in不同的是，item指向每一个循环体。

const arr = [11, 22, 33]
for(var item of arr) {
    console.log(item)
}

执行的结果：

11
22
33

不过很少会用到for/of, 数组与专门循环方法数组方法。用for和for/in也可以遍历字符串。

 

 

while循环：

没执行完一次循环体，会再进行一次判断，如果判断一直为true,循环体就会一直执行下去，否则终止循环。

while(条件) {
    要执行的循环体
}

var i = 1;
while(i >= 1) {
    console.log('lala')
    i--
}

结果是循环体会执行一次。while循环会先进行一次判断，如果判断为true，才会进入循环体; 如果判断为false,则直接结束循环。

 

 

do/while循环：

与while的功能相同，唯一不同的是：do/while不管条件符不符合都会先执行一次循环体，再进行判断，如果判断满足就会继续执行循环体，否则终止循环

do {
    要执行的循环体
} while(条件)

沿用上面的例子，把循环条件稍微改造以下：下面的循环体也会执行一次。

var i = 1;
do {
    console.log('lala')
    i--
} while(i > 1)

 

关键字

break

作用是：中断循环，循环结束。用在switch语句中就是结束switch判断，后面的代码和判断都不执行。

    // 1 - 6 电梯
    debugger;
    for (var i = 1; i <= 6; i++) {
        console.log(i);
        // 电梯到达三楼，不需要继续运行
        if (i === 3) {
            break;
        }
    }

 

continue

作用：继续循环，continue 后面的代码不会执行，直接继续进入下一次循环

// 1 - 6 电梯， 三楼没人按，电梯其实还要继续
for (var i = 1; i <= 6; i++) {
    if (i === 3) {
        // 继续循环，continue 后面的代码不会执行，直接进入下一次循环
        continue;
    }
    console.log(i);
}