4、邏輯控制語(yǔ)句
4.1條件結(jié)構(gòu)
條件結(jié)構(gòu)分為if結(jié)構(gòu)和switch結(jié)構(gòu)。
通常在寫代碼時(shí)棋蚌,您總是需要為不同的決定來(lái)執(zhí)行不同的動(dòng)作。您可以在代碼中使用條件語(yǔ)句來(lái)完成該任務(wù)。
在 JavaScript 中附鸽,我們可使用以下條件語(yǔ)句:
if 語(yǔ)句?- 只有當(dāng)指定條件為 true 時(shí)脱拼,使用該語(yǔ)句來(lái)執(zhí)行代碼。
if...else 語(yǔ)句?- 當(dāng)條件為 true 時(shí)執(zhí)行代碼坷备,當(dāng)條件為 false 時(shí)執(zhí)行其他代碼熄浓。
if...else if....else 語(yǔ)句- 使用該語(yǔ)句來(lái)選擇多個(gè)代碼塊之一來(lái)執(zhí)行。
switch 語(yǔ)句?- 使用該語(yǔ)句來(lái)選擇多個(gè)代碼塊之一來(lái)執(zhí)行省撑。
4.1.1if 結(jié)構(gòu)
只有當(dāng)指定條件為 true 時(shí)赌蔑,該語(yǔ)句才會(huì)執(zhí)行代碼。
語(yǔ)法:
if(condition)
{
//當(dāng)條件為true時(shí)執(zhí)行代碼
}
請(qǐng)使用小寫的if竟秫。使用大寫字母(IF)會(huì)生成javaScript錯(cuò)誤娃惯!
if...else 語(yǔ)句
請(qǐng)使用 if....else 語(yǔ)句在條件為 true 時(shí)執(zhí)行代碼,在條件為 false 時(shí)執(zhí)行其他代碼肥败。
語(yǔ)法:
if (condition)
{
//當(dāng)條件為true時(shí)執(zhí)行的代碼
}
else
{
//當(dāng)條件不為true時(shí)執(zhí)行的代碼
}
代碼風(fēng)格建議:
? if(condition)
{
doSomething();
}
else
? {
doSomethingElse();
}
javaScript代碼的這種風(fēng)格繼承自java趾浅,這在java編程語(yǔ)言的編程規(guī)范中有明確規(guī)定。在Crockford的編程規(guī)范馒稍、jquery核心風(fēng)格指南皿哨、SqroutCore編程風(fēng)格指南、
Google的javaScript風(fēng)格指南以及Dojo編程風(fēng)格指南中都出現(xiàn)過(guò)纽谒。
相關(guān)示例:
//錯(cuò)誤的寫法
if (condition) {
doSomething ();
}
doSomethingElse ();
//錯(cuò)誤的寫法
if (condition) {
doSomething();
doSomethingElse();
}
//不好的寫法,盡管這是合法的javaScript的代碼
if (condition) ?
doSomething();
//不好的寫法,盡管這是合法的javaScript的代碼
if (condition) doSomething();
//不好的寫法,盡管這是合法的javaScript的代碼
if (condition) ?{?doSomething();?}
?//好的寫法
if (condition) ?{?
doSomething();?
}
4.1.2 switch 結(jié)構(gòu)
請(qǐng)使用switch語(yǔ)句來(lái)選擇要執(zhí)行的多個(gè)代碼塊之一证膨。
語(yǔ)法:
switch (n){
case 1:
//執(zhí)行代碼塊1
break;
case 2:
//執(zhí)行代碼塊2
break;
default:
//n與 case 1 和 case 2 不同執(zhí)行的代碼
}
工作原理:
首先設(shè)置表達(dá)式n(通常是一個(gè)變量)。隨后表達(dá)式的值會(huì)與結(jié)構(gòu)中的每個(gè)case的值做比較鼓黔。則與該case關(guān)聯(lián)的代碼塊會(huì)被執(zhí)行央勒,請(qǐng)使用break來(lái)阻止代碼自動(dòng)地向下一個(gè)case運(yùn)行。
default的關(guān)健詞使用:
請(qǐng)使用default關(guān)健詞來(lái)規(guī)定匹配不存在時(shí)做的事情澳化,使用時(shí)視業(yè)務(wù)情況而定崔步。也可以在case后加個(gè)break或最后一個(gè)case后直接結(jié)束。
相關(guān)示例:
風(fēng)格一:
switch (condition){
//明顯的依次執(zhí)行
case "first":
//代碼
break;
case "second":
//代碼
break;
case "third":
//代碼
/* fall through */
default:
//代碼
}
本人比較習(xí)慣使用此風(fēng)格肆捕,和java語(yǔ)法是一樣的刷晋。
風(fēng)格二:
switch(condition) {
case "first":
//代碼
break;
case "second":
//代碼
break;
case "third":
//代碼
break;
default:
//代碼
}
此風(fēng)格被Crockford的編程規(guī)范和Dojo編程風(fēng)格指南所提倡盖高。
4.2循環(huán)結(jié)構(gòu)
如果您希望一遍又一遍地運(yùn)行相同的代碼慎陵,并且每次的值都不同,那么使用循環(huán)是很方便的喻奥。
不同類型的循環(huán):
javaScript支持不同類型的循環(huán):
for - 循環(huán)代碼塊一定的次數(shù)
for/in,for/each - 循環(huán)遍歷對(duì)象的屬性
while - 當(dāng)指定的條件為true時(shí)循環(huán)指定的代碼塊
do/while - 同樣當(dāng)指定的條件為true時(shí)循環(huán)指定的代碼塊
4.2.1 for循環(huán)
for循環(huán)是您在希望創(chuàng)建循環(huán)時(shí)常會(huì)用到的工具席纽。
下面是for循環(huán)的語(yǔ)法:
for (語(yǔ)句 1;語(yǔ)句 2撞蚕; 語(yǔ)句 3)
{
//被執(zhí)行的代碼塊
}
語(yǔ)句 1∪筇荨(代碼塊)開(kāi)始前執(zhí)行 starts
語(yǔ)句 2 定義運(yùn)行循環(huán)(代碼塊)的條件
語(yǔ)句 3 在循環(huán)(代碼塊)已被執(zhí)行之后執(zhí)行
?實(shí)例1:
for (var i=0;i<5;i++){
x=x+"該數(shù)字為"+i+"<br>";
}
從上面的例子中,您可以看到:
語(yǔ)句1在循環(huán)開(kāi)始之前設(shè)置變量初始化(var i=0)。
語(yǔ)句2定義循環(huán)運(yùn)行的條件(i 必須小于5)纺铭。
語(yǔ)句3在每次代碼塊已被執(zhí)行后增加一個(gè)值(i++)寇钉。
實(shí)例2:
var i=0,len=cars.length;
for (; i<len;){
document.write(cars[i]+"<br>");
i++;
}
語(yǔ)句1是可選的,可以在循環(huán)外進(jìn)行定義并進(jìn)行初始化舶赔。
語(yǔ)句2是用于評(píng)估初始變量的條件扫倡,同樣也是可選。
語(yǔ)句3同樣也是可選的竟纳,有多種用法如:增量可以是負(fù)數(shù)(i--),或者更大(i=i+15).通常會(huì)增加初始變量的值撵溃。
4.2.2.1 for/in循環(huán)
for/in語(yǔ)句循環(huán)遍歷對(duì)象的屬性:
語(yǔ)法:
for (variable in object){
}
實(shí)例:
var person=(fname:"json",lname:"Doe",age:25);
for (x in person){
txt=txt+person[x];
}
注意:for...in循環(huán)中的代碼塊將針對(duì)每個(gè)屬性執(zhí)行一次。
相關(guān)示例:
//不好的用法
var values = [1,2,3,4,5,6,7],i;
for (i in values){
process(items[i]);
}
//好的用法
var prop;
for (prop in object){
console.log("Property name is") + prop;
console.log("Property value is" + object[prop]);
}
4.2.2.2 for/each循環(huán)即迭代循環(huán)(由于會(huì)影響性能等原因不建議使用)
for/each語(yǔ)句循環(huán)遍歷對(duì)象類型變量的值:
語(yǔ)法:
for(元素類型t 元素變量x : 遍歷對(duì)象obj){
//引用了x的javaScript語(yǔ)句;
}
相關(guān)示例:
var?arr[]?=?{2,?3,?1}锥累,var x=null;
document.write("----1----排序前的一維數(shù)組");
for?(x?:?arr)?{
? document.write(x); ??//逐個(gè)輸出數(shù)組元素的值
}
4.2.3 while循環(huán)(建議不使用)
while循環(huán)會(huì)在指定條件為真時(shí)循環(huán)執(zhí)行代碼塊缘挑。
語(yǔ)法:
while (條件)
{
//需要執(zhí)行的代碼
}
相關(guān)示例:
while (i<5)
{
x=x+"The number is"+i+"<br>";
}
如果您忘記增加條件中所用變量,該循環(huán)永遠(yuǎn)不會(huì)結(jié)束桶略。這可能導(dǎo)致瀏覽器崩潰语淘。
注意:此循環(huán)在嚴(yán)格模式下是明令禁止使用的,Crockford的編程規(guī)范和Google的javaScript風(fēng)格指南禁止使用while循環(huán)际歼。
4.2.4 do/while 循環(huán)
do/while循環(huán)是while循環(huán)的變體亏娜。該循環(huán)會(huì)在檢查條件是否為真之前執(zhí)行一次代碼塊,然后如果條件為真的話蹬挺,就會(huì)重復(fù)這個(gè)循環(huán)维贺。
語(yǔ)法:
do
{
//需要執(zhí)行的代碼
}
while(條件);
實(shí)例:
do
{
x=x+"The number is"+i+"<br>";
i++;
}
while (i<5);
別忘記增加條件中所用變量的值,否則循環(huán)永遠(yuǎn)不會(huì)結(jié)束巴帮。
4.3循環(huán)中斷
4.3.1 break語(yǔ)句
? 實(shí)例:
for (i=0;i<10;i++)
{
if (i==3)
{
break;
}
x=x + "The number is"+i+"<br>";
?}
4.3.2 Continue語(yǔ)句
實(shí)例:
for (i=0;i<=10;i++)
{
if (i==3) continur;
x=x +"The number is" + i +"<br>";
}
4.3.3 使用javaScript標(biāo)簽跳出循環(huán)(由于會(huì)破壞業(yè)務(wù)邏輯所以不建議使用)
標(biāo)簽:
label:
statements
語(yǔ)法:
break labelname;
? continue labelname;
實(shí)例:
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "
");
document.write(cars[1] + "
");
document.write(cars[2] + "
");
break list;
document.write(cars[3] + "
");
document.write(cars[4] + "
");
document.write(cars[5] + "
");
}
5溯泣、注釋與語(yǔ)法規(guī)范
我們可以添加注釋來(lái)對(duì)javaScript進(jìn)行解釋,或者提高代碼的可讀性
單行注釋實(shí)例:
//輸出標(biāo)題:
document.getElementById(“myH1”).innerHTML="歡迎來(lái)到我的主頁(yè)";
//輸出段落:
document.getElementById("myP").innerHTML="這是我的第一個(gè)段落";
多行注釋實(shí)例:
/*
下面的這些代碼會(huì)輸出
一個(gè)標(biāo)題和一個(gè)段落
并將代表主頁(yè)的開(kāi)始
*/
document.getElementById("myH1").innerHTML="歡迎來(lái)到我的主頁(yè)";
document.getElementById("myP").innerHTML="這是我的第一個(gè)段落榕茧。";
javaScript代碼規(guī)范:
1垃沦、縮進(jìn)
建議每行的層級(jí)使用4個(gè)空格完成,避免使用制表符(Tab)進(jìn)行縮進(jìn)用押。
//好的寫法
if (true){
doSomething();
}
2肢簿、行的長(zhǎng)度
每行長(zhǎng)度不應(yīng)該超過(guò)80個(gè)字符。如果一行多于80個(gè)字符蜻拨,應(yīng)當(dāng)在一個(gè)運(yùn)算符(逗號(hào)池充,加號(hào)等)后換行。下一行應(yīng)當(dāng)增加兩級(jí)縮進(jìn)(8個(gè)字符)缎讼。
//好的寫法
doSomething();
//不好的寫法:第二行只有4個(gè)空格的縮進(jìn)
doSomething(argument1,argument2,argument3,argument4,argument5);
//不好的寫法:在運(yùn)算符之前換行
doSomething(argument1,argument2,argument3,argument3,argument4,argument5);
3收夸、原始值
字符串應(yīng)當(dāng)始終使用雙引號(hào)(避免使用單引號(hào))且保持一行。避免在字符串中使用斜線另起一行血崭。
//好的寫法
var name = "Nicholas";
//不好的寫法:?jiǎn)我?hào)
var name = 'Nicholas';
//不好的寫法:?jiǎn)我?hào)
var name = 'Nicholas';
//不好的寫法:字符串結(jié)束之前換行
var longString ="Here's the story, of a man \named Brady.
數(shù)字應(yīng)當(dāng)使用十進(jìn)制整數(shù)卧惜,科學(xué)計(jì)數(shù)法表示整數(shù)厘灼,十六進(jìn)制整數(shù),或者十進(jìn)制浮點(diǎn)小數(shù)咽瓷,小數(shù)點(diǎn)前后應(yīng)當(dāng)至少保留一位數(shù)字设凹。避免使用八進(jìn)制直接量。
//好的寫法
var count =10;
//好的寫法
var price = 10.0;
var price = 10.00;
//好的寫法
var num = 0xA2;
//好的寫法
var num = 1e23;
//不好的寫法:十進(jìn)制數(shù)字以小數(shù)點(diǎn)結(jié)尾
var price = 10.0;
//不好的寫法:十進(jìn)制數(shù)字以小數(shù)點(diǎn)開(kāi)頭
var price = .1;
//不好的寫法:八進(jìn)制(base 8)寫法已廢棄
var num = 010;
特殊值null除了下述情況下應(yīng)當(dāng)避免使用茅姜。
用來(lái)初始化一個(gè)變量围来,這個(gè)變量可能被賦值為一個(gè)對(duì)象
用來(lái)和一個(gè)已經(jīng)初始化的變量比較,這個(gè)變量可以是也可以不是一個(gè)對(duì)象匈睁。
當(dāng)函數(shù)的參數(shù)期望是對(duì)象時(shí)监透,被用作對(duì)象參數(shù)傳入。
當(dāng)函數(shù)的返回值期望是對(duì)象時(shí)航唆,被用作返回值傳出胀蛮。
例如:
//好的寫法
var person = null;
//好的寫法
function getPerson () {
if (condition) {
return new Person("Nicholas");
} else {
return null;
}?
}
//好的寫法
var person = getPerson() ;
if (person != null){
doSomething();
}
//不好的寫法:和一個(gè)未被初始化的變量比較
var person;
if (person !=null){
doSomething();
}
//不好的寫法:通過(guò)測(cè)試判斷某個(gè)參數(shù)是否被傳遞
function doSomething ( arg1,arg2,arg3,arg4){
if(arg4 != null){
doSomethingElse();
}
}
避免使用特殊值undefind。判斷一個(gè)變量是否定義應(yīng)當(dāng)使用typeof操作符糯钙。
//好的寫法
if (typeof variable = "undefined") {
//do something
}
//不好的寫法:使用了undefined直接量
if( variable == undefined ) {
//do something
}
4粪狼、運(yùn)算符間距
二元運(yùn)算符前后必須使用一個(gè)空格來(lái)保持表達(dá)式的整潔。操作符包括賦值運(yùn)算符和邏輯運(yùn)算符任岸。
//好的寫法
var found = (values[i]===item);
//好的寫法
if (found && (count>10)){
doSomething ();
}
//好的寫法
for (i=0;i<count;i++){
process(i);
}
//不好的寫法:丟失了空格
var found = (value[i] === item);
//不好的寫法:丟失了空格
if (found[i]&&(count>10)){
doSomething();
}
//不好的寫法:丟失了空格
for ( i=0; i<count;i++){
process(i);
}
5再榄、括號(hào)間距
//好的寫法
var found = (values[i] === item);
//好的寫法
if(found && (count>10)){
doSomething ();
}
//好的寫法
for (i=0;i<count;i++) {
process(i);
}
//不好的寫法:左括號(hào)之后有額外的空格
var found =(values[i]===item);
//不好的寫法:右括號(hào)之前后有額外的空格
if (found && count >10){
doSomething ();
}
//不好的寫法:參數(shù)兩邊有額外的空格
for (i=0;i<count;i++) {
process(i);
}
6、對(duì)象直接量
對(duì)象直接量應(yīng)當(dāng)使用如下格式享潜。
起始左花括號(hào)應(yīng)當(dāng)同表達(dá)式保持同一行困鸥。
每個(gè)屬性的名值對(duì)應(yīng)保持一個(gè)縮進(jìn),第一個(gè)屬性應(yīng)當(dāng)在左花括號(hào)后另起一行剑按。
每個(gè)屬性的名值對(duì)應(yīng)使用不含引號(hào)的屬性名疾就,其后緊跟一個(gè)冒號(hào)(之前不含空格),而后是值艺蝴。
倘若屬性值是函數(shù)類型猬腰,函數(shù)體應(yīng)當(dāng)在屬性名之下另一行,而且其前后均應(yīng)保留一個(gè)空行猜敢。
一組相關(guān)的屬性前后可以插入空行以提升代碼的可讀性姑荷。
結(jié)束的右花括號(hào)應(yīng)當(dāng)獨(dú)占一行砌庄。
例如:
//好的寫法
var object = {
key1: value1,
key2: value2,
func: function () {
//做些什么
}而涉,
key3: value3
};
//不好的寫法:不恰當(dāng)?shù)目s進(jìn)
var object={
key1:value1 ;
key2:value2 ;
}
//不好的寫法:函數(shù)體周圍缺少空行
var object = {
key1: value1,
key2: value2.
func:function (){
//做什么
}
key3:value3 ;
}
當(dāng)對(duì)象字面量作為函數(shù)參數(shù)時(shí)糯俗,如果值是變量铜异,起始花括號(hào)應(yīng)當(dāng)同函數(shù)名在同一行。
所有其余先前列出的規(guī)則同樣適用劈伴。
//好的寫法
doSomething({
key1: value1,
key2: value2
});
//不好的寫法:所有代碼在一行上
doSomething({ key1: value1,key2: value2 });
7豫柬、注釋
頻繁地使用注釋有助于他人理解你的代碼。如下情況應(yīng)當(dāng)使用注釋陨闹。
代碼晦澀難懂
可能被誤認(rèn)為錯(cuò)誤的代碼楞捂。
必要但并不明顯的針對(duì)特定瀏覽器的代碼。
對(duì)于對(duì)象趋厉、方法或?qū)傩哉郑晌臋n是有必要的(使用恰當(dāng)?shù)奈臋n注釋)。
7.1 ? 單行注釋
?單行注釋是應(yīng)當(dāng)用來(lái)說(shuō)明一行代碼或者一組相關(guān)的代碼君账。單行注釋可能有三種使用方式繁堡。
獨(dú)占一行的注釋,用來(lái)解釋下一行代碼乡数。
在代碼行的尾部的注釋椭蹄,用來(lái)解釋它之前的代碼。
多行净赴,用來(lái)注釋掉一個(gè)代碼塊绳矩。
這里有一些示例代碼。
//好的寫法
if (condition){
//如果代碼執(zhí)行到這里玖翅,則表明通過(guò)了所有安全性檢查翼馆。
allowed();
}
//不好的寫法:注釋之前沒(méi)有空行。
if (condition) {
//如果代碼執(zhí)行到這里金度,則表明通過(guò)了所有安全性檢查
allowed();
}
//不好的寫法:錯(cuò)誤的縮進(jìn)
if (condition){
//如果代碼執(zhí)行到這里应媚,則表明通過(guò)了所有安全性檢查
alloed();
}
//不好的寫法:這里應(yīng)當(dāng)用多行注釋
//接下來(lái)的這段代碼非常難,那么猜极,讓我詳細(xì)解釋一下
//這段代碼的作用是首先判斷條件是否為真
//只有為真時(shí)才會(huì)執(zhí)行中姜。這里的條件中通過(guò)
//多個(gè)函數(shù)計(jì)算出來(lái)的,在整個(gè)會(huì)話生命周期內(nèi)
//這個(gè)值是可以被修改的
if (condition) {
//如果代碼執(zhí)行到這里跟伏,則表明通過(guò)了所有安全性檢查
allowrd();
}
對(duì)于代碼行尾單行注釋的情況扎筒,應(yīng)確保代碼結(jié)尾同住注釋之間至少一個(gè)縮進(jìn)。
//好的寫法
var result = something +somethingElse;// somethingElse will never be null
//不好的寫法
var result = something + somethingElse;//somethingElse will never be null
注釋一個(gè)代碼塊時(shí)在連續(xù)多行使用單行注釋是唯一可以接受的情況酬姆。多行注釋不應(yīng)當(dāng)在這種情況下使用嗜桌。
//好的寫法
//if (condition)?{
// doSomething();
// thenDoSomethingElse();
//}
7.2 多行注釋