js之语句(条件语句，循环语句，跳转语句)
一、条件语句
1、if语句
条件语句是通过判断指定表达式的值来决定执行还是跳过某些语句，这些语句是代码的“决策点”有时称之为“分支”。
if语句是一种基本的控制语句，它让Javascript程序可以选择执行路径，更准备的说，就是有条件的执行语句。
if语句的条件必须放在if后面的圆括号内，条件的求值结果永远是一个布尔值它是必须的。花括号中的语句不管是有多少条，只有在条件为true时才会执行。花括号不为必须，如果花括号内只有一条语句，可以省略，但为了提高代码的可读性，所以不建议省略。
a. if语句：它是最简单的条件语句；
b. if...else语句：
if语句的第二种形式引入了else从句，当expression的值是false时，执行statement2；
当在if/else语句中嵌套使用if语句时，要注意确保else语句匹配正确的if语句。javascript中if/else的匹配规则是：else总是和就近的if语句进行匹配
c. else...if语句：
当代码有多条分支的时候用到这个语句，它并不是真正的javascript语句，它是多条if...else...语句连在一起时的一种写法
<script>
//1、如果 只有一种情况要处理
if (expression) {
statement;
} //2、否则 有两种情况要处理
if (expression) {
statement1;
} else {
statement2;
} //3、否则如果 有多种情况要处理
if (expression) {
statement1;
} else if (expression2) {
statement2;
} else if (expression3) {
statement3;
} else {
statement4;
} //4、和上面的3同等
if (expression) {
statement1
} else {
if (expression2) {
statement2;
} else {
if (expression3) {
statement3;
} else {
statement4;
}
}
} </script>
例子：点击按钮时让div在显示于隐藏之间来回切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {height: 200px;width: 200px;background-color: red; display: -none;}
</style>
</head>
<body>
<input type="button" id="btn" value="按钮">
<div id="box"></div>
<script>
var btn = document.getElementById('btn');
var box = document.getElementById('box');
// style它操作的是行间样式
var on = 'block';
btn.onclick = function () {
if (on == 'none') {
box.style.display = 'block';
on = 'block';
} else {
box.style.display = 'none';
on = 'none';
}
}
</script>
</body>
</html>
案例：点击按钮，让图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
window.onload=function(){
var prev=document.getElementById('prev');
var next=document.getElementById('next');
var pic=document.getElementById('pic');
var imgArr=['A','B','C','D'];
var n=0;
next.onclick=function(){
n++;
if(n>imgArr.length-1){ //数组的length属性
n=0;
}
// 字符串的拼接
pic.src="data:images/"+imgArr[n]+".jpg";
} prev.onclick=function(){
n--;
if(n<0){
n=imgArr.length-1;
}
pic.src="data:images/"+imgArr[n]+".jpg";
}
}
</script>
<input type="button" id="prev" value="上一张">
<input type="button" id="next" value="下一张">
<img src="data:images/A.jpg" id='pic' style="display: block;">
</body>
</html>
2、switch语句
当所有的分支都依赖于同一个表达式的值时，可以用到switch语句。
switch语句执行一个多路分支，首先计算expression的值，然后进行查找case子句的表达式是否和expression的值相同。如找到匹配的cse，那么将执行这个case相对应的代码块，如果找不到匹配的case，那它将会执行default标签中的代码块，如果没有default标签，switch语句将跳过它的所有代码块。
每一个case语句块的结尾要使用关键字break或者是return,不然switch语句就会从与expression的值相匹配的case标签处的代码块开始执行，依次执行后续的语句，一直到整个switch代码块结束。（不会跳出switch语句）
在switch语句中使用任何数据类型，且每个case的值不一定是常量，可以是变量或表达式。
在使用switch语句中，要注意以下向点：
a.由于每次执行switch语句时，并不是所有的case表达式都能够执行到，所以要避免使用带有副作用的case表达式，最安全的做法是在case表达式中使用常量表达式。
b.default标签一般出现在末尾（特殊情况也可以在switch语句中的任何位置）
c.switch语句中，对每个case的匹配操作实际上是“===”恒等运算符比较而不是“==”相等运算符比较，因此表达式和case的匹配不会做任何类型转换
<script>
switch (expression) {
case value1:
//当expression与value1相同时，才会走这里的代码
statement1;
//停止以下代码继续执行
break;
case value2:
//当expression与value2相同时，才会走这里的代码
statement2;
//停止以下代码继续执行
break;
case value3:
//当expression与value3相同时，才会走这里的代码
statement3;
//停止以下代码继续执行
break;
default: statement4;
}
</script>
二、循环语句
javascript有4种循环语句：while、do...while、for、for...in.只要给定条件仍能得到满足，包含在循环语句里的代码就将重复地执行下去。一旦给定条件的求值结果不再是true，循环也就到此为止。其中最常用的循环就是对数组元素的遍历.
1、while语句
while语句属于前测试循环语句，在循环体内的代码被执行之前，就会对条件进行判断。
当表达式expression为true时则循环执行statement，直到expression的值为false为止；如果是false，那么程序将跳过循环。
注意：当while条件不具备停止条件的时候，一定要在循环体内给一个条件变化，否则就是一个死循环
while和for的区别：while循环是一个条件循环，它一般用在有嵌套的元素或者是有嵌套的数据。要做循环的时候首先考虑的是for，如果for做不出来那就用while。
<script>
/*while (expression) {
statement;
} var n = 0;
while (n <= 10) {
console.log(n);
n++;
}*/ window.onload = function () {
var box = document.getElementById('box');
while (box.children.length != ) {
box = box.children[];
}
console.log(box)
}
</script>
<div id="box">
<ul>
<li>
<p>
<a href="#">测试文字</a>
</p>
</li>
</ul>
</div>
2、do...while循环
do while语句是后测试循环，条件在执行循环内部的代码之后计算。这意味着在计算表达式之前，至少会执行循环主体一次。
do...while循环和普通的while循环有以下的不同
a.do...while循环要求必须使用关键字do来标识循环的开始，用while来标识循环的结尾并进入判断
b.do...while循环用分号结尾
<script>
function printArray(a) {
var len = a.length, i = 0;
if (len == 0) {
console.log('empty');
} else {
do {
console.log(a[i]);
} while (++i < len);
}
}
</script>
3、for语句
for语句提供一个比while语句更加方便的循环控制结构，用for循环来重复执行一些代码的好处是循环结构更加清晰。
大部分的for都具有特定的计数器变量，计算器的三个关键操作是：条件初始化，条件判断，条件变化。for语句将这三步明确为循环语法的一部分，各自使用一个表达式来表示。
在for循环的变量初始化表达式中，也可 以不使用var关键字，变量的初始化可以在外部执行
由于ECMAScript中不存在块级作用域，因此在循环内部定义的变量也可以在外部访问到。
for循环常见用途是对某个数组里的全部元素进行遍历处理。如果循环中的一次迭代会改变多个变量，需要用逗号运算符，它将初始化表达式和自增表达式合并入一个表达式中以用于for循环。
for嵌套：有嵌套的循环，如果里面的循环没有走完，外面的循环步骤是不会走的。需要注意的是：里面的变量不要与外面的变量相同，如果相同的话，里面的变量会把外面的变量给覆盖掉。
示例：点击某个li，让点击的那个li背景变成红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- for(条件初始化；条件判断，条件变化){
当条件判断成立的时候，会重复执行这里的代码
}
步骤：
1、条件初始化
2、条件判断
3、当条件成立的时候，走花括号里的代码
4、条件变化
从第二次开始，就不走1了，重复2，3，4 -->
<script>
window.onload = function () {
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
//在循环的时候，给每个元素都添加了点击事件，想要在点击事件里找到点击的那个对象，不能用i的值作为下标去取，要用this，this就是点击的那个对象
this.style.background = 'red';
}
}
}
</script>
<li>pink</li>
<li>green</li>
<li>yellow</li>
<li>white</li>
<li>blue</li>
</body>
</html>
示例：选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html&css部分</title>
<style>
div {
width: 200px; height: 200px;border: 1px dotted #f00;display: none;}
</style>
</head>
<body>
<input type="button" value="选项一" style="background:red;" />
<input type="button" value="选项二" />
<input type="button" value="选项三" />
<div style="display:block;">内容一</div>
<div>内容二</div>
<div>内容三</div>
</body>
</html>
javascript部分（方法一）
<script>
// 需求：点击按钮显示对应的div,让其它的按钮背景颜色去掉，让其它的div隐藏
window.onload = function () {
var inputs = document.querySelectorAll('input');
var divs = document.querySelectorAll('div');
for (var i = 0; i < inputs.length; i++) {
inputs[i].index = i;
inputs[i].onclick = function () {
//点击的时候把背景颜色清空，所有的div隐藏，
//因为操作的是一组元素所以有for循环
for (var i = 0; i < inputs.length; i++) {
inputs[i].style.background = '';
divs[i].style.display = 'none';
}
//给当前的按钮添加背景颜色，让对应的div显示
this.style.background = 'red';
divs[this.index].style.display = 'block';
}
}
}
</script>
javascript部分（方法二）
<script>
// 关键点:如何找到上一个点击的input
window.onload = function () {
var inputs = document.querySelectorAll('input');
var divs = document.querySelectorAll('div');
var last = inputs[0];//这个变量存的是上一次点击的对象，一上来默认为第0个
for (var i = 0; i < inputs.length; i++) {
inputs[i].index = i;//给每个按钮添加一个自定义属性，存的是它们对应的索引值
inputs[i].onclick = function () {
//把上一次点击对象的背景颜色去掉
last.style.background = '';
//把上一个对应的div让它隐藏
divs[last.index].style.display = 'none';
//给当前点击的那个按钮添加背景颜色
this.style.background = 'red';
//让当前点击的按钮对应的div让它显示
divs[this.index].style.display = 'block';
last = this;//把上一次点击的对象更新成当前点击的对象
}
}
}
</script>
4、for...in语句
for...in语句也使用了for关键字，但它和for完全不一样。它可以用来更方便的遍历对象属性成员。
variable 通常是一个变量名，也可以是一个可以产生左值的表达式或者是一个通过var语句声明的变量，总之必须是一个适用于赋值表达式左侧的值。object是一个表达式，这个表达式的计算结果是一个对象，同样，statement是一个语句或者是语句块，它是循环的主体。
需要注意的是，只要for...in循环中的vaiable的值可以当做赋值表达式的左值，它可以是任意的表达式，每次循环都会计算这个表达式，也就是说每次循环它计算的值有可能不同。
其它for...in循环不会遍历对象的所有属性，只有可枚举的属性才会遍历到。
<script>
/*for(var 变量名 in 对象){
变量名 对象城的属性名（key）
对象[属性名] 属性名对应的值
}
/要取到一个对象里的所有数据，用到for...in更加的快速方便
for (variable in object) {
statement;*/ var person = {
name: '老王',
age: ,
height: '180cm',
weight: '60kg'
}
for (var attr in person) {
console.log(attr, person[attr]);
}
</script>
三、跳转语句
跳转语句要以让解释器跳转到程序的其它部分继续执行。分别为：break,return,continue.
1、break语句
单独break语句的作用是退出最内层的循环，停止循环下面的循环就不会走了，break后面的代码是不会执行的。它只有出现在循环语句或者是switch语句中才算是合法，出现在其他的语句中会报错。
注意：break它的控制权都无法越过函数的边界。只能在函数内部使用。
<script>
{
for (var i = 0; i < 5; i++) {
if (i == 3) {
break;
// continue;
}
console.log(i);
}
}
</script>
3、return
函数中的return语句就是指定函数调用后的返回值。让函数停止执行，它只能用在函数内。不然会报错。当执行到return语句时，函数终止执行，并返回expression的值给调用程序。
如果没有return语句，则函数调用仅仅依次执行函数体内的每一条语句直到函数结束，最后返回调用程序。这种情况下，调用表达式的结果是undefined。return语句经常作为函数内的最后一条语句出现，但并不是说一定要放在函数最后，即使在执行return语句的时候还有很多后续代码没有执行到，这时函数也还是会返回调用程序。
<script>
function square(x) {
return x * x
};
square(2);
</script>
4、continue
停止循环，停止的是当次的循环，后面的循环还是会继续的。
当执行到continue语句时，当前的循环逻辑就终止了，随即执行下一次循环。但在不同类型的循环中，continue行为也有所不同：
a.while循环中，循环开始处指定的expression会重复检测，如果检测结果为true，则循环体会从头开始执行
b.do while循环中，程序执行直接跳到循环结尾处，这时会重新判断循环条件，之后才会继续下一次循环
c.for循环中，首先计算自增表达式，然后再次检测test表达式，用以判断是否执行循环体
d.在for/in循环中，循环开始遍历下一个属性名，这个属性名赋给了指定的变量.
js之语句(条件语句，循环语句，跳转语句)的更多相关文章
- 房上的猫：for循环，跳转语句与循环结构，跳转语句进阶
一.for循环 1.定义: for循环语句的主要作用是反复执行一段代码,直到满足一定条件为止 2.组成部分: (1)初始部分:设置循环的初始状态 (2)循环体:重复执行的代码 (3)迭代部分: ...
- javascript语句——条件语句、循环语句和跳转语句
× 目录 [1]条件语句 [2]循环语句 [3]跳转语句 前面的话 默认情况下,javascript解释器依照语句的编写顺序依次执行.而javascript中的很多语句可以改变语句的默认执行顺序.本文 ...
- JavaScript基础&实战（3）js中的流程控制语句、条件分支语句、for循环、while循环
文章目录 1.流程控制语句 1.1 代码 1.2 测试结果 2.弹窗提示输入内容 2.1 代码 2.2 测试结果 3.条件分支语句 3.1 代码 3.2 测试结果 4.while和 do...whil ...
- 04-01 Java switch、for、while、do while语句，循环嵌套，跳转语句break、continue、return
语句 1:switch语句(掌握) (1)格式: switch(表达式) { case 值1: 语句体1; break; case 值2: 语句体2; break; ... default: 语句体n ...
- Python基础（6）--条件、循环
本文的主要内容是 Python 的条件和循环语句以及与它们相关的部分. 我们会深入探讨if, while, for以及与他们相搭配的else,elif,break,continue和pass语句. 本 ...
- python语法学习第二天--条件与循环
条件:(一条或多条为true或false的语句.任何非0和非空(null)值为true,0 或者 null为false)若为true执行If下的语句,若为false执行else中的语句 分支: ① i ...
- 第二部分 条件控制执行语句、循环语句、switch语句、跳转语句和其它语句
条件控制执行语句: if语句 if....else....语句 循环语句: while语句 do....while语句 for语句 switch语句: 跳转语句: break; continue; r ...
- js基础（条件语句 循环语句）
条件语句 if语句块的语法形式如下: //只有两种情况下if(条件){要执行的语句块;}else{要执行的语句块;} //多种情况下if(条件){要执行的语句块;}else if(条件){要执行的语句 ...
- python之最强王者（3）——变量，条件、循环语句
1.Python 变量类型 变量存储在内存中的值.这就意味着在创建变量时会在内存中开辟一个空间. 基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中. 因此,变量可以指定不同的 ...
随机推荐
- git-本机内容git至github
1.修改仓库的名字 github中右上角/settings/Account: 修改后显示的变化: 2.本地和github账号创建联系 (base) localhost:~ ligaijiang$ ss ...
- LC 670. Maximum Swap
Given a non-negative integer, you could swap two digits at most once to get the maximum valued numbe ...
- React Native中Navigator的安装与使用
一.安装Navigator 1.安装react-native-deprecated-custom-components npm install react-native-deprecated-cust ...
- 06 MySQL之索引
01-索引 1.索引是对数据库表中一列或多列的值进行排序的一种数据结构,使用索引可提高数据库中特定数据的查询速度. 2.索引是一个单独的.存储在磁盘上的数据库结构,包含对数据表里所有记录的引用指针. ...
- Linux命令集锦：ansible命令
ansible 命令主要用于批量管理,来实现自动化管理.常用批量操作包括:主机分组管理.实时批量执行命令或脚本.实时批量分发文件或目录.定时同步文件等. 一.安装 ansible yum instal ...
- 第九组 通信3班 063 自反ACL
一.拓扑图 R4为外网,R2和R3为内网. 二.地址表 Device Interface IP address R1 F 0/0 10.1.63.1 F 0/1 14.1.63.1 R2 F 0/0 ...
- MBProgressHUD长时间加载无法取消的解决方法
使用MBProgressHUD时,加载网路数据,或者等待webview加载完毕,长时间的等待导致体验不佳,这时候希望点击屏幕取消加载动画效果: // MBProgressHUD.h @protocol ...
- Java学习笔记-GUI
Java也提供图像化编程 图形化 GUI(图形用户界面) GUI Graphical User Interface(图形用户接口) 用图形的方式,来显示计算机操作的界面,这样更方便更直观 CLI Co ...
- Linux-android 模拟器使用
1.把sdcard挂载到一个文件夹 mkdir sdcard sudo mount -o loop sdcard.img sdcard 日志在sdcard下lm-kill文件下查看 注解: http: ...
- 【Python】【demo实验11】【练习实例】【三个整数的立方和】
目的:找到 除了9n±4型自然数外,所有100以内的自然数都能写成三个整数的立方和 这每个数的表达方式: 源代码: #!/usr/bin/python # encoding=utf-8 # -* ...