首页 / JAVASCRIPT / JavaScript-流程控制

JavaScript-流程控制

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript-流程控制，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3223字，纯文字阅读大概需要5分钟。

内容图文

任何一门编程语言都存在流程控制，流程控制不是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-流程控制全部内容，希望文章能够帮你解决JavaScript-流程控制所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/598703.html

来源：【匿名】