JavaScript語句和異常

時間 2019-11-13

標籤 javascript 語句異常欄目 JavaScript 简体版

原文原文鏈接

知識內容：css

1.條件語句(分支語句)html

2.循環語句python

3.with語句算法

4.異常處理express

5.本節練習數組

參考資料：《JavaScript高級程序設計》服務器

1.條件語句app

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代碼：

  1 // 封裝console.log 封裝輸出
  2     log = function() {
  3         console.log.apply(console, arguments)
  4     };
  5 
  6     // 分支結構(if和switch):
  7     /*
  8         if-else:
  9             if(條件){
 10 
 11             }else if(條件){
 12 
 13             }else{
 14 
 15             }
 16     */
 17     // ———選擇控制———
 18     //
 19     // if 能夠根據狀況選擇性執行某些語句
 20     // 例如
 21     //
 22     // 定義一個變量 grade 表明年級
 23 
 24     grade = 3;
 25     // 若是 grade 小於 7
 26     if(grade < 7) {
 27         // 這句 log 只在 grade 小於 7 這個條件知足的狀況下會被執行
 28         log('小學生')
 29     }
 30 
 31     // 選擇控制有多種不一樣的用法
 32     // 只有if
 33     if(1 > 2) {
 34         log('條件成立')  // 語句不執行
 35     }
 36 
 37     // if 帶 else
 38     // if else 一定會執行一個語句
 39     if(1 > 2) {
 40         log('條件成立')
 41     } else {
 42         log('條件不成立')  // 執行這條語句
 43     }
 44 
 45     // 多個 if else
 46     grade = 8;
 47     if(grade < 7) {
 48         log('小學生')
 49     } else if(grade < 10) {
 50         log('初中生')
 51     } else {
 52         log("高中生")
 53     }
 54     // 輸出: 初中生
 55 
 56     // 例子
 57     // 求絕對值
 58     n = -1;
 59     if(n < 0) {
 60         n = -n;
 61     }
 62     log(n);
 63 
 64     // 判斷奇偶
 65     n = 1;
 66     if(n % 2 === 0) {
 67         log('偶數');
 68     } else {
 69         log('奇數');
 70     }
 71 
 72 
 73     // ——比較運算和邏輯操做——
 74     //
 75     // if 判斷的條件實際上是一個值, 這種值叫 布爾值 (bool, Boolean)
 76     // 這種值只有兩種結果, 一個是 真, 一個是 假
 77     // 在 JavaScript 中, 這兩種值分別是 true 和 false
 78     //
 79     // 1 > 2 其實是一個值, false
 80     // if 是根據這個值來決定執行的語句的
 81     //
 82     // 一共有 7 種比較運算
 83     // 下面分別是
 84     // 嚴格相等, 嚴格不相等, 相等、不等、小於、大於、小於等於、大於等於
 85     // ===
 86     // !==
 87     // ==
 88     // !=
 89     // <
 90     // >
 91     // <=
 92     // >=
 93 
 94     // 例子
 95     // 1 === '1'
 96     // 1 == 1
 97     // 1 == 2
 98     // 1 != 1
 99     // 1 != 2
100     // 1 < 2
101     // 1 > 2
102     // 1 <= 1
103     // 1 >= 1
104 
105     // 除了比較運算, 還有三種邏輯操做
106     // 三種邏輯操做分別是 與、或、非
107     // 在 JavaScript 中 分別以下
108     // &&
109     // ||
110     // !
111     //
112     // 用到的地方很廣, 好比你登陸網站的時候, 服務器要作以下判斷
113     // if(用戶名存在 && 密碼驗證成功) {
114     //     登陸成功
115     // } else {
116     //     登陸失敗
117     // }
118 
119     // 注意
120     // 比較運算和邏輯操做的結果都是 bool（布爾類型），結果是 true 和 false
121 
122     // 例子
123     // 1 == 1 && 2 == 2   // true
124     // 1 == 1 && 1 == 2   // false
125     // 1 == 1 || 1 == 2   // true
126     // ! (1 == 1)
127 
128     // 能夠加括號來讓代碼直觀一點
129     // ((1 == 1) && (2 == 2)) || (1 == 2)
130 
131 
132     /*
133         switch:
134             switch (experssion){
135                 case value: statement
136                                  break;
137                 case value: statement
138                                  break;
139                 case value: statement
140                                  break;
141                 case value: statement
142                                  break;
143                 default: statement
144             }
145     */
146     value = 1;
147     switch (value) {
148         case 1:
149              log('第一');
150              break;
151         case 2:
152              log('第二');
153              break;
154         case 3:
155              log('第三');
156              break;
157         default:
158              log(666);
159              break;
160     }
161 
162 
163     // 循環結構(do-while、while、for)
164     // do-while:
165     var i = 0;
166     do {
167         i += 2;
168         log(i);
169     }while (i < 10);
170 
171     // while:
172     var i = 0;
173     while(i < 10){
174         i += 2;
175         log(i);
176     }
177 
178     // for:
179     // for語句有兩種格式，一種相似C語言的寫法，一種相似python的寫法
180     // 相似python的格式：循環時，循環的元素是索引
181     // 循環遍歷數組
182     a = [11,22,33,44];
183     for(item in a){
184         log(item);  // 0 1 2 3
185         log(a[item]);  // 11 22 33 44
186     }
187 
188     // 循環遍歷字典
189     a = {'k1':'v1','k2':'v2'};
190     for(s in a){
191         log(s);  // k1 k2
192         log(a[s]);  // v1 v2
193     }
194 
195 
196     // break continue label示例:
197     var num = 0;
198     for (var i=1; i<10; i++)
199     {
200         if (i%5 == 0){
201             break;
202         }
203         num++;
204     }
205     log(num);  // 4
206 
207     var num = 0;
208     for (var i=1; i<10; i++)
209     {
210         if (i%5 == 0){
211             continue;
212         }
213         num++;
214     }
215     log(num);  // 8
216 
217     // break、continue和label語句結合使用返回代碼中指定的位置：
218     var num = 0;
219     outermost:
220         for (var i=0; i<10; i++){
221             for(var j=0; j<10; j++){
222                 if (i == 5 && j == 5){
223                     break outermost;
224                 }
225                 num++;
226             }
227         }
228     log(num);  // 55
229 
230     var num = 0;
231     outermost:
232         for (var i=0; i<10; i++){
233             for(var j=0; j<10; j++){
234                 if (i == 5 && j == 5){
235                     continue outermost;
236                 }
237                 num++;
238             }
239         }
240     log(num);  // 95
241 
242 
243     // JavaScript異常處理結構:
244     /*
245         try {
246             //這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
247         }
248         catch (e) {
249             // 若是try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
250             //e是一個局部變量，用來指向Error對象或者其餘拋出的對象
251         }
252         finally {
253              //不管try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
254         }
255     */

