JavaScript if語(yǔ)句
If?語(yǔ)句用于在代碼中做條件判斷。關(guān)鍵字?if?告訴 JavaScript 在小括號(hào)中的條件為真的情況下去執(zhí)行定義在大括號(hào)里面的代碼。這種條件被稱為?Boolean?條件,因?yàn)樗麄冎豢赡苁?true(真)或?false(假)。
當(dāng)條件的計(jì)算結(jié)果為?true,程序執(zhí)行大括號(hào)內(nèi)的語(yǔ)句。當(dāng)布爾條件的計(jì)算結(jié)果為?false,大括號(hào)內(nèi)的代碼將不會(huì)執(zhí)行。
偽代碼
if(條件為真){
語(yǔ)句被執(zhí)行
}
示例
function test(myCondition) {
if (myCondition) {
?return "It was true";
}
return "It was false";
}
test(true);// returns "It was true"
test(false); // returns "It was false"
當(dāng)?test?被調(diào)用,并且傳遞進(jìn)來(lái)的參數(shù)值為?true,if?語(yǔ)句會(huì)計(jì)算?myCondition?的結(jié)果,看它是真還是假。如果條件為?true,函數(shù)會(huì)返回?"It was true"。當(dāng)?test?被調(diào)用,并且傳遞進(jìn)來(lái)的參數(shù)值為?false,myCondition不為?true,并且不執(zhí)行大括號(hào)后面的語(yǔ)句,函數(shù)返回?"It was false"。
任務(wù):在函數(shù)內(nèi)部創(chuàng)建一個(gè)?if?語(yǔ)句,如果該參數(shù)?wasThatTrue?值為?true,返回?"That was
true",否則,并返回?"That was false"。


JavaScript else語(yǔ)句
當(dāng)if語(yǔ)句的條件為真,大括號(hào)里的代碼執(zhí)行,那如果條件為假呢?
這時(shí)候需要寫(xiě)一個(gè)else語(yǔ)句,當(dāng)條件為假時(shí)執(zhí)行相應(yīng)的代碼。
if (num > 10) {
return "Bigger than 10";
} else {
return "10 or Less";
}
任務(wù):結(jié)合多個(gè)if語(yǔ)句為一個(gè)if/else語(yǔ)句。


JavaScript else if語(yǔ)句
如果你有多個(gè)條件語(yǔ)句,你可以通過(guò)else if語(yǔ)句把?if語(yǔ)句鏈起來(lái)。
if (num > 15) {
return "Bigger than 15";
} else if (num < 5) {
return "Smaller than 5";
} else {
return "Between 5 and 15";
}
任務(wù):使用else if實(shí)現(xiàn)同樣的效果。


JavaScript if、else if語(yǔ)句中代碼的執(zhí)行順序
if、else
if語(yǔ)句中代碼的執(zhí)行順序是很重要的。
在條件判斷語(yǔ)句中,代碼的執(zhí)行順序自上而下,所以必須區(qū)分清楚代碼的執(zhí)行順序。
這有兩個(gè)例子。
第一個(gè)例子:
function foo(x) {
if (x < 1) {
return "Less than one";
} else if (x < 2) {
return "Less than two";
} else {
return "Greater than or equal to two";
}
}
第二個(gè)例子更改了代碼的執(zhí)行順序:
function bar(x) {
if (x < 2) {
return "Less than two";
} else if (x < 1) {
return "Less than one";
} else {
return "Greater than or equal to two";
}
}
這兩個(gè)函數(shù)看起來(lái)相似,實(shí)則大不相同。
foo(0) // "Less than one"
bar(0) // "Less than two"
任務(wù):更改函數(shù)的邏輯順序以便通過(guò)所有的測(cè)試用例。


JavaScript 同時(shí)使用if、else if 語(yǔ)句
if/else?語(yǔ)句串聯(lián)在一起可以實(shí)現(xiàn)復(fù)雜的邏輯,這是多個(gè)if/else if?語(yǔ)句串聯(lián)在一起的偽代碼:
if (condition1) {
statement1
} else if (condition2) {
statement2
} else if (condition3) {
statement3
. . .
} else {
statementN
}
任務(wù)
把if/else
if語(yǔ)句串聯(lián)起來(lái)實(shí)現(xiàn)下面的邏輯:
num < 5- return"Tiny"
num <10-return "Small"
num < 15-return "Medium"
num < 20-return "Large"
num >= 20- return"Huge"


