二十、js流程控制语句

js流程控制语句

流程控制语句分类

1.顺序结构流程控制语句：js代码 按照从上到下的顺序 执行

2.选择结构流程控制语句

​ if类

1.if流程控制语句  做判断
语法 : if(判断条件){ 条件成立执行的代码 }
简写形式 : if(判断条件) 条件成立执行的代码  if只能控制其后的第一句代码
2.if-else   做判断
语法 : if(判断条件){ 条件成立执行的代码 } else{ 条件不成立执行的代码 }
3.if-else 的嵌套  如果我们需要同时满足多个条件  这时就需要使用if的嵌套
一般我们不推荐使用  因为性能不好  我们可以使用与运算来替代
4.if-else 多分支语句  当需要进行多种情况的判断时 需要使用多分支语句
语法 : if(判断条件1){ 条件成立执行的代码 }
	  else if(判断条件2){ 条件1不成立但条件2成立执行的代码 }
	  ......
      else{ 前面所有条件都不成立执行的代码 }
由于性能不好，因此我们并不建议使用if-else多分支语句

​ switch类

语法 : switch(匹配常量){ 
	    case 匹配项1 ：匹配成功执行的代码；break； 	
        case 匹配项2 ：匹配成功执行的代码；break；
        case 匹配项3 ：匹配成功执行的代码；break；
        ....
        default：前面所有匹配项都匹配失败 执行的代码;
	  }
工作原理：使用 匹配常量 和每一个匹配项 依次进行比较  如果和某一个匹配项全等  就匹配成功 执行后面的		 代码

3.循环结构流程控制语句

for类

for 循环
语法 : for(初始化循环变量; 循环条件; 更新循环变量){ 循环执行的代码 }
循环执行的效果：如果满足循环条件 就循环执行{}中的代码  直到不满足循环条件为止

浏览器断点调试
1.打开开发者工具 选择Sources
2.在源代码中 插入 断点 
3.选择并添加  需要检测的数据
4.在加好断点 并添加完监听数据 之后 刷新页面
5.在使用完断点调试之后 要清除断点

//for循环代码执行过程
        //1.初始化循环变量 var i=0 1 2 3 4 5;
        //2.判断循环条件 i<5 如果成立 就往下走 如果不成立就结束循环
        //3.执行循环体代码 打印0 1 2 3 4
        //4.更新循环变量 i++ 
        //5.回到第2步继续执行

获取元素的新方法
1.getElementsByTagName  通过标签名 获取元素
用法：document.getElementsByTagName("标签名")
本方法 获取到的结果 是所有满足条件的元素集合（也称为 伪数组） 特性和数组一样
length属性表示包含的元素个数
也可以通过下标获取对应的元素  元素集合[下标] 

2.getElementsByClassName  通过类名 获取元素
用法：document.getElementsByClassName("类名")
得到的也是一个元素集合（伪数组）

getElementsByTagName、getElementsByClassName和getElementById 的区别
1.前两者 获取到的都是 伪数组  而后者获取到的是 元素
2.获取范围不同  byId 只能使用 document 作为范围
			  byTagName和byClassName则可以使用  document和父元素作为范围

              
for-in 循环
作用 : for-in 循环 是专门用来循环对象的
语法 : for(var 属性名变量 in 要循环的对象){ 循环体代码 }
解释 : 属性名变量 在for-in循环中  就表示  对象中的属性名
执行逻辑 : for-in 循环 是一种自动循环  对象有多少属性  for-in 就寻循环多少次  每循环一次 就执行一		  次循环体代码
获取属性值 : 对象.属性名
注意：在 for-in  循环中 不能使用 对象.属性名变量 的形式 获取属性值 因为.的形式要求后面的属性名必须切实存在   在 for-in 中我们需要使用  对象[属性名变量] 来获取属性值