5.本節練習：

1.循環輸出1到100，循環輸出100到0，循環輸出1到100之間的奇數，輸出1到100的和(5050)

2.求1到100之間奇數的和，求1到100之間偶數的和

3.循環打印輸出九九乘法表

4.循環打印倒序輸出九九乘法表

4.解決百錢白雞問題:

公雞5元每隻，母雞3元每隻，小雞3只1元，100元能夠買多少隻雞?

代碼以下：

  1 <!-- author: wyb -->
  2 <!DOCTYPE html>
  3 <html lang="en">
  4 <head>
  5     <meta charset="UTF-8">
  6     <link rel="stylesheet" href="../source/css/common.css">
  7     <title>JavaScript循環分支語句練習</title>
  8     <style>
  9         table {
 10             border: 1px solid red;
 11             background: #ccffff;
 12         }
 13     </style>
 14 </head>
 15 <body>
 16 
 17 <div class="container">
 18     <h1>JavaScript循環分支語句練習</h1>
 19 
 20     <h3>題目以下:</h3>
 21     <ol>
 22         <li>
 23             循環輸出1到100，循環輸出100到0，輸出1到100的和(5050)
 24         </li>
 25         <li>
 26             循環輸出1到100之間的奇數，並求1到100之間奇數的和，求1到100之間偶數的和
 27         </li>
 28         <li>
 29             循環打印輸出九九乘法表
 30         </li>
 31         <li>
 32             循環打印倒序輸出九九乘法表
 33         </li>
 34         <li>
 35             解決百錢白雞問題:
 36 
 37             公雞5元每隻，母雞3元每隻，小雞3只1元，100元要買100只雞怎麼買?
 38         </li>
 39     </ol>
 40     <h3>詳細解題思路請看代碼中的js代碼</h3>
 41 
 42 
 43     <h3>第一題:</h3>
 44     <h4>循環輸出1到100，循環輸出100到0，輸出1到100的和(5050)</h4>
 45     <div id="p1">
 46 
 47     </div>
 48 
 49 
 50     <h3>第二題:</h3>
 51     <h4>循環輸出1到100之間的奇數，並求1到100之間奇數的和，求1到100之間偶數的和</h4>
 52     <div id="p2">
 53 
 54     </div>
 55 
 56 
 57     <h3>第三題:</h3>
 58     <h4>循環打印輸出九九乘法表</h4>
 59     <div id="p3">
 60 
 61     </div>
 62 
 63 
 64     <h3>第四題:</h3>
 65     <h4>循環打印倒序輸出九九乘法表</h4>
 66     <div id="p4">
 67 
 68     </div>
 69 
 70 
 71     <h3>第五題:</h3>
 72     <h4>
 73         百錢白雞問題:
 74         公雞5元每隻，母雞3元每隻，小雞3只1元，100元要買100只雞怎麼買?
 75     </h4>
 76     <div id="p5">
 77 
 78     </div>
 79 
 80 </div>
 81 
 82 
 83 <script>
 84     // JavaScript字符串格式化
 85     String.prototype.format = function (args) {
 86         var result = this;
 87         if (arguments.length > 0) {
 88             if (arguments.length == 1 && typeof (args) == "object") {
 89                 for (var key in args) {
 90                     if (args[key] != undefined) {
 91                         var reg = new RegExp("({" + key + "})", "g");
 92                         result = result.replace(reg, args[key]);
 93                     }
 94                 }
 95             }
 96             else {
 97                 for (var i = 0; i < arguments.length; i++) {
 98                     if (arguments[i] != undefined) {
 99                         var reg = new RegExp("({)" + i + "(})", "g");
100                         result = result.replace(reg, arguments[i]);
101                     }
102                 }
103             }
104         }
105         return result;
106     };
107 
108 
109     // 第一題: 循環輸出1到100，循環輸出100到0，輸出1到100的和(5050)
110     // 循環輸出1到100
111     var item = document.getElementById("p1");       // 得到第一題的div，後面同理，都是得到題目對應的div對象
112     for (var i = 1; i <= 100; i += 1) {
113         item.innerHTML += '<span>{0}</span>&nbsp;&nbsp;'.format(i.toString());
114         if (i % 40 === 0) {
115             item.innerHTML += '<br>';
116         }
117     }
118     item.innerHTML += '<hr>';
119 
120     // 循環輸出100到0
121     for (var i = 100; i >= 0; i -= 1) {
122         item.innerHTML += '<span>{0}</span>&nbsp;&nbsp;'.format(i.toString());
123         if (i % 40 === 0) {
124             item.innerHTML += '<br>';
125         }
126     }
127     item.innerHTML += '<hr>';
128 
129     // 輸出1到100的和(5050)
130     var sum = 0;
131     for (var i = 1; i <= 100; i += 1) {
132         sum += i;
133     }
134     item.innerHTML += '<span>{0}</span><br><hr>'.format(sum.toString());
135 
136 
137     // 第二題: 循環輸出1到100之間的奇數，並求1到100之間奇數的和，求1到100之間偶數的和
138     // 循環輸出1到100之間的奇數
139     var item = document.getElementById("p2");
140     for (var i = 1; i <= 100; i += 1) {
141         if (i % 2 !== 0) {
142             item.innerHTML += '<span>{0}</span>&nbsp;&nbsp;'.format(i.toString());
143         }
144         if (i % 69 === 0) {
145             item.innerHTML += '<br>';
146         }
147     }
148     item.innerHTML += '<hr>';
149 
150     // 求1到100之間奇數的和
151     var sum = 0;
152     for (var i = 1; i <= 100; i += 2) {
153         sum += i;
154     }
155     item.innerHTML += '1到100之間奇數的和: <span>{0}</span><br><hr>'.format(sum.toString());
156     // 求1到100之間偶數的和
157     var sum = 0;
158     for (var i = 0; i <= 100; i += 2) {
159         sum += i;
160     }
161     item.innerHTML += '1到100之間偶數的和: <span>{0}</span><br><hr>'.format(sum.toString());
162 
163 
164     // 第三題: 循環打印輸出九九乘法表
165     var item = document.getElementById("p3");
166     item.innerHTML += '<table border="1"></table>';
167     var item = item.getElementsByTagName('table')[0];
168     for (var i = 1; i <= 9; i += 1) {
169         item.innerHTML += '<tr></tr>';
170         var s = item.getElementsByTagName('tr')[i - 1];
171         for (var j = 1; j <= i; j += 1) {
172             s.innerHTML += '<td>{0}*{1}={2}</td>'.format(i.toString(), j.toString(), (i * j).toString());
173         }
174     }
175 
176     // 第四題: 循環打印倒序輸出九九乘法表
177     var item = document.getElementById("p4");
178     item.innerHTML += '<table border="1"></table>';
179     var item = item.getElementsByTagName('table')[0];
180     for (var i = 9; i >= 1; i -= 1) {
181         item.innerHTML += '<tr></tr>';
182         var s = item.getElementsByTagName('tr')[9 - i];
183         for (var j = 1; j <= i; j += 1) {
184             s.innerHTML += '<td>{0}*{1}={2}</td>'.format(i.toString(), j.toString(), (i * j).toString());
185         }
186     }
187 
188     // 第五題: 百錢白雞問題: 公雞5元每隻，母雞3元每隻，小雞3只1元，100元要買100只雞怎麼買?
189     var item = document.getElementById("p5");
190     for (var i = 0; i <= 20; i++){
191         for (var j = 0; j <= 33; j++){
192             for (var k = 0; k <= 100; k++){
193                 if((i+j+k===100) && (i*5+j*3+k/3===100)){
194                     item.innerHTML += '<span>公雞{0}只，母雞{1}只，小雞{2}只</span><br>'.format(i.toString(), j.toString(), k.toString());
195                 }
196             }
197         }
198     }
199     item.innerHTML += '<hr>';
200     // 下面這種算法也能夠
201     for (var i = 0; i <= 20; i++){
202         for (var j = 0; j <= 33; j++){
203             var k = 100 - i - j;
204             if((i+j+k===100) && (i*5+j*3+k/3===100)){
205                 item.innerHTML += '<span>公雞{0}只，母雞{1}只，小雞{2}只</span><br>'.format(i.toString(), j.toString(), k.toString());
206             }
207         }
208     }
209 
210 </script>
211 
212 </body>
213 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。