JavaScript语句和异常

知识内容：

1.条件语句(分支语句)

2.循环语句

3.with语句

4.异常处理

5.本节练习

参考资料：《JavaScript高级程序设计》

1.条件语句

JavaScript中的条件语句类似C、C++：

(1)if语句

1 if(条件){
2
3 }else if(条件){
4
5 }else{
6
7 }

注：

• == 值相等
• === 值和类型都相等
• && and
• || or

(2)switch语句

 1 switch (experssion){
 2 case value: statement
 3                  break;
 4 case value: statement
 5                  break;
 6 case value: statement
 7                  break;
 8 case value: statement
 9                  break;
10 default: statement
11 }

例如：

 1 switch (value) {
 2 case 1:
 3      alert('第一');
 4      break;
 5 case 2:
 6      alert('第二');
 7      break;
 8 case 3:
 9      alert('第三');
10      break;
11 default:
12      alert(666);
13      break;
14 }

2.循环语句

(1)do-while语句

1 do {
2     statement
3 } while (experssion);

例如：

1 var i = 0;
2 do {
3     i += 2;
4 } while (i < 10);
5
6 alert(i);      // 10

注：do-while循环是后测试循环语句最常用于循环体中的代码至少要被执行一次的情况

(2)while语句

1 while(expression)
2 {
3     statement
4 }

例如：

1 var i = 0;
2 while(i < 10)
3 {
4     i += 2;
5 }
6
7 alert(i);  // 10

(3)for语句

for语句有两种格式，一种类似C语言的写法，一种类似python的写法

类似python的格式：循环时，循环的元素是索引

 1 # 循环遍历数组
 2 a = [11,22,33,44]
 3 for(var item in a){
 4 　　console.log(item);  // 0 1 2 3
 5 }
 6
 7 # 循环遍历列表
 8 a = {'k1':'v1','k2':'v2'}
 9 for(var item in a){
10 　　console.log(item);  // k1 k2
11 }

类似C语言的写法：

1 # 遍历输出数组的值
2 a = [11,22,33,44]
3 for(var i=0;i<a.length;i=i+1){
4 　　console.log(a[i]);  // 11 22 33 44
5 }

注：这种方法不支持字典的循环

(4)label和break和continue

label语句：在代码中添加标签，使用方法是label：statement

break：立即退出循环

continue：立即退出循环但是退出循环后会从循环的开始部分继续执行

实例：

 1 var num = 0;
 2 for (var i=1; i<10; i++)
 3 {
 4     if (i%5 == 0){
 5         break;
 6     }
 7     num++;
 8 }
 9
10 alert(num);  // 4

 1 var num = 0;
 2 for (var i=1; i<10; i++)
 3 {
 4     if (i%5 == 0){
 5         continue;
 6     }
 7     num++;
 8 }
 9
10 alert(num);  // 8

break、continue和label语句结合使用返回代码中指定的位置：

 1 var num = 0;
 2
 3 outermost:
 4 for (var i=0; i<10; i++){
 5     for(var j=0; j<10; j++){
 6         if (i == 5 && j == 5){
 7             break outermost;
 8         }
 9         num++;
10     }
11 }
12
13 alert(num);  // 55

 1 var num = 0;
 2
 3 outermost:
 4 for (var i=0; i<10; i++){
 5     for(var j=0; j<10; j++){
 6         if (i == 5 && j == 5){
 7             continue outermost;
 8         }
 9         num++;
10     }
11 }
12
13 alert(num);  // 95

3.with语句

with语句的作用是将代码的作用域设置到一个特定的对象中，with语句语法：with (expression) statement;

定义with语句的目的主要是为了简化多次编写同一个对象的工作，如下所示：

1 var qs = location.search.substring(1);
2 var hostName = location.hostname;
3 var url = location.href;

上述代码使用with语句之后可以这样写：

1 with(location){
2     var qs = search.substring(1);
3     var hostName = hostname;
4     var url = href;
5 }

4.异常处理

关于JavaScript异常处理详细信息：https://blog.csdn.net/u012468376/article/details/57411822?utm_source=itdadao&utm_medium=referral

 1 try {
 2     //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
 3 }
 4 catch (e) {
 5     // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
 6     //e是一个局部变量，用来指向Error对象或者其他抛出的对象
 7 }
 8 finally {
 9      //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
10 }