Javascript 邏輯運(yùn)算綜合實(shí)戰(zhàn)
在高爾夫golf游戲中,每個(gè)洞都有自己的標(biāo)準(zhǔn)桿數(shù)par,代表著距離。根據(jù)你把球打進(jìn)洞所揮桿的次數(shù)strokes,可以計(jì)算出你的高爾夫水平。
函數(shù)將會(huì)傳送2個(gè)參數(shù),分別是標(biāo)準(zhǔn)桿數(shù)par?和 揮桿次數(shù)strokes?,根據(jù)下面的表格返回正確的水平段位。
StrokesReturn
1"Hole-in-one!"
<= par - 2"Eagle"
par - 1"Birdie"
par"Par"
par + 1"Bogey"
par + 2"Double? Bogey"
>= par + 3"Go? Home!"
par?和?strokes?必須是數(shù)字而且是正數(shù)。


JavaScript 使用switch語(yǔ)句進(jìn)行多選項(xiàng)選擇
如果你有非常多的選項(xiàng)需要選擇,可以使用switch語(yǔ)句。根據(jù)不同的參數(shù)值會(huì)匹配上不同的case分支,語(yǔ)句會(huì)從第一個(gè)匹配的case分支開(kāi)始執(zhí)行,直到碰到break就結(jié)束。
這是一個(gè)偽代碼案例:
switch (num) {
case value1:
statement1;
break;
case value2:
statement2;
break;
...
case valueN:
statementN;
break;
}
測(cè)試case?值使用嚴(yán)格等于,break關(guān)鍵字告訴javascript停止執(zhí)行語(yǔ)句。如果沒(méi)有break關(guān)鍵字,下一個(gè)語(yǔ)句會(huì)繼續(xù)執(zhí)行。
任務(wù):寫(xiě)一個(gè)測(cè)試?val的switch語(yǔ)句,并且根據(jù)下面的條件來(lái)設(shè)置不同的answer:
1-"alpha"
2-"beta"
3-"gamma"
4-"delta"


JavaScript 在switch語(yǔ)句中添加default語(yǔ)句
在switch?語(yǔ)句中你可能無(wú)法用case來(lái)指定所有情況,這時(shí)你可以添加default語(yǔ)句。當(dāng)再也找不到case匹配的時(shí)候default語(yǔ)句會(huì)執(zhí)行,非常類似于if/else組合中的else語(yǔ)句。
default語(yǔ)句應(yīng)該是最后一個(gè)case。
switch (num) {
case value1:
statement1;
break;
case value2:
statement2;
break;
...
default:
defaultStatement;
}
任務(wù):寫(xiě)一個(gè)根據(jù)下面的條件來(lái)設(shè)置answer的switch語(yǔ)句:
"a"-"apple"
"b"-"bird"
"c"-"cat"
default-"stuff"


JavaScript switch語(yǔ)句中的多個(gè)相同選項(xiàng)判斷
如果switch語(yǔ)句中的case分支的break?語(yǔ)句漏掉了,后面的?case語(yǔ)句會(huì)一直執(zhí)行直到遇到break。如果你有多個(gè)輸入值和輸出值一樣,可以試試下面的switch語(yǔ)句:
switch(val) {
case 1:
case 2:
case 3:
result = "1, 2, or 3";
break;
case 4:
result = "4 alone";
}
分支1、2、3將會(huì)產(chǎn)生相同的輸出結(jié)果。
任務(wù):寫(xiě)一個(gè)根據(jù)下面的范圍來(lái)設(shè)置answer?的switch語(yǔ)句:1-3-"Low"
4-6-"Mid"
7-9-"High"
提示?你需要為每一個(gè)包含數(shù)字的范圍準(zhǔn)備一個(gè)answer語(yǔ)句。


JavaScript 使用switch語(yǔ)句替換串聯(lián)的if、else if語(yǔ)句
如果你有多個(gè)選項(xiàng)需要選擇,switch?語(yǔ)句寫(xiě)起來(lái)會(huì)比多個(gè)串聯(lián)的if/if
else語(yǔ)句容易些,譬如:
if (val === 1) {
answer = "a";
} else if (val === 2) {
answer = "b";
} else {
answer = "c";
}
可以被下面替代:
switch (val) {
case 1:
answer = "a";
break;
case 2:
answer = "b";
break;
default:
answer = "c";
}
任務(wù):把串聯(lián)的?if/if else?語(yǔ)句改成?switch?語(yǔ)句。


JavaScript 直接在函數(shù)中返回boolean值
所有的比較操作符返回的都是一個(gè)boolean值,要么是?true?要么是false?。
使用?if/else語(yǔ)句來(lái)做比較然后返回true或false已經(jīng)成為大家的共識(shí):
functionisEqual(a,b) {
if (a === b) {
return true;
} else {
return false;
}
}
因?yàn)?==?總是返回?true?或?false,所以我們可以直接返回比較的結(jié)果:
functionisEqual(a,b) {
return a === b;
}
任務(wù):移除isLess函數(shù)的if/else語(yǔ)句但不影響函數(shù)的功能。


