Cao Note

外观

条件、循环、语句 ​

if 语法 ​

if 基本使用 ​

  • if(条件){}

    当条件满足时执行，if 当中只有 1 条语句时就可以省略花括号，语句直接紧挨着条件；

js
if (true) console.log('成立') // 如果if不满足则不走该条语句
console.log('...')
if (true) console.log('成立') // 如果if不满足则不走该条语句
console.log('...')

  • if(){}else{}

    小括号写条件，花括号写满足条件与不满足的条件

    开关定义:在 if 外面声明一个 flag=true，在 if 里面执行第一条改变变量为 false，else 里面执行条件后改变变量为 true，返回去继续执行第一条 if；

  • if(){}else if(){}else if(){...........}else{}

    可以写多个判断，当所有条件都不成立时，执行最后一个 else，最后一个可以写也可以不写，最好把不好满足的写在前面；

while 循环 ​

while 循环做不到的，for 循环一定做不到；for 循环只是把循环到的代码集中在了一个地方；

  • while(){}；括号填写条件，花括号循环体
  • 满足条件开始执行，不满足则不执行；根据返回结果的布尔值进行判断
  • for 循环与 while 循环的区别：while 循环不一定要有计数器，只要条件满足则会一直循环；
js
var i=0;
while(i<10){    //这样是循环10次，如果是<=10，则是11次，因为是从0开始的；
    循环体；
    i++;  //记录次数，不能省略，否则一直循环，浏览器就死了；
};
// 也可以这样一条语句
while (i<10) i++
var i=0;
while(i<10){    //这样是循环10次，如果是<=10，则是11次，因为是从0开始的；
    循环体；
    i++;  //记录次数，不能省略，否则一直循环，浏览器就死了；
};
// 也可以这样一条语句
while (i<10) i++

例子 1：反复提示用户输入密码

js
//提示用户请输入您的帐号和密码,如果有一个错误了,则提示用户继续的输入帐号和密码
var userPwd = prompt('请您输入您的密码')
var userName = prompt('请您输入您的帐号')
while (userName != 'admin' || userPwd != '123') {
  userPwd = prompt('请您输入您的密码') // 提示用户输入账号
  userName = prompt('请您输入您的帐号') // 提示用户输入密码
}
console.log('登录成功')
//提示用户请输入您的帐号和密码,如果有一个错误了,则提示用户继续的输入帐号和密码
var userPwd = prompt('请您输入您的密码')
var userName = prompt('请您输入您的帐号')
while (userName != 'admin' || userPwd != '123') {
  userPwd = prompt('请您输入您的密码') // 提示用户输入账号
  userName = prompt('请您输入您的帐号') // 提示用户输入密码
}
console.log('登录成功')

例子 2：转换 url 的 Search 部分为对象形式

js
let str = '?id=1&name=hny&age=18'
let reg = /(\w+)=(\w+)/gi // 不能省略这个g
let o = {}
while (reg.exec(str)) {
  o[RegExp.$1] = RegExp.$2
}
console.log(o) // {id:1,name:hny,age:18}
let str = '?id=1&name=hny&age=18'
let reg = /(\w+)=(\w+)/gi // 不能省略这个g
let o = {}
while (reg.exec(str)) {
  o[RegExp.$1] = RegExp.$2
}
console.log(o) // {id:1,name:hny,age:18}

image-20240704141718070

do-while 循环 ​

do{/*语句...*/}while()；执行一次之后再判断 while 的条件语句，比 while 先执行一次；

js
var i = 0 //计数器
do {
  console.log('哈哈')
  i++
} while (i < 10) //一共循环10次,while括号后一定要加分号；
var i = 0 //计数器
do {
  console.log('哈哈')
  i++
} while (i < 10) //一共循环10次,while括号后一定要加分号；

（1）while 循环特点：先判断，后循环，有可能一次循环都不执行；

（2）do-while 循环特点：先循环，后判断，至少执行一次循环体；

for 循环 ​

  • 一件事不停的或者重复去做是循环

  • 循环应该有结束的条件，循环还应该有一个计数器(记录循环的次数)

  • for(声明; 判断; 变化){}

    小括号填写三个内容：声明变量；结束循环的条件；变量改变，花括号填写循环体

    语法：

    • 声明
    • 判断条件是否满足，不满足则跳出，满足执行下一步
    • 满足则执行循环体
    • 执行完循环体跳到变化，之后返回 ② 继续如此

    每次循环可以在外边声明一个变量，将循环的数据保留下来；var sum=0

  • for 循环中可以使用 break 或 continue 打断

    • continue：跳过当前循环
    • break：打断循环
    js
    // 第一种写法
