首頁 > web前端 > js教程 > 主體

JavaScript學習總結【4】JS深入

黄舟
發布: 2017-02-09 14:55:27
原創
1317 人瀏覽過

1、JS流程控制語句

  (1)、if 判斷

  if 語句是基於條件成立時才執行對應的程式碼。

  if...else  語句是在指定的條件成立時執行if後的代碼,在條件不成立時執行else後的代碼。

  if...else  嵌套語句是在多種條件下選擇對應的程式碼快之一來執行。

  if 語句適用於任意類型的數據,可處理複雜的邏輯關係。

  (2)、switch語句

  當有很多種選擇的時候,switch 比 if...else 使用更方便,結構簡潔,專為多重選擇設計,但是僅能處理多個枚舉型邏輯關係。該語句使用 if 也可以完成,這個看個人喜好。

  switch 語句的工作原理:首先創建一個表達式,通常為變量,之後表達式的值與switch 語句中每個case 的值做比較,如果匹配,則執行該case 後的語句,若與所有case值都不匹配,則執行default 後的語句。使用 switch 語句時,每個 case 語句後必須使用 break 跳出循環,阻止執行下一個 case。

var d = new Date().getDay(); //如果今天不是周末,则提示默认消息
 switch (d){     
 case 6:         
 alert("今天是星期六");         
 break;     
 case 0:         
 alert("今天是星期天");         
 break;     
 default:         
 alert("同志尚未努力,革命仍需成功。"); 
 }
登入後複製

switch 語句在做比較時,使用的是全等,而不是相等,所以在字串與數字匹配時,需要特別注意。

//使用switch语句将字符串与数字做比较
 //返回:不等于,执行default语句
 var n = '5'; switch(n){     
 case 5:         
 alert('等于,执行case语句');         
 break;     
 default:         
 alert('不等于,执行default语句'); } 
 //使用if语句将字符串与数字做比较
 //返回:等于
 var n = '2'; if(n == 2){     
 alert('等于'); 
 }else{     
 alert('不等于'); 
 } 
 //将case的值改为字符串再做比较
 //返回:等于,执行case语句
 var n = '2'; switch(n){     
 case '2':         
 alert('等于,执行case语句');         
 break;     
 default:         
 alert('不等于,执行default语句'); 
 } 
 
 //使用全等再做比较
 //返回:不等于
 var n = '2'; 
 if(n===2){     
 alert('等于'); }else{     
 alert('不等于'); }
登入後複製

(3)、for 循環

  很多事情不只是做一次,需要重複做。例如列印 10 份文件,每次列印 1 份,重複這個動作,直到列印完成。這樣的事情就用 for 迴圈來完成,迴圈就是重複執行一段程式碼,每次的值不同。

  下面是一個 for 迴圈的小應用,假設有 1.2.3. ... 10 不同面值的 RMB,計算一共有多少 RMB。