JavaScript 在函數(shù)中使用return跳出函數(shù)
當(dāng)代碼執(zhí)行到return語(yǔ)句時(shí),函數(shù)返回一個(gè)結(jié)果就結(jié)束運(yùn)行了,return后面的語(yǔ)句根本不會(huì)執(zhí)行。
舉個(gè)栗子
function myFun() {
console.log("Hello");
return "World";
console.log("byebye")
}
myFun();
上面的代碼輸出"Hello"到控制臺(tái)、返回 "World",但沒(méi)有輸出"byebye",因?yàn)楹瘮?shù)遇到return語(yǔ)句就退出了。
任務(wù):修改函數(shù)abTest當(dāng)a或b小于0時(shí),函數(shù)立即返回一個(gè)undefined并退出。
提示記住undefined,是一個(gè)關(guān)鍵字,而不是一個(gè)字符串。


JavaScript 條件判斷算法綜合實(shí)戰(zhàn)
在賭場(chǎng)21點(diǎn)游戲中,玩家可以通過(guò)計(jì)算牌桌上已經(jīng)發(fā)放的卡牌的高低值來(lái)讓自己在游戲中保持優(yōu)勢(shì),這就叫21點(diǎn)算法。
根據(jù)下面的表格,每張卡牌都分配了一個(gè)值。如果卡牌的值大于0,那么玩家應(yīng)該追加賭注。反之,追加少許賭注甚至不追加賭注。
Count ChangeCards
+12, 3, 4, 5, 6
07, 8, 9
-110, 'J', 'Q', 'K','A'
你需要寫(xiě)一個(gè)函數(shù),實(shí)現(xiàn)21點(diǎn)算法,它根據(jù)參數(shù)?card的值來(lái)遞增或遞減變量count,函數(shù)返回一個(gè)由當(dāng)前count和?"Bet"(count>0)或"Hold"(count<=0) 拼接的字符串。注意count和"Bet"?或?"Hold"應(yīng)該用空格分開(kāi)。
例如:
"-3 Hold"
"5 Bet"
提示既然card的值為7、8、9時(shí),count值不變,那我們就可以忽略這種情況。


JavaScript 對(duì)象操作
你之前可能聽(tīng)說(shuō)過(guò)對(duì)象?object?。
對(duì)象和數(shù)組很相似,數(shù)組是通過(guò)索引來(lái)訪問(wèn)和修改數(shù)據(jù),對(duì)象是通過(guò)屬性來(lái)訪問(wèn)和修改數(shù)據(jù)的。
這是一個(gè)示例對(duì)象:
var cat = {
"name": "Whiskers",
"legs": 4,
"tails": 1,
"enemies": ["Water", "Dogs"]
};
對(duì)象適合用來(lái)存儲(chǔ)結(jié)構(gòu)化數(shù)據(jù),就和真實(shí)世界的對(duì)象一模一樣,比如一只貓。
任務(wù):創(chuàng)建一個(gè)叫做myDog的對(duì)象,它里面有這些屬性:?名稱"name"、?腿"legs",?尾巴"tails"、朋友"friends"。
你可以設(shè)置對(duì)象屬性為任何你想要的值,只要?"name"?是字符串、?"legs"?和?"tails"?是數(shù)字、"friends"?是數(shù)組。


JavaScript 使用點(diǎn)操作符.讀取對(duì)象屬性
有兩種方式訪問(wèn)對(duì)象屬性,一個(gè)是點(diǎn)操作符(.),一個(gè)是中括號(hào)操作符([])。
當(dāng)你知道屬性的名稱的時(shí)候,使用點(diǎn)操作符。
這是一個(gè)使用點(diǎn)操作符讀取對(duì)象屬性的例子:
var myObj = {
prop1: "val1",
prop2: "val2"
};
var prop1val = myObj.prop1; // val1
var prop2val = myObj.prop2; // val2
任務(wù):通過(guò)點(diǎn)操作符讀取對(duì)象testObj,把hat的屬性值賦給變量hatValue,把shirt的屬性值賦給shirtValue。


JavaScript 使用[]讀取對(duì)象屬性
第二種訪問(wèn)對(duì)象的方式就是中括號(hào)操作符([]),如果你想訪問(wèn)的屬性的名稱有一個(gè)空格,這時(shí)你只能使用中括號(hào)操作符([])。
這是一個(gè)使用中括號(hào)操作符([])讀取對(duì)象屬性的例子:
var myObj = {
"Space Name": "Kirk",
"More Space": "Spock"
};
myObj["Space Name"]; // Kirk
myObj['More Space']; // Spock
提示:屬性名稱中如果有空格,必須把屬性名稱用單引號(hào)或雙引號(hào)包裹起來(lái)。
任務(wù):用中括號(hào)操作符讀取對(duì)象testObj的屬性"an entree"值和屬性"the drink"值。


