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('一共有: ' + sum + '元'); //返回:一共有: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语句" + '<br>'); document.write("还没抛出错误" + '<br>'); alert(x); //抛出错误 alert('123'); //没被执行 } catch(e){ document.write("捕捉到错误,开始执行catch语句" + '<br>'); document.write("错误类型: " + e.name + '<br>'); document.write("错误信息: " + e.message); alert('x'); }
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 = 'red'; if(x == '') throw '输入不能为空'; if(isNaN(x)) throw '请输入数字'; var num = [7,8,9]; for(var i=0; i<num.length; i++){ if(x == num[i]){ throw '该数字已经存在'; } } if(x == 0){ throw '输入不能为0'; } else if(x > 10){ throw '数字太大了'; } else if(x <= 3){ throw '数字太小了'; } else{ y.style.color = 'green'; y.innerHTML = 'OK'; } } catch(e){ y.innerHTML = '错误提示:' + e + '!'; } } </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('第' + (i+1) + '个数据是:' + arr[i]); } alert(typeof i); //返回:number //数组使用for...in循环 for(var i in arr){ alert('第' + (i+1) + '个数据是:' + arr[i]); } alert(typeof i); //返回:string //JSON使用for...in循环 for(var i in json){ alert('第' + i + '个数据是:' + 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 = '大白'; </script> </body>
(4)、JSON 字符串对象
var str = '{"name":"小明", "sex":"男", "age":21}'; 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 + ' \n ' + userName.first[1].sex + '\n '+ userName.first[1].tel); alert(userName.second[3].name + ' \n ' + userName.second[3].sex +' \n '+ userName.second[3].tel); alert(userName.third[0].name + ' \n ' + userName.third[0].sex + ' \n '+ userName.third[0].tel);
说到 JSON,就不得不提一下 JSONP。JSONP (JSON with Padding) 是 JSON 的一种 "使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。可用于解决主流浏览器的跨域数据访问的问题。为什么我们从不同的域(网站)访问数据需要一个特殊的技术 (JSONP) 呢?这是因为同源策略。同源策略,它是由 Netscape 提出的一个著名的安全策略,现在所有支持 JavaScript 的浏览器都会使用这个策略。由于该策略,一般来说位于 server1 的 demo.com 的网页无法与不是 server1 的 demo.com 的网页的服务器沟通,而 HTML 的