for (var i = 0; i < 10; i++) {}

// 第二种写法
var j = 0
for (; j < 10; ) {
  j++
}
    // 第一种写法
for (var i = 0; i < 10; i++) {}

// 第二种写法
var j = 0
for (; j < 10; ) {
  j++
}

  • for 循环括号的三个条件都是可选的，如果都不填写，则会是无限循环

    js
    for (;;) {
  /*无限循环语句*/
}

//只给控制表达式，相当于while循环
for (; i < 10; ) {
  /**/
}
    for (;;) {
  /*无限循环语句*/
}

//只给控制表达式，相当于while循环
for (; i < 10; ) {
  /**/
}

  • for 循环存在极大的灵活性，因此它是最常用的一个循环语句

    • 例子 1：100 个偶数相加

      js
      var sum = 0
for (var i = 0; i <= 100; i++) {
  if (i % 2 == 0) {
    //奇数相加则
    sum += i
  }
}
      var sum = 0
for (var i = 0; i <= 100; i++) {
  if (i % 2 == 0) {
    //奇数相加则
    sum += i
  }
}

    • 例子 2：循环添加 div，并设置不同的样式

      js
      var arr = ['red', 'yellow', 'blue', 'pink', 'green', 'skyblue']
var sum = '' // 由于循环里面的条件每次都会走,因此需要在外面声明sum;
for (var i = 0; i < 6; i++) {
  sum += "<li style='background:" + arr[i] + "'>" + arr[i] + '</li>'
}
      var arr = ['red', 'yellow', 'blue', 'pink', 'green', 'skyblue']
var sum = '' // 由于循环里面的条件每次都会走,因此需要在外面声明sum;
for (var i = 0; i < 6; i++) {
  sum += "<li style='background:" + arr[i] + "'>" + arr[i] + '</li>'
}

  • 双层 for 循环

    • 外层的循环和内层的循环变量名不要重复
    • 外层 for 循环 1 次，里面循环完
    • 第一层循环行数，第二层循环列数

    例子：99 乘法表

    js
    for (var i = 1; i <= 9; i++) {
  //循环行数
  for (var j = 1; j <= i; j++) {
    //循环列数
    document.write(j + 'X' + i + '=' + j * i + '&nbsp;')
  }
  document.write('')
}
    for (var i = 1; i <= 9; i++) {
  //循环行数
  for (var j = 1; j <= i; j++) {
    //循环列数
    document.write(j + 'X' + i + '=' + j * i + '&nbsp;')
  }
  document.write('')
}

  • for 循环调试

    • 使用控制台查看 for 循环的执行变化
    • 在浏览器按 f12，打开 Sources，点击需要断点的行数，在右侧 watch 添加需要监听的变量名称，实时查看
    • 之后按 f5 刷新，按向下的，图中小圆圈部分，即可以向下执行后面的顺序；

image-20240704141737104

f5：跳入方法 f6：向下逐行执行 f7：跳出方法 f8：直接跳转到下一个断点

项目调试一般直接 f8，单步就 f6

for...in.. 循环 ​

  • 语法：for(var i in 对象){ 循环体 }; 主要是用来循环对象的，因为对象没有长度，没有顺序，所以不能使用 for 循环；
js
var obj={name:"张三",age:18,city:"北京"}；
for(var i in str){
    console.log(i,obj[i])    //取键名和键值；
}
var obj={name:"张三",age:18,city:"北京"}；
for(var i in str){
    console.log(i,obj[i])    //取键名和键值；
}

  • 循环对象时：变量 i 表示键名，obj[i]表示键值；

  • 在循环时，取字符串需要 obj[i]中括号，不能使用点的形式；

  • 循环数组的时候，变量 i 表示下标，arr[i]表示数据。

label ​

  • 使用 label 语句可以在代码中添加标签，可以在 break 或 continue 语句引用。加标签的语句一般都要与 for 语句等循环语句配合使用
  • 使用示例：
js
start: for (var i = 0; i < 10; i++) {}
start: for (var i = 0; i < 10; i++) {}
  • 双层 for 循环语句示例