JavaScript 使用變量訪問(wèn)對(duì)象屬性
中括號(hào)操作符的另一個(gè)使用方式是用變量來(lái)訪問(wèn)一個(gè)屬性。當(dāng)你需要遍歷對(duì)象的屬性列表或查表時(shí),這種方式極為有用。
這有一個(gè)使用變量來(lái)訪問(wèn)屬性的例子:
var someProp ="propName";
var myObj = {
propName: "Some Value"
}
myObj[someProp]; // "Some Value"
還有更多:
var myDog ="Hunter";
var dogs = {
Fido: "Mutt",
Hunter:"Doberman",
Snoopie:"Beagle"
}
var breed = dogs[myDog]; // "Hunter"
console.log(breed)// "Doberman"
提示:當(dāng)我們通過(guò)變量名訪問(wèn)屬性的時(shí)候,不需要給變量名包裹引號(hào)。因?yàn)閷?shí)際上我們使用的是變量的值,而不是變量的名稱。
任務(wù):使用變量playerNumber,通過(guò)中括號(hào)操作符找到testObj中的16。


JavaScript 更新對(duì)象屬性
當(dāng)你創(chuàng)建了一個(gè)對(duì)象后,你可以用點(diǎn)操作符或中括號(hào)操作符來(lái)更新對(duì)象的屬性。
舉個(gè)例子,讓我們看看?ourDog:
var ourDog = {
"name": "Camper",
"legs": 4,
"tails": 1,
"friends": ["everything!"]
};
讓我們更改它的名稱為 "Happy Camper",這有兩種方式來(lái)更新對(duì)象的name屬性:
ourDog.name = "Happy Camper";
ourDog["name"] = "Happy Camper";
任務(wù):更新?myDog?對(duì)象的name屬性,讓它的名字從"Coder" 變成 "Happy Coder"。


JavaScript 給對(duì)象添加屬性
你也可以像更改屬性一樣給對(duì)象添加屬性。
看看我們是如何給ourDog添加?"bark"屬性:
ourDog.bark = "bow-wow";
或者
ourDog["bark"] = "bow-wow";
任務(wù):給myDog添加一個(gè)"bark"?屬性,設(shè)置它的值為狗的聲音,例如:"woof"。


JavaScript 刪除對(duì)象屬性
我們同樣可以刪除對(duì)象的屬性,例如:
delete ourDog.bark;
任務(wù):刪除myDog對(duì)象的"tails"屬性。


JavaScript 使用對(duì)象進(jìn)行查找值
對(duì)象和字典一樣,可以用來(lái)存儲(chǔ)鍵/值對(duì)。如果你的數(shù)據(jù)跟對(duì)象一樣,你可以用對(duì)象來(lái)查找你想要的值,而不是使用switch或if/else語(yǔ)句。當(dāng)你知道你的輸入數(shù)據(jù)在某個(gè)范圍時(shí),這種查找方式極為有效。
這是簡(jiǎn)單的反向字母表:
var alpha = {
1:"Z",
2:"Y",
3:"X",
4:"W",
...
24:"C",
25:"B",
26:"A"
};
alpha[2]; // "Y"
alpha[24]; // "C"
var value = 2;
alpha[value]; // "Y"
任務(wù):把switch語(yǔ)句轉(zhuǎn)化為一個(gè)叫做lookup的對(duì)象。


JavaScript 檢查對(duì)象屬性
有時(shí)檢查一個(gè)對(duì)象屬性是否存在是非常有用的,我們可以用.hasOwnProperty(propname)方法來(lái)檢查對(duì)象是否有該屬性。如果有返回true,反之返回?false。
舉例
var myObj = {
top: "hat",
bottom: "pants"
};
myObj.hasOwnProperty("top");// true
myObj.hasOwnProperty("middle"); // false
任務(wù):修改函數(shù)checkObj檢查myObj是否有checkProp屬性,如果屬性存在,返回屬性對(duì)應(yīng)的值,如果不存在,返回?"Not Found"。
注意:如果你需要通過(guò)變量來(lái)訪問(wèn)對(duì)象的屬性值,請(qǐng)用中括號(hào)操作符,點(diǎn)操作符不支持變量。


