JavaScript 控制流程

[小ᶻ☡꙳ᵃⁱᵍᶜ꙳]

目录

• ✍ JavaScript 控制流程
• 🌞1 分支结构
• 🎀1.1 if语句
• 🎀1.2 三元运算符
• 🎀1.3 switch语句
• 🌞2 交互与写入：alert、prompt 和 confirm / write
• 🎀2.1 alert
• 🎀2.2 prompt
• 🎀2.3 confirm
• 🎀2.4 document.write
• 🌞3 循环结构
• 🎀3.1 while语句
• 🎀3.2 do...while语句
• 🎀3.3 for语句
• 🎀3.4 continue和break
• 🌞4 调试

✍ JavaScript 控制流程

编程的三种基本结构

顺序结构

从上到下执行的代码就是顺序结构

程序默认就是由上到下顺序执行的

分支结构

根据不同的情况，执行对应代码

循环结构

循环结构：重复做一件事情

🌞1 分支结构

🎀1.1 if语句

语法结构

if (/* 条件表达式 */) {
  // 执行语句
}

if (/* 条件表达式 */){
  // 成立执行语句
} else {
  // 否则执行语句
}

if (/* 条件1 */){
  // 成立执行语句
} else if (/* 条件2 */){
  // 成立执行语句
} else if (/* 条件3 */){
  // 成立执行语句
} else {
  // 最后默认执行语句
}

🎀1.2 三元运算符

表达式1 ? 表达式2 : 表达式3
是对if……else语句的一种简化写法

i = i ? i < 0 ? Math.max(0, len + i) : i : 0;

🎀1.3 switch语句

语法格式:

switch (expression) {
  case 常量1:
    语句;
    break;
  case 常量2:
    语句;
    break;
  case 常量3:
    语句;
    break;
  …
  case 常量n:
    语句;
    break;
  default:
    语句;
    break;
}

break可以省略，如果省略，代码会继续执行下一个case
switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换（例如，字符串'10' 不等于数值 10）

🌞2 交互与写入：alert、prompt 和 confirm / write

由于我们将使用浏览器作为我们的演示环境，让我们看几个与用户交互的函数：alert，prompt 和confirm。

🎀2.1 alert

这个我们前面已经看到过了。它会显示一条信息，并等待用户按下 “OK”。

例如：

alert("Hello");

弹出的这个带有信息的小窗口被称为 模态窗。“modal” 意味着用户不能与页面的其他部分（例如点击其他按钮等）进行交互，直到他们处理完窗口。在上面示例这种情况下 —— 直到用户点击“确定”按钮。

🎀2.2 prompt

pormpt有文本消息的模态窗口，还有 input 框和确定/取消按钮。

result = prompt(title, [default]);

浏览器会显示一个带有文本消息的模态窗口，还有 input 框和确定/取消按钮。

• title

  显示给用户的文本

• default

  可选的第二个参数，指定 input 框的初始值。

语法中的方括号 [...]

上述语法中 default 周围的方括号表示该参数是可选的，不是必需的。

访问者可以在提示输入栏中输入一些内容，然后按“确定”键。然后我们在 result 中获取该文本。或者他们可以按取消键或按 Esc 键取消输入，然后我们得到 null 作为 result。

prompt 将返回用户在 input 框内输入的文本，如果用户取消了输入，则返回 null。

举个例子：

var age = prompt('How old are you?', 100);

alert("You are" + age +"ars old!"); 

IE 浏览器会提供默认值

第二个参数是可选的。但是如果我们不提供的话，Internet Explorer 会把 "undefined" 插入到 prompt。

我们可以在 Internet Explorer 中运行下面这行代码来看看效果：

var test = prompt("Test");

所以，为了 prompt 在 IE 中有好的效果，我们建议始终提供第二个参数：

var test = prompt("Test", ''); // <-- 用于 IE 浏览器

🎀2.3 confirm

confirm取消两个按钮的模态窗口。

result = confirm(question);

confirm 函数显示一个带有 question 以及确定和取消两个按钮的模态窗口。

点击确定返回 true，点击取消返回 false。

例如：

var isBoss = confirm("Are you the boss?");

alert( isBoss ); // 如果“确定”按钮被按下，则显示 true

🎀2.4 document.write

在JavaScript中document.write()函数可以向文档写入HTML表达式或JavaScript代码，用法“document.write(exp1,exp2,exp3,....)”，该函数可接受任何多个参数，并将其写入文档中。

document.write('我被写入了BODY中','还有我');

🌞3 循环结构

在javascript中，循环语句有三种，while、do..while、for循环。

我们经常需要重复执行一些操作。

例如，我们需要将列表中的商品逐个输出，或者运行相同的代码将数字 1 到 10 逐个输出。

循环 是一种重复运行同一代码的方法。

🎀3.1 while语句

基本语法：

// 当循环条件为true时，执行循环体，
// 当循环条件为false时，结束循环。
while (循环条件) {
  //循环体
}

当 condition(条件) 为 true 时，执行循环体的代码。

例如，以下将循环输出当 i < 3 时的 i 值：

var i = 0;
while (i < 3) { // 依次显示 0、1 和 2
  console.log(i);
  i++;
}

//递减操作
var i = 10;
while (i) { // 10 9 8 7 6 5 4 3 2 1
   console.log(i);
   i--;
}

🎀3.2 do...while语句

do..while循环和while循环非常像，二者经常可以相互替代，但是do..while的特点是不管条件成不成立，都会执行一次。

基础语法：

do {
  // 循环体;
} while (循环条件);

代码示例：

// 初始化变量
var i = 1;
var sum = 0;
do {
  sum += i;//循环体
  i++;//自增
} while (i <= 100);//循环条件

🎀3.3 for语句

while和do...while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便

for循环语法：

// for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增or自减表达式3) {
  // 循环体4
}

执行顺序：1243 ---- 243 -----243(直到循环条件变成false)

1. 初始化表达式
2. 判断表达式
3. 自增表达式
4. 循环体

🎀3.4 continue和break

break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）

continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）

🌞4 调试

• 过去调试JavaScript的方式
  • alert()
  • console.log()
• • 断点调试

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

• 调试步骤

浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点

• 调试中的相关操作

Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
F10: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
F8：跳到下一个断点处，如果后面没有断点了，则程序执行结束。

tips: 监视变量，不要监视表达式，因为监视了表达式，那么这个表达式也会执行。
代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。

参考 : http://bclary.com/log/2004/11/07/#a-11.9.3

---

JavaScript 控制流程【JavaScript 控制流程 】http://t.csdnimg.cn/DitNN 互三必回uu们( *^-^)

---