js代码：

 // 封装console.log 封装输出
     log = function() {
         console.log.apply(console, arguments)
     };

     // 分支结构(if和switch):
     /*
         if-else:
             if(条件){

             }else if(条件){

             }else{

             }
     */
     // ———选择控制———
     //
     // if 可以根据情况选择性执行某些语句
     // 例如
     //
     // 定义一个变量 grade 代表年级

     grade = 3;
     // 如果 grade 小于 7
     if(grade < 7) {
         // 这句 log 只在 grade 小于 7 这个条件满足的情况下会被执行
         log('小学生')
     }

     // 选择控制有多种不同的用法
     // 只有if
     if(1 > 2) {
         log('条件成立')  // 语句不执行
     }

     // if 带 else
     // if else 必定会执行一个语句
     if(1 > 2) {
         log('条件成立')
     } else {
         log('条件不成立')  // 执行这条语句
     }

     // 多个 if else
     grade = 8;
     if(grade < 7) {
         log('小学生')
     } else if(grade < 10) {
         log('初中生')
     } else {
         log("高中生")
     }
     // 输出: 初中生

     // 例子
     // 求绝对值
     n = -1;
     if(n < 0) {
         n = -n;
     }
     log(n);

     // 判断奇偶
     n = 1;
     if(n % 2 === 0) {
         log('偶数');
     } else {
         log('奇数');
     }

     // ——比较运算和逻辑操作——
     //
     // if 判断的条件其实是一个值, 这种值叫 布尔值 (bool, Boolean)
     // 这种值只有两种结果, 一个是 真, 一个是 假
     // 在 JavaScript 中, 这两种值分别是 true 和 false
     //
     // 1 > 2 实际上是一个值, false
     // if 是根据这个值来决定执行的语句的
     //
     // 一共有 7 种比较运算
     // 下面分别是
     // 严格相等, 严格不相等, 相等、不等、小于、大于、小于等于、大于等于
     // ===
     // !==
     // ==
     // !=
     // <
     // >
     // <=
     // >=

     // 例子
     // 1 === '1'
     // 1 == 1
     // 1 == 2
     // 1 != 1
     // 1 != 2
     // 1 < 2
     // 1 > 2
     // 1 <= 1
     // 1 >= 1

     // 除了比较运算, 还有三种逻辑操作
     // 三种逻辑操作分别是 与、或、非
     // 在 JavaScript 中 分别如下
     // &&
     // ||
     // !
     //
     // 用到的地方很广, 比如你登录网站的时候, 服务器要做如下判断
     // if(用户名存在 && 密码验证成功) {
     //     登录成功
     // } else {
     //     登录失败
     // }

     // 注意
     // 比较运算和逻辑操作的结果都是 bool（布尔类型），结果是 true 和 false

     // 例子
     // 1 == 1 && 2 == 2   // true
     // 1 == 1 && 1 == 2   // false
     // 1 == 1 || 1 == 2   // true
     // ! (1 == 1)

     // 可以加括号来让代码直观一点
     // ((1 == 1) && (2 == 2)) || (1 == 2)

     /*
         switch:
             switch (experssion){
                 case value: statement
                                  break;
                 case value: statement
                                  break;
                 case value: statement
                                  break;
                 case value: statement
                                  break;
                 default: statement
             }
     */
     value = 1;
     switch (value) {
         case 1:
              log('第一');
              break;
         case 2:
              log('第二');
              break;
         case 3:
              log('第三');
              break;
         default:
              log(666);
              break;
     }

     // 循环结构(do-while、while、for)
     // do-while:
     var i = 0;
     do {
         i += 2;
         log(i);
     }while (i < 10);

     // while:
     var i = 0;
     while(i < 10){
         i += 2;
         log(i);
     }

     // for:
     // for语句有两种格式，一种类似C语言的写法，一种类似python的写法
     // 类似python的格式：循环时，循环的元素是索引
     // 循环遍历数组
     a = [11,22,33,44];
     for(item in a){
         log(item);  // 0 1 2 3
         log(a[item]);  // 11 22 33 44
     }

     // 循环遍历字典
     a = {'k1':'v1','k2':'v2'};
     for(s in a){
         log(s);  // k1 k2
         log(a[s]);  // v1 v2
     }

     // break continue label示例:
     var num = 0;
     for (var i=1; i<10; i++)
     {
         if (i%5 == 0){
             break;
         }
         num++;
     }
     log(num);  //

     var num = 0;
     for (var i=1; i<10; i++)
     {
         if (i%5 == 0){
             continue;
         }
         num++;
     }
     log(num);  //

     // break、continue和label语句结合使用返回代码中指定的位置：
     var num = 0;
     outermost:
         for (var i=0; i<10; i++){
             for(var j=0; j<10; j++){
                 if (i == 5 && j == 5){
                     break outermost;
                 }
                 num++;
             }
         }
     log(num);  //

     var num = 0;
     outermost:
         for (var i=0; i<10; i++){
             for(var j=0; j<10; j++){
                 if (i == 5 && j == 5){
                     continue outermost;
                 }
                 num++;
             }
         }
     log(num);  //

     // JavaScript异常处理结构:
     /*
         try {
             //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
         }
         catch (e) {
             // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
             //e是一个局部变量，用来指向Error对象或者其他抛出的对象
         }
         finally {
              //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
         }
     */

