JavaScript闖關(guān)題(第二部分)

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~~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容