循环语句

while
a. 用法

while(条件表达式){
  循环执行代码段
}

b. 流程（判断条件表达式的值，当值为true时循环执行代码段，当值为false时退出循环体）
c. 特性（先检查条件，再执行循环，条件不满足则循环一次也不执行）
d. 时机（一个动作被重复执行到满足某个条件时）

let oInp = document.querySelector('#inpValue')
let oUl = document.querySelector('ul')
let count = 0;
oInp.addEventListener('input', function() {
  count = this.value;
  while (count > 0) {
      let oLi = document.createElement('li')
      oUl.appendChild(oLi)
      count--;
  }
})

do-while
a. 用法

do{
  循环执行的代码段
}
while（条件表达式）

b. 流程（先执行循环体内代码段再进行判断，如果表达式的值为true，则重复执行代码段，如果表达式的值为false，则退出循环体）
c. 特性（先执行循环体，在进行条件判断，循环体内代码至少执行一次）
d. 时机希望一个动作至少被执行一次时

let oInp = document.querySelector('#inpValue')
let oUl = document.querySelector('ul')
let count = 0;
oInp.addEventListener('input', function() {
  count = this.value;
  do {
      let oLi = document.createElement('li')
      oUl.appendChild(oLi)
      count--;
  } while (count < 0);
})

for
a.用法

for（循环变量=初始值； 循环条件； 递增/递减计数器）{
  循环代码段
}

b. 流程（用循环变量初始值与循环条件相比较，确定返回值，如果返回值为true则执行循环体，执行完一次后进行递增或递减运算，将运算结果与循环条件相比较，如果返回值为true则继续，如果返回false 则退除循环体）
c. 时机重复一个动作到一定次数时

let oInp = document.querySelector('#inpValue')
let oUl = document.querySelector('ul')
let count = 0;
oInp.addEventListener('input', function() {
  count = this.value;
  for(let i=0; i<count; i++){
      setTimeout(function(){
          let oli = document.createElement('li')
          oUl.appendChild(oli) 
      },330*i );
  }
})

for...in
a. 用法

for（声明变量  in 对象）{
  代码段
}

b. 作用枚举对象的属性
c. 注意事项循环输出的属性顺序不可预测，对象的值不能是null或者 undefined

let obj = {
    chargeStandard: "38元/人",
    chargeStandardRemark: "儿童1.2米以下免费",
    drawingMapUrl: "/uploadFile/image/scenicSpot/123a94ec38ea4f10b8c588288d0cb674.jpg",
    drawingName: "2.jpg",
    endTime: "18:30",
    id: "SEVxSjFzZ2FQd2pPN2pVQ3JmRzRqdz09"
}
for(let key in obj){
    let p = document.createElement('p')
    p.innerHTML = `${key}: ${obj[key]}`
    oWrapper.appendChild(p)
}

跳转语句

return 终止函数体的运行，并返回一个值
break 终止整个循环，不再进行判断

let oInp = document.querySelector('#inpValue')
let oUl = document.querySelector('ul');
let oLis = document.querySelectorAll('li')
let count = 0;
oInp.addEventListener('input', function() {
  count = this.value;
  for(let i=0; i<count; i++){
      if(i === 3) {
          break;
      }else {
          setTimeout(function(){
              oLis[i].style.background = 'orange'
          },330*i );
      }
  }
})

continue 结束本次循环，接着去判断是否执行下次循环

let oInp = document.querySelector('#inpValue')
let oUl = document.querySelector('ul');
let oLis = document.querySelectorAll('li')
let count = 0;
oInp.addEventListener('input', function() {
  count = this.value;
  for(let i=0; i<count; i++){
      if(i % 2 !== 0) {
          continue;
      }else {
          setTimeout(function(){
              oLis[i].style.background = 'orange'
          },330*i );
      }
  }
})

选择语句

if

用法

if（条件表达式1）{
    代码段1
}else if（条件表达式2）{
    代码段2
}else {
    代码段3
}

2.流程（判断条件1，如果返回true则执行代码段1，如果条件1的返回值为false，则跳过语句块1并检
测条件2，如果所有表达式的值均为false则执行else后面的语句）
3.特性（结构复杂，可被嵌套；可测试多个条件表达式；表达式的值具有线性特征；表达式的值是动态的；适用于任意类型的数据；可处理复杂的逻辑关系）

let oInp = document.querySelector('#inpValue')
let oUl = document.querySelector('ul');
let oLis = document.querySelectorAll('li')
let count = 0;
oInp.addEventListener('input', function() {
  count = this.value;
  if(this.value % 2 === 0) {
      changeStyle(2)
  }else if(this.value % 3 === 0){
      changeStyle(3)
  }else {
      changeStyle(4)
  }
})
function changeStyle(num){
    for(let i=0; i<oLis.length; i++) {
        oLis[i].style.background = '#12ccfa'
      if(i % num === 0){
          oLis[i].style.background = 'orange'
      }
    }
}

switch

用法

switch（条件表达式）{
    case 标签1：
    代码段1；
    break；
    ，，，，，
    default：
    代码段n；
}

2.流程（计算表达式的值，并与各标签相比较，若找到与之匹配的标签，则执行其后的代码段，如果有找到与之匹配的标签则直接执行default之后的代码段）
3.格式（case标签为常量，可以是字符串或数字，每个标签均以冒号结束，虽然break与default为可选项，但为了逻辑清晰最好不要省略，case标签的值必须和条件表达式的值完全匹配）
4.特性（结构简介，专为多重选择设计；仅可测试一条条件表达式；表达式的值只有离散性；表达式的值是固定的，不会动态的变化；仅能应用整数，枚举，字符串等类型数据；仅能处理多个枚举类型逻辑关系）

let oInp = document.querySelector('#inpValue')
let oUl = document.querySelector('ul');
let oLis = document.querySelectorAll('li')
let count = 0;
oInp.addEventListener('input', function() {
  count = Number(this.value);
  switch (count) {
      case 1:
          changeStyle(1)
          break;
      case 2:
          changeStyle(2)
          break;
      case 3:
          changeStyle(3)
          break;
      case 4:
          changeStyle(4)
          break;
      default:
          changeStyle(5)
          break;
  }
})
function changeStyle(num){
    for(let i=0; i<oLis.length; i++) {
      oLis[i].style.background = '#12ccfa'
      oLis[num].style.background = 'orange'
    }
}