5.本节练习：

1.循环输出1到100，循环输出100到0，循环输出1到100之间的奇数，输出1到100的和(5050)

2.求1到100之间奇数的和，求1到100之间偶数的和

3.循环打印输出九九乘法表

4.循环打印倒序输出九九乘法表

4.解决百钱白鸡问题:

公鸡5元每只，母鸡3元每只，小鸡3只1元，100元可以买多少只鸡?

代码如下：

 <!-- author: wyb -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="../source/css/common.css">
     <title>JavaScript循环分支语句练习</title>
     <style>
         table {
             border: 1px solid red;
             background: #ccffff;
         }
     </style>
 </head>
 <body>

 <div class="container">
     <h1>JavaScript循环分支语句练习</h1>

     <h3>题目如下:</h3>
     <ol>
         <li>
             循环输出1到100，循环输出100到0，输出1到100的和(5050)
         </li>
         <li>
             循环输出1到100之间的奇数，并求1到100之间奇数的和，求1到100之间偶数的和
         </li>
         <li>
             循环打印输出九九乘法表
         </li>
         <li>
             循环打印倒序输出九九乘法表
         </li>
         <li>
             解决百钱白鸡问题:

             公鸡5元每只，母鸡3元每只，小鸡3只1元，100元要买100只鸡怎么买?
         </li>
     </ol>
     <h3>详细解题思路请看代码中的js代码</h3>

     <h3>第一题:</h3>
     <h4>循环输出1到100，循环输出100到0，输出1到100的和(5050)</h4>
     <div id="p1">

     </div>

     <h3>第二题:</h3>
     <h4>循环输出1到100之间的奇数，并求1到100之间奇数的和，求1到100之间偶数的和</h4>
     <div id="p2">

     </div>

     <h3>第三题:</h3>
     <h4>循环打印输出九九乘法表</h4>
     <div id="p3">

     </div>

     <h3>第四题:</h3>
     <h4>循环打印倒序输出九九乘法表</h4>
     <div id="p4">

     </div>

     <h3>第五题:</h3>
     <h4>
         百钱白鸡问题:
         公鸡5元每只，母鸡3元每只，小鸡3只1元，100元要买100只鸡怎么买?
     </h4>
     <div id="p5">

     </div>

 </div>

 <script>
     // JavaScript字符串格式化
     String.prototype.format = function (args) {
         var result = this;
         if (arguments.length > 0) {
             if (arguments.length == 1 && typeof (args) == "object") {
                 for (var key in args) {
                     if (args[key] != undefined) {
                         var reg = new RegExp("({" + key + "})", "g");
                         result = result.replace(reg, args[key]);
                     }
                 }
             }
             else {
                 for (var i = 0; i < arguments.length; i++) {
                     if (arguments[i] != undefined) {
                         var reg = new RegExp("({)" + i + "(})", "g");
                         result = result.replace(reg, arguments[i]);
                     }
                 }
             }
         }
         return result;
     };

     // 第一题: 循环输出1到100，循环输出100到0，输出1到100的和(5050)
     // 循环输出1到100
     var item = document.getElementById("p1");       // 获得第一题的div，后面同理，都是获得题目对应的div对象
     for (var i = 1; i <= 100; i += 1) {
         item.innerHTML += '<span>{0}</span>&nbsp;&nbsp;'.format(i.toString());
         if (i % 40 === 0) {
             item.innerHTML += '<br>';
         }
     }
     item.innerHTML += '<hr>';

     // 循环输出100到0
     for (var i = 100; i >= 0; i -= 1) {
         item.innerHTML += '<span>{0}</span>&nbsp;&nbsp;'.format(i.toString());
         if (i % 40 === 0) {
             item.innerHTML += '<br>';
         }
     }
     item.innerHTML += '<hr>';

     // 输出1到100的和(5050)
     var sum = 0;
     for (var i = 1; i <= 100; i += 1) {
         sum += i;
     }
     item.innerHTML += '<span>{0}</span><br><hr>'.format(sum.toString());

     // 第二题: 循环输出1到100之间的奇数，并求1到100之间奇数的和，求1到100之间偶数的和
     // 循环输出1到100之间的奇数
     var item = document.getElementById("p2");
     for (var i = 1; i <= 100; i += 1) {
         if (i % 2 !== 0) {
             item.innerHTML += '<span>{0}</span>&nbsp;&nbsp;'.format(i.toString());
         }
         if (i % 69 === 0) {
             item.innerHTML += '<br>';
         }
     }
     item.innerHTML += '<hr>';

     // 求1到100之间奇数的和
     var sum = 0;
     for (var i = 1; i <= 100; i += 2) {
         sum += i;
     }
     item.innerHTML += '1到100之间奇数的和: <span>{0}</span><br><hr>'.format(sum.toString());
     // 求1到100之间偶数的和
     var sum = 0;
     for (var i = 0; i <= 100; i += 2) {
         sum += i;
     }
     item.innerHTML += '1到100之间偶数的和: <span>{0}</span><br><hr>'.format(sum.toString());

     // 第三题: 循环打印输出九九乘法表
     var item = document.getElementById("p3");
     item.innerHTML += '<table border="1"></table>';
     var item = item.getElementsByTagName('table')[0];
     for (var i = 1; i <= 9; i += 1) {
         item.innerHTML += '<tr></tr>';
         var s = item.getElementsByTagName('tr')[i - 1];
         for (var j = 1; j <= i; j += 1) {
             s.innerHTML += '<td>{0}*{1}={2}</td>'.format(i.toString(), j.toString(), (i * j).toString());
         }
     }

     // 第四题: 循环打印倒序输出九九乘法表
     var item = document.getElementById("p4");
     item.innerHTML += '<table border="1"></table>';
     var item = item.getElementsByTagName('table')[0];
     for (var i = 9; i >= 1; i -= 1) {
         item.innerHTML += '<tr></tr>';
         var s = item.getElementsByTagName('tr')[9 - i];
         for (var j = 1; j <= i; j += 1) {
             s.innerHTML += '<td>{0}*{1}={2}</td>'.format(i.toString(), j.toString(), (i * j).toString());
         }
     }

     // 第五题: 百钱白鸡问题: 公鸡5元每只，母鸡3元每只，小鸡3只1元，100元要买100只鸡怎么买?
     var item = document.getElementById("p5");
     for (var i = 0; i <= 20; i++){
         for (var j = 0; j <= 33; j++){
             for (var k = 0; k <= 100; k++){
                 if((i+j+k===100) && (i*5+j*3+k/3===100)){
                     item.innerHTML += '<span>公鸡{0}只，母鸡{1}只，小鸡{2}只</span><br>'.format(i.toString(), j.toString(), k.toString());
                 }
             }
         }
     }
     item.innerHTML += '<hr>';
     // 下面这种算法也可以
     for (var i = 0; i <= 20; i++){
         for (var j = 0; j <= 33; j++){
             var k = 100 - i - j;
             if((i+j+k===100) && (i*5+j*3+k/3===100)){
                 item.innerHTML += '<span>公鸡{0}只，母鸡{1}只，小鸡{2}只</span><br>'.format(i.toString(), j.toString(), k.toString());
             }
         }
     }

 </script>

 </body>
 </html>