js流程控制语句（2019-06-26）

复习

• 数据类型
  • 基本:简单,栈,操作值
    • string\number\boolean\null\undefined
  • 引用:复杂,堆,操作地址
    • object\array\regExp\function
  • 检测
    • typeof
      • null/object/array/regExp -- object
    • instanceof
      • [] instanceof Array
      • {} instanceof Object
      • /123/ instanceof RegExp
      • function(){} instanceof Function
  • 转换
    • Number()
      • '' -- 0
      • '12.345' --12.345
      • true --1
      • false --0
      • null -- 0
      • [] -- 0
      • [12] --12
      • ['12'] --12
    • isNaN() 是数字false 否数字true
    • parseInt()
    • parseFloat()
    • Boolean() NaN null undefined '' 0
    • toString() [1,2,3] -- '1,2,3' {} -- '[object Object]'
    • String() null/undefined
• 运算符
  • 算术运算符: + - * / % ++ --
    • var a = 0; var b = ++a; //b=a=1
    • var a = 0; var b = a++; //b = 0; a=1
  • 比较运算符
    • > < >= <= == === != !==
  • 赋值运算符
    • = += -= *= /= %=
  • 逻辑运算符
    • && || !
  • 三元运算符
    • 条件 ? 条件成立的语句 : 条件不成立执行的语句

(一) 分支语句

• 流程控制 : 顺序结构,分支结构(选择结构),循环结构

• 1-if语句:

  • if(条件){ 条件成立执行的语句 }
  • if(条件){ 条件成立执行的语句 }else{ 条件不成立执行的语句 }
  • if嵌套

          if(条件1){ 条件1成立执行的语句 }
          else if(条件2){ 条件2成立执行的语句    }
          else if(条件3){  条件2成立执行的语句    }
          ...
          else{ 前面条件都不满足执行的语句   }
  
  

• 2-switch case 语句

      switch(变量或表达式){
          case 值1 : 代码; break;
          case 值2 : 代码; break;
          case 值3 : 代码; break;
          ...
          default:前面的case都没有匹配到,执行的语句;
      }
      
  

(二) 循环语句

• 1-for循环

      for(①初始化循环变量;②循环条件;④累加或递减操作){
          ③循环体:反复运行的代码
      }
      
  

  • for循环执行过程
    • 1- 执行①初始化循环变量
    • 2- 执行②判断是否满足循环条件
      • a-满足:执行③循环体
      • b-不满足:结束循环
    • 3- 执行④:累加或递减
    • 4- 继续执行②判断循环条件

• 2-for循环的使用场景

  • 1)-遍历数组

        var ary = ['张三','李四','王五','赵柳','吴涛'];  //0-4
        for(var i = 0; i < ary.length; i++){
            console.log(ary[i]);
        }
    

  • 2)-批量生成标签

    <div id="box"></div>
    <script>
        var oBox = document.getElementById('box');
        var str = '';
        //循环100次生成100个div
        for(var i = 0; i < 100; i++){
            str += '<div>' + (i+1) + '</div>';
        }
        oBox.innerHTML = str;
    </script>
    
    

(三) 批量获取元素的方法

• 1- 通过标签名获取元素

  context.getElementsByTagName('div');

  • getElementsByTagName方法 可以用document调用,也可以用一个具体的元素调用
  • 获取的结果是一个类数组,就算只有一项也是一个数组 [div,div,div] ,需要取出数组的每一项才能设置样式,操作标签属性...

• 2- 通过类名获取元素

  context.getElementsByClassName('red');

  • getElementsByClassName方法 可以用document调用,也可以用一个具体的元素调用
  • 获取的结果是一个类数组,就算只有一项也是一个数组 [div,div,div] ,需要取出数组的每一项才能设置样式,操作标签属性...

• getElementById()只能通过document对象调用