JavaScript JSON操作
JavaScript
Object Notation 簡(jiǎn)稱?JSON,它使用JavaScript對(duì)象的格式來(lái)存儲(chǔ)數(shù)據(jù)。JSON是靈活的,因?yàn)樗试S?數(shù)據(jù)結(jié)構(gòu)?是?字符串,數(shù)字,布爾值,字符串,和?對(duì)象?的任意組合。
這里是一個(gè)JSON對(duì)象的示例:
var ourMusic = [
{
"artist": "Daft Punk",
"title": "Homework",
"release_year": 1997,
"formats": [
"CD",
"Cassette",
"LP" ],
"gold": true
}
];
這是一個(gè)對(duì)象數(shù)組,并且對(duì)象有各種關(guān)于專輯的?詳細(xì)信息。它也有一個(gè)嵌套的?formarts的數(shù)組。附加專輯記錄可以被添加到數(shù)組的最上層。
提示?數(shù)組中有多個(gè) JSON 對(duì)象的時(shí)候,對(duì)象與對(duì)象之間要用逗號(hào)隔開(kāi)。
任務(wù):添加一個(gè)新專輯到?myMusic?的JSON對(duì)象。添加?artist?和?title?字符串,release_year?數(shù)字和?formats?字符串?dāng)?shù)組。


JavaScript 獲取JSON屬性值
通過(guò)串聯(lián)起來(lái)的點(diǎn)操作符或中括號(hào)操作符來(lái)訪問(wèn)JSON對(duì)象的嵌套屬性。
下面是一個(gè)嵌套的JSON對(duì)象:
var ourStorage = {
"desk": {
"drawer": "stapler"
},
"cabinet": {
"top drawer": {
"folder1": "a file",
"folder2": "secrets"
},
"bottom drawer": "soda"
}
}
ourStorage.cabinet["top drawer"].folder2;// "secrets"
ourStorage.desk.drawer; // "stapler"
任務(wù)
檢索JSON對(duì)象?myStorage?中嵌套屬性?glove box?的值。因?yàn)閷傩缘拿謳в锌崭?,?qǐng)使用中括號(hào)操作符來(lái)訪問(wèn)屬性的值。


JavaScript 獲取JSON數(shù)組值
正如我們?cè)谇懊娴睦铀?jiàn),JSON對(duì)象可以嵌套對(duì)象和數(shù)組。與訪問(wèn)嵌套對(duì)象一樣,用中括號(hào)操作符同樣可以訪問(wèn)嵌套數(shù)組。
下面是如何訪問(wèn)嵌套數(shù)組的例子:
var ourPets = {
"cats": [
"Meowzer",
"Fluffy",
"Kit-Cat"
],
"dogs": [
"Spot",
"Bowser",
"Frankie"
]
};
ourPets.cats[1]; // "Fluffy"
ourPets.dogs[0]; // "Spot"
任務(wù):使用點(diǎn)操作符和中括號(hào)操作符來(lái)檢索變量?myPlants?的第二棵樹(shù)。


JavaScript JSON集合操作
右邊有一個(gè)JSON對(duì)象,代表著你的專輯集。每一張專輯由一個(gè)唯一的id標(biāo)識(shí),并具有多種屬性。但并非所有的專輯都有完整的信息。
寫(xiě)一個(gè)函數(shù),它有個(gè)三個(gè)參數(shù),id、prop、?value。
如果?value !=''?而且prop != 'tracks',collectionCopy[id][prop]=value;。
如果?value !=''?而且prop == 'tracks',collectionCopy[id][prop].push(value);。
如果?value == ''?,delete collectionCopy[id][prop];。
謹(jǐn)記:函數(shù)返回的永遠(yuǎn)是整個(gè)對(duì)象。
提示?使用中括號(hào)操作符來(lái)訪問(wèn)對(duì)象的變量屬性。





JavaScript 使用for語(yǔ)句循環(huán)迭代
一個(gè)條件語(yǔ)句只能執(zhí)行一次代碼,而通過(guò)一個(gè)循環(huán)語(yǔ)句你可以多次執(zhí)行代碼。
JavaScript中最常見(jiàn)的循環(huán)就是“for循環(huán)”因?yàn)樗梢栽试S特定次數(shù)的循環(huán)。
for循環(huán)中的三個(gè)表達(dá)式用分號(hào)隔開(kāi):
for ([初始化]; [條件判斷]; [計(jì)數(shù)器])
初始化語(yǔ)句只會(huì)在執(zhí)行循環(huán)開(kāi)始之前執(zhí)行一次。它通常用于定義和設(shè)置你的循環(huán)變量。
條件判斷語(yǔ)句會(huì)在每一輪循環(huán)的開(kāi)始執(zhí)行,只要條件判斷為?true?就會(huì)繼續(xù)執(zhí)行循環(huán)。當(dāng)條件為?false的時(shí)候,循環(huán)將停止執(zhí)行。這意味著,如果條件在一開(kāi)始就為?false,這個(gè)循環(huán)將不會(huì)執(zhí)行。
計(jì)數(shù)器是在每一輪循環(huán)結(jié)束時(shí)執(zhí)行,通常用于遞增或遞減。
在下面的例子中,先初始化i = 0,條件?i < 5?為真,進(jìn)入第一次循環(huán),執(zhí)行大括號(hào)里的代碼,第一次循環(huán)結(jié)束。遞增i的值,條件判斷,就這樣依次執(zhí)行下去,直到條件判斷為假,整個(gè)循環(huán)結(jié)束。
var ourArray = [];
for (var i = 0; i < 5; i++) {
ourArray.push(i);
}
最終?ourArray?的值為?[0,1,2,3,4].
任務(wù):使用?for?循環(huán)把從 1 到 5 添加進(jìn)?myArray?中。


