JavaScript-流程控制

任何一门编程语言都存在流程控制，流程控制不是js独有的，可以分为以下几种：

• 顺序结构 ：默认代码从上到下执行的
• 选择结构：if switch
• 循环结构：for for-in while 及 do-while
• 其它结构：break continue

1.选择结构 - if

if判断可以判断js中所有的情况

基本语法

单条件

//省略else
if(条件){
    条件成立执行的代码段
}


//如果条件成立执行的代码段只有一行；可以省略{}
if(条件)条件成立执行的代码段;

//不省略else
if(条件){
    条件成立执行的代码段
}else{
    条件不成立执行的代码段
}

多条件

//省略else
if(条件){
    条件成立执行的代码段
}else if(条件){
    条件成立执行的代码段   
}...

//不省略else
if(条件){
    条件成立执行的代码段
}else if(条件){
    条件成立执行的代码段   
}...else{
    以上条件不成立执行的代码段
}

2.选择结构 - switch

? 经常用于值的比较(只能进行===的比较)

基本语法

switch(表达式){
    case 值1:
    	代码块;
    break;
    case 值2:
    	代码块;
    break;
    case 值3:
    	代码块;
    break;
    ...
    default:
    	代码块;
    break;
}

//可省略default，可省略case里的中括号

注意：

• switch中值的比较属于绝对比较，不同数据类型一定不相等
• case穿透：不仅当前case对应的情况执行，会把以下所有情况都执行
• 解决case穿透：在代码段末尾加break;
  • break在这里的含义结束(整个switch就结束了); 并且break之后的代码就不会执

3.循环结构

作用：让特定的代码执行指定的次数

3.1 for

基本语法

for(循环初始化;循环判断;循环迭代){
    循环体;//要重复执行的代码
}

? for循环的四步曲：

? 1.设置初始值

? 2.循环条件 （循环条件一旦不成立，整个循环就结束了）

? 3.执行循环体

? 4.循环迭代

3.2 断点调试

? 1.F12 ,鼠标右键检查

? 2.Sources -> 要调试的资源文件 ->打开

? 3.调试哪一行就在哪一行点击一下

? 4.刷新 ->让代码重新执行 一旦遇到断点就不往下执行 我们可以手动执行

? 5.取消断点 ->再次点击当前行

3.3 死循环

循环条件恒成立 ，循环永远不退出。

2.for-in循环

一般用来迭代/遍历对象

for(var key in obj){  
    //key :属性/下标
    //obj :迭代对象
}
//遍历对象时获取属性,遍历数组时获取下标,遍历集合时会遍历出不需要的东西(用for比较好)
//用.获取的是变量要改用[]

3.while 和 do-while

//while
var 变量名 = 初始值;(设置初始值)
while(循环条件){//条件不满足退出循环
    循环体;
    循环增量
}


//do-while
var 变量名 = 初始值;(设置初始值)
do{
	循环体;
    循环增量  	 
}while(循环条件);

? 区别：

? while循环条件不成立一次都不会执行

? do-while不管循环条件成立与否至少执行一次

4.其它结构

? 都是用来终止循环操作的（所有循环都适用）

• continue 跳出当前循环,然后进入到下一轮循环
• break 结束循环

5.获取元素的方式

限定获取范围必须是具体的元素对象，操作元素也必须是具体的元素对象

5.1 通过id获取

基本语法

• document.getElementById("id值");
  • 返回值： 元素对象/null

5.2 通过className获取

基本语法

• context.getElemntsByClassName("className值");
  • context 在这里表示获取范围，可以是document,也可以自己去限定，context必须是具体的元素对象
  • 获取到了就是一个类数组集合，获取不到就是空集合
  • 数组集合：天生自带length属性，由索引和值组成

类数组的属性

• length 长度,集合中元素的个数

操作元素

• 获取元素集合中具体的元素
  • 元素集合[索引]

5.3 通过tagName

基本语法

• context.getElemntsByTagName("tagName值");

  • context 在这里表示获取范围，可以是document,也可以自己去限定，context必须是具体的元素对象
  • 获取到了就是一个类数组集合，获取不到就是空集合
  • 数组集合：天生自带length属性，由索引和值组成

• length 长度,集合中元素的个数

操作元素

• 获取元素集合中具体的元素
  • 元素集合[索引]；

5.4 静态获取和动态获取

• 静态获取：原来有就有，原来没有就没有，动态增加是获取不到的
  • id是静态获取
• 动态获取：原来有就有，原来没有就没有,动态增加是可以获取到的
  • className动态获取
  • tagName 动态获取

原文：https://www.cnblogs.com/mzxj/p/14530463.html