首页 > 编程语言> 文章详细

JavaScript-流程控制

2021-03-13 21:33:44 阅读：145 来源： 互联网

标签：控制元素流程 JavaScript 代码段获取 while 循环条件

任何一门编程语言都存在流程控制，流程控制不是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 动态获取

标签：控制,元素,流程,JavaScript,代码段,获取,while,循环,条件
来源： https://www.cnblogs.com/mzxj/p/14530463.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript-流程控制

1.选择结构 - if

2.选择结构 - switch

3.循环结构

3.1 for

3.2 断点调试

3.3 死循环

2.for-in循环

3.while 和 do-while

4.其它结构

5.获取元素的方式

5.1 通过id获取

5.2 通过className获取

5.3 通过tagName

基本语法

操作元素

5.4 静态获取和动态获取