JavaScript 使用for語(yǔ)句循環(huán)按奇數(shù)順序迭代
for循環(huán)不必按照順序來(lái)迭代,通過(guò)更改我們的?表達(dá)式,我們可以按照偶數(shù)順序來(lái)迭代。
初始化?i = 0,當(dāng)?i < 10?的時(shí)候繼續(xù)循環(huán)。
i += 2?讓?i?每次循環(huán)之后增加2。
var ourArray = [];
for (var i = 0; i < 10; i += 2) {
ourArray.push(i);
}
循環(huán)結(jié)束后,ourArray?的值為?[0,2,4,6,8]。
讓我們改變?表達(dá)式,這樣我們可以用奇數(shù)來(lái)數(shù)。
任務(wù):寫(xiě)一個(gè)?for?循環(huán),把從1到9的奇數(shù)添加到?myArray。


JavaScript 使用for循環(huán)逆向迭代
for循環(huán)也可以逆向迭代,只要我們定義好合適的條件。
為了能夠從后往前兩兩倒數(shù),我們需要改變我們的?初始化,條件判斷?和?計(jì)數(shù)表達(dá)式。
我們讓?i = 10,并且當(dāng)?i > 0?的時(shí)候才繼續(xù)循環(huán)。我們使用?i-=2?來(lái)讓?i?每次循環(huán)遞減 2。
var ourArray = [];
for (var i=10; i > 0; i-=2) {
ourArray.push(i);
}
循環(huán)結(jié)束后,ourArray?的值為?[10,8,6,4,2]。
讓我們改變?初始化?和?計(jì)數(shù)表達(dá)式,這樣我們就可以按照奇數(shù)從后往前兩兩倒著數(shù)。
任務(wù):使用一個(gè)?for?循環(huán),把9到1的奇數(shù)添加進(jìn)?myArray。


JavaScript 使用for循環(huán)迭代輸出數(shù)組
JavaScript中的常見(jiàn)任務(wù)是迭代數(shù)組的內(nèi)容,一種方法是使用for循環(huán)。
下面的代碼將輸出數(shù)組arr?的每個(gè)元素到控制臺(tái):
var arr =[10,9,8,7,6];
for (var i=0; i < arr.length; i++) {
?console.log(arr[i]);
}
記住數(shù)組的索引從零開(kāi)始的,這意味著數(shù)組的最后一個(gè)元素的下標(biāo)是:數(shù)組的長(zhǎng)度 - 1。我們這個(gè)循環(huán)的?條件?是?i < arr.length,當(dāng)?i?的值為 長(zhǎng)度-1 的時(shí)候循環(huán)就停止了。
任務(wù):聲明并初始化一個(gè)變量?total?為?0。使用?for?循環(huán),使得?total?的值為?myArr?的數(shù)組中的每個(gè)元素的值的總和。


JavaScript 循環(huán)語(yǔ)句綜合實(shí)戰(zhàn)
如果你有一個(gè)二維數(shù)組,可以使用嵌套循環(huán)的邏輯,先遍歷外面的數(shù)組,再遍歷里面的子數(shù)組。下面是一個(gè)例子:
var arr = [
[1,2], [3,4], [5,6]
];
for (var i=0; i < arr.length; i++) {
for (var j=0; j < arr[i].length; j++) {
console.log(arr[i][j]);
}
}
這樣就可以一次輸出?arr?中的每個(gè)子元素。請(qǐng)注意,對(duì)于內(nèi)部循環(huán),我們可以通過(guò)?arr[i]?的?.length?來(lái)獲得子數(shù)組的長(zhǎng)度,因?yàn)?arr[i]?的本身就是一個(gè)數(shù)組。
任務(wù):修改函數(shù)?multiplyAll,以獲得?arr?內(nèi)部數(shù)組的每個(gè)數(shù)字相乘的結(jié)果?product。


JavaScript 使用while語(yǔ)句循環(huán)迭代
您可以使用循環(huán)多次運(yùn)行相同的代碼;
另一種類型的 JavaScript 循環(huán)被稱為while循環(huán),因?yàn)樗\(yùn)行“while”一個(gè)指定的條件為真,一旦該條件不再為真,就停止
var ourArray =[];???
var i = 0;???
while(i < 5) {???
ourArray.push(i);???
i++;???
}
讓我們嘗試通過(guò)將值推送到數(shù)組來(lái)獲得一個(gè)while循環(huán)
任務(wù):通過(guò)一個(gè)?while?循環(huán),把從 0 到 4 的值添加到?myArray?中。