var sum = 0; for(var rmb=1; rmb<=10; rmb++){ 
     sum += rmb; } alert(&#39;一共有: &#39; + sum + &#39;元&#39;);    //返回:一共有:55元
登入後複製

(4)、while 迴圈

  while 迴圈和 for 迴圈具有相同的功能,只要指定條件為 ture,迴圈就可以一直執行,直到條件不再滿足。

//使用while循环输出5个数字
 var i = 0;      //第一部分:初始化,给一个初始的值,让i从0循环
 while(i < 5){    //第二部分:条件。成立继续循环,不成立退出
     alert(i);    //第三部分:语句
     i++;     //第四部分:自增
 } //while循环使用比较复杂,使用for循环更简洁。
 //for(初始化;条件;自增){语句}
登入後複製

(5)、do...while 循環

  do...while 循環與while 循環的原理結構是基本相同的,但是該循環會在檢查條件是否為ture 之前執行一次代碼塊,如果條件為ture,則重複循環。這個循環有一點小問題,因為他是先執行程式碼,後判斷條件,如果條件不當,則進入死循環,導致瀏覽器崩潰。

 /*
 语法: do{   执行语句 } while(条件); */
 
 //操作有风险,尝试需谨慎
 //若将循环条件改为:num <= 6 会导致浏览器崩溃  
 var num = 6; do{     document.write("数字:" + num + "<br>");     num -= 1; } while(num > 0);
登入後複製

(6)、JS 錯誤處理語句

  try...catch 語句用於進行異常處理。 try 語句用來偵測程式碼區塊的錯誤,指明需要處理的程式碼片段,catch 語句用於處理 try 語句中拋出的錯誤。 try 語句首先被執行,如果運行中發生了錯誤,try 語句中的程式碼將被跳過執行 catch 中的語句。如果沒有發生錯誤,則不執行 catch 中的語句。一般針對可預見性的錯誤,可使用 try...catch 語句進行處理。

try{     
document.write("开始执行try语句" + &#39;<br>&#39;);     
document.write("还没抛出错误" + &#39;<br>&#39;);     
alert(x);        //抛出错误
     alert(&#39;123&#39;);    //没被执行
 } catch(e){     
 document.write("捕捉到错误,开始执行catch语句" + &#39;<br>&#39;);     
 document.write("错误类型: " + e.name + &#39;<br>&#39;);     
 document.write("错误信息: " + e.message);     
 alert(&#39;x&#39;); }
登入後複製

throw 語句可用來建立自訂錯誤。官方術語為:創建或拋出異常(exception)。語法:throw '異常物件'。  

  throw 語句可以配合 try...catch 語句一起使用,以達到控製程式流,產生精確的錯誤訊息。

//输入0到10之间的数字,如果输入错误,会抛出一个错误,catch会捕捉到错误,并显示自定义的错误消息。
 <body>
 <input id="txt" type="text"/>
 <span id="demo" style="font-weight:bold;"></span><br>
 <input type="button" value="检测输入" onclick="error()">
 <script> function error(){     
 try{         
 var x = document.getElementById("txt").value;         
 var y = document.getElementById("demo");         
 y.style.color = &#39;red&#39;;         
 if(x == &#39;&#39;) throw &#39;输入不能为空&#39;;         
 if(isNaN(x)) throw &#39;请输入数字&#39;;         
 var num = [7,8,9];         
 for(var i=0; i<num.length; i++){             
 if(x == num[i]){                 
 throw &#39;该数字已经存在&#39;;             
 }         
 }         
 if(x == 0){             
 throw &#39;输入不能为0&#39;;         
 }         
 else if(x > 10){             
 throw &#39;数字太大了&#39;;         
 }         
 else if(x <= 3){             
 throw &#39;数字太小了&#39;;         
 }         
 else{             
 y.style.color = &#39;green&#39;;             
 y.innerHTML = &#39;OK&#39;;         
 }     
 }     
 catch(e){         
 y.innerHTML = &#39;错误提示:&#39; + e + &#39;!&#39;;     
 } 
 } 
 </script>
 </body>
登入後複製

(7)、跳出迴圈

  break 語句用來跳出目前循環,直接退出迴圈執行後面的程式碼,即終止整個循環,不再判斷。 continue 語句只是跳出本次循環,繼續執行後面的循環,即結束本次循環,接著去判斷是否執行下次循環。 return 可以終止函數體的運行,並傳回一個值。

for(var i=0; i<6; i++){     if(i == 3) break;    //当i=3时跳出整个循环,不再执行循环
     alert(i);    //返回:0,1,2
 } 
 for(var i=0; i<6; i++){     if(i == 3) continue;    //当i=3时跳出本次循环,继续执行后面循环
     alert(i);    返回:0,1,2,4,5
 }
登入後複製

2、JSON

  JSON(JavaScript Object Notation):JS 物件表示法。 JSON 主要用於儲存和交換資料訊息,類似於 XML,但相比 XML,JSON 易於閱讀和編寫,也易於解析。

   JSON 語法是 JS 物件表示語法的子集:資料在鍵值對中,並由逗號分隔,花括號保存對象,方括號保存陣列。

  JSON 語法的書寫格式:"名稱" : "值", "名稱" : "值"

  名稱和值包含在雙引號中,並用冒號分隔,每條數據用逗號分隔。這很容易理解,相對於 JS 中 名稱 = "值"。

  JSON 的值可以是:數字(包括整數和小數),字串(包含在雙引號中),布林值(true 或false),物件(包含在花括號中),陣列(包含在方括號中),或為null。

  JSON 是純文本,通常用於服務端向網頁傳遞數據,從伺服器上獲取 JSON 數據,然後在網頁中使用該數據。

  (1)、JSON物件

var json = {"a": 12, "b": "abc", "c":[1,2,3]}; //返回第一项的值:
 alert(json.a); 
 //修改第二项的值
 alert(json.b = "xyz"); 
 //返回第三项数组中第一项的值
 alert(json.c[0]);
登入後複製

 (2)、JSON 和陣列

  相同點:

  都可以透過下標傳回某項的值。都可以使用循環。雖然 JSON 沒有 length 屬性,不能使用 for 循環,但可以使用 for...in 循環,完成與 for 迴圈相同的動作。

  數組也可以使用 for...in 循環,但最好還是使用 for 循環。 for...in 迴圈遍歷的是物件的屬性,而不是陣列元素。

  不同點:

  JSON 的下标是字符串,数组的下标为数字。JSON 没有 length 属性,数组有该属性。

var arr = [12,5,7]; var json = {"a":12,"b":5,"c":7}; 
 alert(arr[0]);      //返回:12
 alert(json["a"]);    //返回:12
 
 alert(arr.length);    //返回:3
 alert(json.length);   //返回:undefined
 
 //数组for循环
 for(var i=0; i<arr.length; i++){     alert(&#39;第&#39; + (i+1) + &#39;个数据是:&#39; + arr[i]); } alert(typeof i);    //返回:number
 
 //数组使用for...in循环
 for(var i in arr){     alert(&#39;第&#39; + (i+1) + &#39;个数据是:&#39; + arr[i]); } alert(typeof i);    //返回:string
 
 //JSON使用for...in循环
 for(var i in json){     alert(&#39;第&#39; + i + &#39;个数据是:&#39; + json[i]); }
登入後複製

  (3)、JSON 数组对象

<body>
 <p>
 姓 名: <span id="fname"></span><br> 
 性 别: <span id="gender"></span><br>
 员工号: <span id="num"></span><br> 
 修改姓名: <span id="lname"></span><br> 
 </p> 
 <script> var staff = [     {"name" : "小明", "sex" : "男", "id" : 1}, 
     {"name" : "小白", "sex" : "男", "id" : 2}, 
     {"name" : "小红", "sex" : "女", "id" : 3} ]; 
     var x = document.getElementById("fname"); 
     var y = document.getElementById("gender"); 
     var z = document.getElementById("num"); 
     var n = document.getElementById("lname"); //访问对象数组中第一项的值:
 x.innerHTML = staff[0].name; y.innerHTML = staff[0].sex; z.innerHTML = staff[0].id; 
 //修改数据:
 n.innerHTML = staff[1].name = &#39;大白&#39;; </script>
 </body>
登入後複製

  (4)、JSON 字符串对象

var str = &#39;{"name":"小明", "sex":"男", "age":21}&#39;;
var toObj = JSON.parse(str);  //JSON字符串转换为JSON对象alert(toObj.name);
alert(typeof toObj);    //返回:object
var json = {"name":"小红", "sex":"女", "age":18};
var toStr = JSON.stringify(json);  //JSON对象转换为JSON字符串
alert(toStr);    //返回字符串alert(json.age);
alert(typeof toStr);    //返回:string
登入後複製

(5)、JSON 应用

  当需要表示一组数据时,JSON 不但能够提高可读性,而且还可以减少复杂性。JSON 能够表示多个值,每个值又可包含多个值,例如要表示一个用户列表信息,就可以将所有信息存储在一个变量中,分成多项,每项中又可分成多个条目,每个条目中记录一个用户的信息。

var userName = {     
"first": [{         
"name": "路飞",         
"sex": "男",         
"tel": "aaa"    
 },  {         
 "name": "索罗",         
 "sex": "男",         
 "tel": "bbb"     
 }, {         
 "name": "娜美",         
 "sex": "女",         
 "tel": "ccc"     }], 
     "second": [{         
     "name": "卡卡西",         
     "sex": "男",         
     "tel": "ddd"     
     }, {         
     "name": "鸣人",         
     "sex": "男",         
     "tel": "fff"     
     }, {         
     "name": "佐助",         
     "sex": "男",         
     "tel": "eee"     
     }, {         
     "name": "皱田",         
     "sex": "女",         
     "tel": "sss"     
     }], 
     "third": [{         
     "name": "小明",         
     "sex": "男",         
     "tel": "xxx"     
     },{         
     "name": "小红",         
     "sex": "女",         
     "tel": "zzz"     
     }] 
     }; 
 //获取用户的信息:
 alert(userName.first[1].name + &#39; \n &#39; + userName.first[1].sex + &#39;\n &#39;+ userName.first[1].tel); 
 alert(userName.second[3].name + &#39; \n &#39; + userName.second[3].sex +&#39; \n &#39;+ userName.second[3].tel); 
 alert(userName.third[0].name + &#39; \n &#39; + userName.third[0].sex + &#39; \n &#39;+ userName.third[0].tel);
登入後複製

说到 JSON,就不得不提一下 JSONP。JSONP (JSON with Padding) 是 JSON 的一种 "使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。可用于解决主流浏览器的跨域数据访问的问题。为什么我们从不同的域(网站)访问数据需要一个特殊的技术 (JSONP) 呢?这是因为同源策略。同源策略,它是由 Netscape 提出的一个著名的安全策略,现在所有支持 JavaScript 的浏览器都会使用这个策略。由于该策略,一般来说位于 server1 的 demo.com 的网页无法与不是 server1 的 demo.com 的网页的服务器沟通,而 HTML 的

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!