js
var num = 0
// 使用label标签的for语句
start: for (var i = 0; i < 10; i++) {
  console.log(i) // 输出0-5
  for (var j = 0; j < 10; j++) {
    if (i === 5 && j === 5) break start
    num++
  }
}
console.log(num) //55

// 没有使用label标签的for语句
for (var i = 0; i < 10; i++) {
  console.log(i) //输出0-9,
  for (var j = 0; j < 10; j++) {
    if (i === 5 && j === 5) break //当前break只是打断第二层的循环;
    num++
  }
}
console.log(num) // 95
var num = 0
// 使用label标签的for语句
start: for (var i = 0; i < 10; i++) {
  console.log(i) // 输出0-5
  for (var j = 0; j < 10; j++) {
    if (i === 5 && j === 5) break start
    num++
  }
}
console.log(num) //55

// 没有使用label标签的for语句
for (var i = 0; i < 10; i++) {
  console.log(i) //输出0-9,
  for (var j = 0; j < 10; j++) {
    if (i === 5 && j === 5) break //当前break只是打断第二层的循环;
    num++
  }
}
console.log(num) // 95

switch ​

js
switch (变量) {
  case 情况1:
    逻辑
    break
  case 情况2:
    逻辑
    break
  default:
    逻辑
}
switch (变量) {
  case 情况1:
    逻辑
    break
  case 情况2:
    逻辑
    break
  default:
    逻辑
}

判断变量可能有的情况,并执行对应的代码, 当执行成功之后则 break 打断;

  • 当 case 语句表达式时，switch 括号中填写 true 或 false，因为每个 case 值都可以返回一个布尔值，每个 case 按照顺序被求值，直到找到匹配的值或者遇到 default 语句为止；
js
var num = 25;
switch(true){
    case num<0:
        alert('小于0'); break;
    case num >=0 && num <= 10 :
        alert(''); break;
    ...
    default:
        alert()
}
// 因为case的值都会返回一个布尔值;
var num = 25;
switch(true){
    case num<0:
        alert('小于0'); break;
    case num >=0 && num <= 10 :
        alert(''); break;
    ...
    default:
        alert()
}
// 因为case的值都会返回一个布尔值;

  • switch 语句在比较值时使用的是全等操作符，因此不会发生类型转换，例如"10"，不等于 10；

  • break 关键字会跳出当前语句，省略 break 关键字会导致执行完 case 语句，继续执行下一个 case 语句，。

  • default 关键字相当于 else 语句，所有条件不满足则执行；

  • switch 中的语句也可以是多条语句；

  • Switch 技巧 switch 条件过多，可以使用对象字面量代替 switch，将所有的 switch 可能得变量作为键值，内容为键名

image-20240704141601000

  • switch 中 case 过多时，
js
switch(){
    case 1 : ... ; break;
    case 2 :
    // 合并两种情况, 建议带上注释
    case 3 : ... ; break;
}
// 因为没有break条件, 所以会往下走;
switch(){
    case 1 : ... ; break;
    case 2 :
    // 合并两种情况, 建议带上注释
    case 3 : ... ; break;
}
// 因为没有break条件, 所以会往下走;

三目运算符（三元表达式） ​

  • 条件 ? 语句 1 : 语句 2；

  • 和 if(){}else{}用法相同，适用于只有一条语句的时候

  • 使用 && 直接作为条件判断语句

js
obj.list && obj.list.map()
obj.list && obj.list.map()

总结 ​

流程控制：代码的执行的过程

  1. 顺序结构：代码的执行顺序，从上到下，从左到右（不严谨）；

  2. 判断语句：if，if-else，if-else if，switch-case，三目运算符（三元表达式）；

  3. 循环语句：while 循环，do-while，for 循环，for-in 循环；

总结分支：如果只有一个分支，就用 if；

如果有两个分支，就用 if-else；

如果多个分支，一般是范围的，推荐使用 if-else if；

如果多个分支，一般是具体的值，推荐使用 switch-case；

总结循环：

while：先判断后循环，有可能一次循环都不执行；

do-while：至少执行一次循环体再判断；

for 循环：知道了循环的次数，推荐使用 for 循环；

调试：是为了找代码的错误和问题所在，才在调试的

断点：不加断点，就不方便调试，

Copyright © 2024-present xiaocao