JavaScript 使用循環(huán)語(yǔ)句查找通訊錄
我們有一個(gè)聯(lián)系人列表,里面存儲(chǔ)著不同聯(lián)系人的數(shù)組對(duì)象。
函數(shù)?lookUpProfile?有兩個(gè)預(yù)定義參數(shù):firstName值和prop屬性 。
該函數(shù)應(yīng)檢查firstName是實(shí)際聯(lián)系人的firstName,給定的屬性(prop)是該聯(lián)系人的屬性。
如果它們都存在,函數(shù)返回prop屬性對(duì)應(yīng)的值。
如果firstName?值不存在,返回?"No such contact"。
如果prop?屬性不存在,返回?"No such property"。


JavaScript 使用random()生成隨機(jī)小數(shù)
隨機(jī)數(shù)對(duì)于創(chuàng)建隨機(jī)行為很有用,計(jì)算機(jī)的行為只有兩種:確定性和隨機(jī)性。
而隨機(jī)數(shù)最適合用來(lái)創(chuàng)建這種隨機(jī)行為。
Math.random()用來(lái)生成一個(gè)在0(包括0)到1(不包括1)之間的隨機(jī)小數(shù),因此Math.random()可能返回0但絕不會(huì)返回1。
提示隨后的函數(shù)都會(huì)在return執(zhí)行前調(diào)用,所以我們可以直接返回Math.random()的值。
任務(wù):更改randomFunction?來(lái)生成一個(gè)隨機(jī)數(shù)取代?0。


JavaScript 使用random()生成隨機(jī)數(shù)
很好,我們可以生成隨機(jī)的小數(shù),但如果我們使用它來(lái)生成隨機(jī)的整數(shù),這將是更有用的機(jī)整數(shù)。
[if !supportLists]1.???[endif]用?Math.random()?生成一個(gè)隨機(jī)小數(shù)。
[if !supportLists]2.????[endif]把這個(gè)隨機(jī)小數(shù)乘以?20。
[if !supportLists]3.????[endif]用?Math.floor()?向下取整 獲得它最近的整數(shù)。
記住?Math.random()?永遠(yuǎn)不會(huì)返回?1。同時(shí)因?yàn)槲覀兪窃谟?Math.floor()?向下取整,所以最終我們獲得的結(jié)果不可能有?20。這確保了我們獲得了一個(gè)在0到19之間的整數(shù)。
把操作連綴起來(lái),代碼類似于下面:
Math.floor(Math.random() * 20);
我們先調(diào)用?Math.random(),把它的結(jié)果乘以20,然后把上一步的結(jié)果傳給?Math.floor(),最終通過(guò)向下取整獲得最近的整數(shù)。
任務(wù):生成一個(gè)?0?到?9之間的隨機(jī)整數(shù)。


JavaScript 使用random()在一個(gè)范圍內(nèi)生成隨機(jī)數(shù)
我們之前生成的隨機(jī)數(shù)是在0到某個(gè)數(shù)之間,現(xiàn)在我們可以生成一個(gè)落在兩個(gè)特定數(shù)字范圍內(nèi)的隨機(jī)數(shù)間。
我們需要定義一個(gè)最小值和一個(gè)最大值。
下面是我們將要使用的方法,仔細(xì)看看并嘗試?yán)斫膺@行代碼正在干什么:
Math.floor(Math.random() * (max - min + 1)) + min
任務(wù):創(chuàng)建一個(gè)叫randomRange的函數(shù),參數(shù)為myMin和myMax,返回一個(gè)在myMin(包括myMin)和myMax(包括myMax)之間的隨機(jī)數(shù)。


JavaScript 使用正則表達(dá)式操作字符串
Regular expressions?正則表達(dá)式被用來(lái)根據(jù)某種匹配模式來(lái)尋找strings中的某些單詞。
例如:如果我們想要找到字符串The dog chased the cat中單詞?the,我們可以使用下面的正則表達(dá)式:?/the/gi
我們可以把這個(gè)正則表達(dá)式分成幾段:
/?是這個(gè)正則表達(dá)式的頭部
the?是我們想要匹配的模式
/?是這個(gè)正則表達(dá)式的尾部
g?代表著?global(全局),意味著返回所有的匹配而不僅僅是第一個(gè)。
i?代表著忽略大小寫(xiě),意思是當(dāng)我們尋找匹配的字符串的時(shí)候忽略掉字母的大小寫(xiě)。
任務(wù):用全局、忽略大小寫(xiě)的模式選取字符串?testString中所有的單詞?and。
你可以嘗試把?.?替換成?and。


