一、条件语句
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> <head> <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> let btn = document.getElementById('btn'); let box = document.getElementById('box'); // style它操作的是行间样式 let 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> <head> <title>Document</title> </head> <body> <script> window.onload=function(){ let prev=document.getElementById('prev'); let next=document.getElementById('next'); let pic=document.getElementById('pic'); let imgArr=['A','B','C','D']; let n=0; next.onclick=function(){ n++; if(n>imgArr.length-1){ //数组的length属性 n=0; } // 字符串的拼接 pic.src="images/"+imgArr[n]+".jpg"; } prev.onclick=function(){ n--; if(n<0){ n=imgArr.length-1; } pic.src="images/"+imgArr[n]+".jpg"; } } </script> <input type="button" id="prev" value="上一张"> <input type="button" id="next" value="下一张"> <img src="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;
}
let n = 0;
while (n <= 10) {
console.log(n);
n++;
}*/
window.onload = function () {
let box = document.getElementById('box');
while (box.children.length != 0) {
box = box.children[0];
}
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) {
let 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 () {
let lis = document.querySelectorAll('li');
for (let 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 () {
let inputs = document.querySelectorAll('input');
let 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;*/
let person = {
name: '老王',
age: 20,
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>
2、return
函数中的return语句就是指定函数调用后的返回值。让函数停止执行，它只能用在函数内。不然会报错。当执行到return语句时，函数终止执行，并返回expression的值给调用程序。
如果没有return语句，则函数调用仅仅依次执行函数体内的每一条语句直到函数结束，最后返回调用程序。这种情况下，调用表达式的结果是undefined。return语句经常作为函数内的最后一条语句出现，但并不是说一定要放在函数最后，即使在执行return语句的时候还有很多后续代码没有执行到，这时函数也还是会返回调用程序。
<script>
function square(x) {
return x * x
};
square(2);
</script>
3、continue
停止循环，停止的是当次的循环，后面的循环还是会继续的。
当执行到continue语句时，当前的循环逻辑就终止了，随即执行下一次循环。但在不同类型的循环中，continue行为也有所不同：
a.while循环中，循环开始处指定的expression会重复检测，如果检测结果为true，则循环体会从头开始执行
b.do while循环中，程序执行直接跳到循环结尾处，这时会重新判断循环条件，之后才会继续下一次循环
c.for循环中，首先计算自增表达式，然后再次检测test表达式，用以判断是否执行循环体
d.在for/in循环中，循环开始遍历下一个属性名，这个属性名赋给了指定的变量.