JavaScript 使用正則表達(dá)式選取數(shù)值
我們可以在正則表達(dá)式中使用特殊選擇器來(lái)選取特殊類型的值。
特殊選擇器中的一種就是數(shù)字選擇器\d,意思是被用來(lái)獲取一個(gè)字符串的數(shù)字。
在JavaScript中, 數(shù)字選擇器類似于:?/\d/g。
在選擇器后面添加一個(gè)加號(hào)標(biāo)記(+),例如:/\d+/g,它允許這個(gè)正則表達(dá)式匹配一個(gè)或更多數(shù)字。
尾部的g是'global'的簡(jiǎn)寫(xiě),意思是允許這個(gè)正則表達(dá)式找到所有的匹配而不是僅僅找到第一個(gè)匹配。
任務(wù):用?\d?選擇器來(lái)選取字符串中的所有數(shù)字,允許一個(gè)或多個(gè)數(shù)字的可能性。


JavaScript 使用正則表達(dá)式選取空白字符
我們也可以使用正則表達(dá)式選擇器?\s?來(lái)查找一個(gè)字符串中的空白。
空白字符有?" "?(空格符)、\r?(回車(chē)符)、\n?(換行符)、\t?(制表符) 和?\f(換頁(yè)符)。
空白正則表達(dá)式類似于:
/\s+/g
任務(wù):用?\s?選取句子中的所有空白字符。


JavaScript 使用正則表達(dá)式反轉(zhuǎn)匹配
你可以用正則表達(dá)式選擇器的大寫(xiě)版本來(lái)反轉(zhuǎn)任何匹配(相反意思)。
例如:\s?匹配任何空白字符,\S?匹配任何非空白字符。
任務(wù):用?/\S/g?來(lái)匹配字符串testString中的所有非空白字符。


JavaScript 綜合運(yùn)用開(kāi)發(fā)老虎機(jī)游戲
現(xiàn)在把我們之前的所學(xué)的知識(shí)點(diǎn)結(jié)合起來(lái)完成一個(gè)老虎機(jī)游戲。
首先我們生成3個(gè)隨機(jī)數(shù),范圍在1到3之間。
分別用?slotOne、slotTwo、slotThree來(lái)存儲(chǔ)著3個(gè)隨機(jī)數(shù)。
用我們之前的所學(xué)來(lái)生成隨機(jī)數(shù)):
Math.floor(Math.random() * (3 - 1 + 1)) + 1;

JavaScript 進(jìn)一步完善小游戲項(xiàng)目
現(xiàn)在我們的老虎機(jī)每次生成3個(gè)隨機(jī)數(shù),我們得去檢查隨機(jī)數(shù)是否全部相等的情況。
如果全部相等,我們應(yīng)該提示用戶他們贏了,并返回中獎(jiǎng)號(hào)碼,否則我們應(yīng)該返回null。
null?是JavaScript中的一種數(shù)據(jù)類型,意味著空。
當(dāng)這3個(gè)隨機(jī)數(shù)相等的時(shí)候,判定用戶贏。讓我們創(chuàng)建一個(gè)if 語(yǔ)句,用多個(gè)條件按順序來(lái)檢查它們是否相等。類似于:
if (slotOne === slotTwo && slotTwo === slotThree){
??return slotOne;
} else {
}
當(dāng)3個(gè)隨機(jī)數(shù)都一樣的時(shí)候,我們把?"It's A Win"?追加到class?logger的html中。

JavaScript 讓小游戲項(xiàng)目運(yùn)作起來(lái)
讓我們用 jQuery 選擇器?$(".slot")?獲得所有老虎機(jī)。
一旦獲取到所有老虎機(jī),我們可以通過(guò)中括號(hào)操作符獲取到每一個(gè)老虎機(jī):
$($(".slot")[0]).html(slotOne);
jQuery將會(huì)獲取到第一個(gè)老虎機(jī),并更新它的HTML為正確的數(shù)字。
任務(wù):分別更新每個(gè)老虎機(jī)上的HTML為對(duì)應(yīng)的數(shù)字。

JavaScript 為小游戲項(xiàng)目添加圖片
現(xiàn)在給我們的老虎機(jī)加點(diǎn)圖片。
我們已經(jīng)為你準(zhǔn)備好了圖片images,我們可以通過(guò)不同的索引來(lái)獲取每個(gè)圖片。
現(xiàn)在讓我們?cè)O(shè)置第一個(gè)老虎機(jī)根據(jù)隨機(jī)數(shù)來(lái)顯示一張圖片:
$($('.slot')[0]).html('<img src = "' + images[slotOne-1] +
'">');
任務(wù):設(shè)置所有的老虎機(jī)根據(jù)隨機(jī)數(shù)來(lái)顯示對(duì)應(yīng)的圖片,最后點(diǎn)擊RUN。

The end~~