注意：手機（APP）打開，內容顯示更佳，不會的私聊博主即可
想要拿代碼或加入學習計劃（** 博主會監督你并且教你寫文章 **）的拉到最下面（PC端Web打開）加博主即可，目錄也在最下面。
參加1_bit博主前端學習計劃發文時在頭部記得加上本專欄鏈接，示例如下：
我已加入 1_bit 博主的免費前端 站起來 學習計劃，專欄鏈接：https://blog.csdn.net/a757291228/category_11609526.html
一、JavaScript 簡介
🐶1_bit：這一節咱們開始學習什么是 JavaScript。
👸小媛：什么是 JavaScript 呀？
🐶1_bit：JavaScript 簡稱 JS，在 Web 中用作用于給整個頁面添加一些動態效果，例如動態改變頁面某個元素的css屬性，或給整個頁面添加較為流程的用戶體驗，基礎的 JS 學習 一般直接在 web 中嵌入即可。
👸小媛：奧，那么厲害，那趕緊學習吧。
二、JavaScript 基礎入門
2.1 JavaScript HelloWorld
🐶1_bit：首先咱們看 JavaScript 的如何改變網頁元素中的內容。首先咱們先編寫一個 html，代碼如下。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰課程10 javascript</title>
</head>
<body><p id="p_id">這里是 p 元素中的內容。</p>
</body>
</html>
👸小媛：這個代碼不就是直接會顯示這段話嗎？還有啥功能呢？
🐶1_bit：不急，咱們現在開始添加第一句 JavaScript 代碼，改動如下。
<script>document.write("HelloWorld");</script>
👸小媛：這個就是 JS 的代碼嗎？
🐶1_bit：對的，JS代碼添加在 標簽 <script> </script> 之中，其中以上代碼 document.write("HelloWorld"); 指的就是在當前 文檔中寫入一個字符串，這個字符串就是 HelloWorld。
👸小媛：奧，所以 document 指的就是文檔，write 就是寫入，在 write 圓括號內的雙引號中就是指需要寫入的內容？
🐶1_bit：是的，其中的小數點是表示 document 這個對象中的一個方法。
👸小媛：什么是對象什么是方法呢？
document 指的就是當前整個文檔，文檔是一個類，document 指的是當前 html 所以 document 是這個類型的一個對象，也就是具體到某一個事物；類是編程中的一個概念，你可以理解成一個類別。例如顯示生活中的電放鍋是一個類別，“所有”的電放鍋都有做飯和保溫的功能，那么此時就可以把這個電飯鍋當成一個類型，那么你如果具體到某一個電飯鍋，那就是一個對象，你用代碼編程的寫法來使用電飯鍋做飯的功能，那么就可以寫成 電飯鍋.做飯()。
👸小媛：那么這個小數點可以理解成使用某個功能的意思？
🐶1_bit：對的，然后每個功能基本上都需要使用一個圓括號用于接收參數。
👸小媛：那什么是參數呢？
🐶1_bit：參數的意思就是指你做飯的時候可能用的糙米、白米、五常大米等不同種類的米來做飯，這些參數指的就是你需要完成這個功能所需要的原料，那么使用電飯鍋做飯的代碼就可以寫成 電飯鍋.做飯("白米")。
👸小媛：那水還要加嗎？
🐶1_bit：當然要加，所以此時就有兩個參數，這兩個參數只需要使用逗號分開就可以了，例如示例 電飯鍋.做飯("白米","泉水")。
👸小媛：原來是這樣。
🐶1_bit：對的。所以我們現在回到我們的代碼document.write("HelloWorld");之中就可以理解了，document 指的就是 html 文檔，write 是這個文檔類別對象里面的一個寫入功能，其中寫入內容那么就需要一個文本來表示你需要寫入什么，那么這個文本就是 HelloWorld。
👸小媛：那為什么這個文本需要用雙引號引入呢？
🐶1_bit：那是因為在 JS 中規定，雙引號用于表示字符串，HelloWorld 是字符串所以需要雙引號用來標記。
👸小媛：一定要用雙引號嗎？
🐶1_bit：對的，不然你怎么知道這個 HelloWorld 是一個類還是一個字符串呢？萬一有一個類叫做 HelloWorld 呢？因為這個類在 JS 中是可以自定義的。
👸小媛：原來如此，明白了。
🐶1_bit：那么該代碼的最終效果顯示如下。
👸小媛：還有一個問題，我的 JS 代碼可以換位置嗎？
🐶1_bit：可以，你還可以添加多個，例如。
<script>document.write("HelloWorld 放前面");
</script><p id="p_id">
這里是 p 元素中的內容。
</p><script>document.write("HelloWorld 放后面");
</script>
👸小媛：明白了。
2.2 JavaScript 變量及命名
🐶1_bit：在 JavaScript 中還可以添加變量。
👸小媛：什么是變量？
🐶1_bit：你可以理解成一個容器，用于值的存儲，可以存儲字符串、數字等。
👸小媛：這個容器有什么用嗎？
🐶1_bit：例如你在一個頁面中，需要知道用戶點擊了這個按鈕多少次，你可以先給予一個變量一個初始值0，每點擊一次那么這個變量的值就加1，那么這個變量就可以作為計數了。
👸小媛：感覺想要看一個實例。
🐶1_bit：這個不急，之后咱們會有一個示例的。咱們先學習這個變量怎么用。下面是一個示例代碼。
<script>var i=0;var a=10,b=1,c=11;document.write(a+b+c);
</script>
🐶1_bit：以上代碼中的 var 表示創建一個變量，那么在之后可以寫一個變量名，例如 var i=0; 之中，var 表示變量創建，i 表示變量名稱，等于號表示將等于號右側的值給予到左側的變量之中，那么此時 i 的值就等于 0了，還要一個注意的點，這一行代碼寫完后要在末尾添加一個分號，就像語文中的句號一樣，表示這一句話已經寫完了。
👸小媛：明白了，那之后呢？
🐶1_bit：之后的代碼例如 var a=10,b=1,c=11; 表示同時一行創建多個變量，這些變量分別是 a、b、c，其中他們的值都在等于號右側標記了。
👸小媛：明白了，就是多個變量使用逗號進行分隔對吧？
🐶1_bit：對的。最后一行 document.write(a+b+c); 表示將變量 a、b、c 做加法，最終將會在頁面上顯示出值 22。
👸小媛：原來是這樣，明白了。
🐶1_bit：這就是變量，是一個容器，其中存儲的值可以發生改變。當然我們也可以使用一個變量用于存儲某多個值的運算結果，例如以下代碼。
<script>var i=0;var a=10,b=1,c=11;i=a+b+c;document.write(i);
</script>
👸小媛：以上代碼直接用 i 存儲了三個變量相加然后再進行輸出顯示？
🐶1_bit：對的，當然字符串也可以進行加法運算，例如如下代碼。
<script>var i="Hello";var a=" XiaoMing",b="!";i=i+a+b;document.write(i);
</script>
🐶1_bit：以上代碼 i 是一個字符串變量存儲了 Hello，a存儲了 XiaoMing，b 存儲了一個感嘆號，其中 i=i+a+b; 就表示使用加號將這些字符串進行相連，那么最終的顯示如下。
👸小媛：原來可以這樣呀。
🐶1_bit：對的，你可以想一下，在一個頁面之中，要求用戶填寫一個用戶名，用戶填寫了用戶名 小明 之后，然后點擊確定將會出現 “Hello 小明” 字樣，就是這樣做的，但是現在咱們還沒學到如何使用 JavaScript 獲取某個 html 元素的值，所以在此處先不做距離，咱們基本上學完基礎語法后將會有一個示例大全。
👸小媛：迫不及待了。
🐶1_bit：不過咱們學習了這個變量創建后，有一點還是需要注意一下。
👸小媛：是什么？
🐶1_bit：就是變量起名的時候一定要注意某些規則，因為有時候你若起名一個變量名為 classname 表示一個班級名，那么classname 并不方便閱讀，你可以起名為 className 或者class_name ，當然還可以起名ClassName，其中ClassName 和 className 為駝峰命名法（因為像駝峰），而 class_name為下劃線命名法，你可以在項目中統一某個命名法方便閱讀。
👸小媛：收到。
2.3 運算符
🐶1_bit：接下來咱們來學習一下運算符吧。
👸小媛：加減乘除嗎？剛剛不是學過了嗎？
🐶1_bit：在編程中 JavaScript 的運算符不止這一些呢，還有很多，例如 +=、%、%= 等運算符都還沒學呢。
👸小媛：好勒。
🐶1_bit：首先咱們看看 += 運算符，+= 運算符示例如下。
<script>var i=10,j=11;i+=j;document.write(i);
</script>
🐶1_bit：以上代碼中 i 等于10，j等于11，那么 i+=j 則與 i=i+j 表達式結果相等，此時只是省略了 i 這個變量出現于在表達式之中。
👸小媛：原來如此，這就是一個簡單寫法對吧？
🐶1_bit：是的。接下來咱們再看看 % 這個運算符，% 運算符是指取模預算，也就是取余數，例如如下代碼示例。
<script>var i=11,j=10;i=i%j;document.write(i);
</script>
🐶1_bit：以上代碼中，i 是11 j 是10，那么 i%j 則表示 11除10之后取余數，那么最終值則是1。
👸小媛：明白了，所以 %= 的意思就是也是取模運算咯？
🐶1_bit：對的，這個不難吧？
👸小媛：哈哈哈，挺簡單的。
🐶1_bit：咱們還可以寫成 *=、-= 等，這些都和 += 類似。
👸小媛：明白了。
🐶1_bit：以上的代碼中不止只有 變量 和變量 之間進行運算，還可以在其中添加對應的值，例如以下示例。
<script>var i=11,j=10;i=i%j+10+1+9+10;document.write(i);
</script>
👸小媛：知道了。
🐶1_bit：現在咱們再介紹兩個運算符，++和- -。
👸小媛：這是啥。
🐶1_bit：咱們先看一個示例。
<script>var i=0;document.write(++i+'<br/>');document.write(--i+'<br/>');document.write((i++)+'<br/>');document.write(i+'<br/>');document.write((i--)+'<br/>');document.write(i+'<br/>');
</script>
🐶1_bit：其中 ++i 中的 ++ 表示當前這個變量值加1，那么此時在 write 方法中，++i 就表示當前值加 1，那么輸出為 1。
👸小媛：然后第二行輸出是減減（–）所以就為0？
🐶1_bit：對的，為了方便觀看，咱們使用加號與 <br/> 換行標簽進行鏈接，所以第一行顯示 1 第二行顯示 0，這個沒問題吧？
👸小媛：沒問題，那為什么下一行這個++放到了變量 i 的后面？
🐶1_bit：那是因為 ++ 放前面表示先進行運算變量 i 增值，再執行 write 輸出方法，如果 ++ 放到變量之后將會先執行 write 方法先顯示內容再執行 i++操作，那么第三行就顯示為0，因為此處寫的是 i++，使用括號是為了讓你能夠方便的查看。
👸小媛：明白了，所以第四行雖然沒做什么操作，但是依舊顯示了1？
🐶1_bit：對的，所以第五行執行了會顯示 1，最后一行沒什么操作則顯示了0。
👸小媛：明白了。
🐶1_bit：咱們還有很多對應的運算符，這些不再解釋，若有需要則去查看對應的運算符即可。
2.4 條件判斷
🐶1_bit：接下來咱們學習 if 判斷。
👸小媛：這個判斷有什么用呢？
🐶1_bit：這個判斷可是有大用，編程中判斷是非常常見的；例如在判斷用戶是否已成年、是否購買過某些商品這些都是需要用判斷來實現；在JavaScript中判斷使用 if 語句。
2.4.1 if 基礎與表達式
👸小媛：那怎么寫呢？
🐶1_bit：你先看看下面的示例。
<script>var i=10;if(i>=18){document.write("已成年");}
</script>
🐶1_bit：此時創建了一個變量 i，這個變量 i 的值為 10，接著使用 if 判斷這個 i 的值是否大于某一個值。if 的語法很簡單，if 是對一個的關鍵字，在 if 后接上一對圓括號，在圓括號中寫上對應的表達式，這個表達式的為 i>=18。
👸小媛：什么是表達式呢？
🐶1_bit：你可以簡單理解為表達式則是數值與符號的組合，它是一個式子，這個式子具有一個最終的值，是有意義的。
👸小媛：所以關鍵點就是說是否具有最終值？
🐶1_bit：對的，如果你亂寫一通基本上是沒有最終值的，在此處 i>=18 就是一個表達式，其中判斷 i的值是否大于關于 18，如果大于等于將會判斷為真，整個表達式的最終值就是“真”，使用 true 表示。
👸小媛：那如果判斷錯誤呢？
🐶1_bit：判斷錯誤就是最終值為假，使用 false 表示。
👸小媛：所以 true 的意思就是真，false 的意思就是假？
🐶1_bit：對的，在 if 語句中，如果判斷為真，那么就執行if 語句圓括號后花括號中的語句內容，在以上代碼中，花括號中的代碼是 document.write("已成年");，那么將會執行這一段代碼，在網頁中顯示。
👸小媛：那在此處 i 的值 為 10，明顯是不大于18的那將會怎樣呢？
🐶1_bit：那么將會什么都不執行。
2.4.2 if else
👸小媛：感覺一點不怎么靈活呀。
🐶1_bit：如果你想在這個條件判斷后顯示未成年的話，那么只需要添加一個分支語句 else 即可，例如如下代碼示例。
<script>var i=10;if(i>=18){document.write("已成年");}else{document.write("未成年");}
</script>
🐶1_bit：此時將會顯示未成年。
👸小媛：你的意思是說，如果if 語句里面的條件判斷錯誤，那么將會執行 else 部分的內容？
🐶1_bit：對的。else 是關鍵字，對應后面的花括號中的代碼將會在 條件 判斷錯誤后執行，組中將會顯示未成年。
👸小媛：明白了。
2.4.3 邏輯與
🐶1_bit：其中咱們的 if 語句還可以更加靈活的進行判斷，例如編寫一段代碼，判斷這個人是否購買了面包和蔬菜，如果購買了那么將會顯示得到一個優惠券，那么此時可以寫成如下示例。
<script>var i=1,j=1;if(i==1&&j==1){document.write("購買了蔬菜和面包獲得優惠券");}else{document.write("沒有達成隱藏購買選項將不會得到優惠券");}
</script>
👸小媛：咦？那個&&是什么？
🐶1_bit：這個&&是邏輯與運算符，表示左右兩邊的條件是否同時成立。
🐶1_bit：其中左邊是一個表達式，右邊也是一個表達式，當表達式使用 && 邏輯與 運算符進行連接那么就表示左右兩邊的表達式都要同時為真，那么整個表達式 i==1&&j==1 最終值才正確。
👸小媛：意思說我只有一個表達式對的時候，例如 j 的值為 0，那么這個表達式就不正確了？即時 i 的值為 1？
🐶1_bit：對的，在這里我用 i 表示面包、j用來表示蔬菜，其中數值1表示是否購買，那么i和j的值都為1則表示都購買，此時表達式內容才為真。
👸小媛：明白了，所以最終將會顯示獲得優惠券。
2.4.4 邏輯或
🐶1_bit：除了邏輯與之外還有一個邏輯判斷符號叫做邏輯或“||”，這個邏輯或與邏輯與運算符不一樣，邏輯或只需要左右兩邊的表達式其中一個為1，那么整個表達式則判斷成功，例如如下示例。
<script>var i=1,j=0;if(i==1||j==1){document.write("購買了蔬菜或面包獲得優惠券");}else{document.write("沒有達成隱藏購買選項將不會得到優惠券");}
</script>
🐶1_bit：此時 j=0 整個表達式都將判斷正確。
👸小媛：明白了，也就是說有一個對了就等于完成任務了
2.4.5 邏輯混合
🐶1_bit：對的，邏輯與和邏輯或都是邏輯運算符，它可以鏈接多個邏輯運算，例如如下示例。
<script>var i=1,j=1,k=1;if(i==1&&j==1&&k==1){document.write("購買了蔬菜、面包以及醬油獲得優惠券");}else{document.write("沒有達成隱藏購買選項將不會得到優惠券");}
</script>
👸小媛：那這個怎么算的呢？
🐶1_bit：多個邏輯運算符我們記得只需要默認從左到右進行運算即可，先計算i==1&&j==1若等于true，那么此事表達式就是true&&k==1，true表示正確，那么只需要判斷k是否等于1那么將會完成整個式子的判斷。
👸小媛：原來是這樣呀，所以再多的邏輯判斷也是這樣咯？
🐶1_bit：對的。咱們還可以使用邏輯或和邏輯與進行混合的邏輯運算，例如如下示例。
<script>var i=1,j=0,k=1,f=0;if(i==1||j==1&&k==1||f==1){document.write("購買了蔬菜、面包、醬油或玉米獲得優惠券");}else{document.write("沒有達成隱藏購買選項將不會得到優惠券");}
</script>
👸小媛：咦？這個怎么算的？我有點懵圈了。
🐶1_bit：這個其實也很簡單，首先從左往右，第一個表達式是 i==1||j==1，此時 i值是1，j值是0，那么在判斷j值是否等于1時則無關緊要，因為這兩個表達式中間使用的是邏輯或表達式，只需要其中有一個表達式在正確即可，所以i==1||j==1表達式最終值為 true，接下來表達式就寫成 true&&k==1，其中k值是1，那么整個表達式 true&&k==1 判斷正確，最終只需要和 f==1 表達式進行邏輯或運算即可，此時表大會為 true||f==1，那么最終值則為真，將會執行代碼 document.write("購買了蔬菜、面包、醬油或玉米獲得優惠券");。
👸小媛：明白了，原來剛開始需要慢慢的對這些表達式進行分析。
2.4.6 if elseif
🐶1_bit：接下來咱們再看看 if 語句的其他語法。
👸小媛：if 語句還有其他語法？
🐶1_bit：對的，例如一個用戶填寫了他孩子的歲數，對應的需要進行不同的商品推薦，此時就可以使用 else if語句。
👸小媛：這個怎么寫呢？
🐶1_bit：這個編寫起來不難，例如如下示例。
<script>var age=3;if(age==1){document.write("牛奶");}else if(age==2){document.write("純牛奶");}else if(age==3){document.write("羊奶");}else if(age>=4 && age<=9){document.write("煉奶");}else if(age>=10 && age<=13 && age!=11){document.write("乳味飲品");}else if(age>=14 && age<=18){document.write("隨便吃喝");}else{document.write("本店沒有成年吃的東西");}
</script>
👸小媛：else if 后的圓括號是條件嗎？
🐶1_bit：是的，首先判斷 age 是不是等于1，若條件成立，那么將會執行 age==1 后的代碼，其他條件下的代碼將不會執行；若條件不成立，那么將會跳到 else if 語句中從上往下對條件進行判斷，判斷 age ==2 不成立則會再判斷 age==3，若 age==3 條件成立，那么將會執行 age==3 的 else if 判斷后花括號中的代碼內容，其他條件不再進行判斷；若所有條件都不成立，那么將會執行 else 部分內容。
👸小媛：原來是這么回事呀，不過你確定判斷是否相等是使用兩個等于號進行判斷？
🐶1_bit：在 JavaScript 中，兩個等于號是判斷是否相等的。
👸小媛：明白了。
🐶1_bit：還有一點需要注意，咱們對數值進行判斷，不一定是要寫13之類的數字，你可以將這些數值放到一個變量之中進行判斷，例如 a==b 這些寫。
👸小媛：了解了。
2.4.7 if 嵌套
🐶1_bit：咱們現在還需要了解一下，if 語句是可以進行嵌套的，例如一個 if 語句之中嵌套了另外一個 if 語句，并且嵌套的 if 語句是有分支的，這些都是可以的。
👸小媛：舉個例子看看？
🐶1_bit：例如如下示例。
<script>var age=3,sex=1;if(age==1){document.write("牛奶");if(sex==1){document.write("性別為男，可以粗糙一點養。");}else if(sex==2){document.write("性別為女，可以精致一點養")}}else if(age==2){document.write("純牛奶");}else if(age==3){document.write("羊奶");}else if(age>=4 && age<=9){document.write("煉奶");}else if(age>=10 && age<=13 && age!=11){document.write("乳味飲品");}else if(age>=14 && age<=18){document.write("隨便吃喝");}else{document.write("本店沒有成年吃的東西");}
</script>
👸小媛：那還可以繼續往里面嵌套嗎？
🐶1_bit：可以的，但是不是很建議這樣做，不然你會看眼花的。
👸小媛：明白了。
2.4.8 switch 語句
接下來再看一個判斷語句。
還有嗎？
對的，還有一個是 switch 語句，不過大部分的判斷都可以使用 if 語句完成，不過 switch 肯定也要進行學習。
兩者有什么區別嗎？
你可以理解switch 為對某些條件的語句進行分支，做這一類需求是較為方便，就像菜單一樣，例如如下示例。
<script>var day=1;switch(day){case 1:document.write("星期1");break;case 2:document.write("星期2");break;case 3:document.write("星期3");break;case 4:document.write("星期4");break;case 5:document.write("星期5");break;case 6:document.write("星期6");break;case 7:document.write("星期7");break;default:document.write("你說什么我不懂");}
</script>
這個代碼看起來跟之前的不是很一樣呀？
對的，switch 語句還是有些卻別的，在 switch 后的圓括號中填寫的是一個值或變量，這個值或變量只要與switch 代碼塊中 case 后的值相等，就對應的執行相應步驟的代碼。
意思說 day 等于 6 就執行 case 6 這個部分的代碼內容？
對的，其他的則不會執行。
那 default 部分是默認的意思嗎？
default 部分表示當所有的casa 值都沒有對應時將會執行該部分的代碼。
那 break 又是啥？
break 是跳出的意思，例如如果你的 day 值是3，你在 case 3、4、5 時都沒有使用break，此時將會執行 case 3、4、5、6 的內容，如果你想保證正確就一定要加上 break，當然除非你故意這樣做。
我剛剛試了一下，如果我刪除了 3 4 5 的 break，最終將會執行到有 break 的 case 部分為止。
對的，所以這點要注意。
所以我總結一下，這個 switch語句的語法就是 switch后就是一個表達式或值，接著在對應花括號內寫上寫上 case 和對應的值，接著一個冒號后就是對應的代碼內容，在最后一句加上 break 即可完成，最后就是 default ，它是所有條件不對時執行的部分，也就是等于跟 if 語句的 else 一樣？
對的，理解的不錯。
2.5 函數
2.5.1 基礎函數
🐶1_bit：接下來咱們開始學習 JavaScript 的函數。
👸小媛：是數學中的函數嗎？
🐶1_bit：其實函數你可以理解為一個功能，不嚴謹的說，函數你可以當成是方法，也就是之前說的一個功能。
👸小媛：不是很理解。
🐶1_bit：你可以理解為我們在做一個需求時需要有一個功能是將兩個字符串連接起來，例如用戶輸入一個用戶名，咱們就對他打招呼；這個需求就可以寫成一個函數，函數在 JavaScript 中是可以進行調用的，也就是說可以多次重復使用的；若你在寫 JavaScript 代碼時，經常會使用到一段重復的代碼，這個代碼恰巧是一個功能，那么你就可以寫成一個函數重復使用他，這樣的話就可以不用重復的打這一段代碼了，就非常方便。
👸小媛：哇，感覺好處挺大的，但是還不懂怎么寫。
🐶1_bit：那咱們就開始弄一下示例吧。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰課程10 javascript 02</title>
</head>
<body><script>function HiUser(){document.write("Hi");}</script>
</body>
</html>
👸小媛：我運行這一段代碼怎么頁面是空白的啥都沒有？
🐶1_bit：那是因為這是一個函數，咱們在這里只是創建（定義）好了，但是并沒有使用他。
👸小媛：原來如此。
🐶1_bit：在使用前咱們先看看這個函數怎么創建吧。
👸小媛：好的。
🐶1_bit：首先我們看到函數的代碼是。
function hiUser(){document.write("Hi");
}
🐶1_bit：其中 function 是表示我在這里創建一個函數，就跟創建變量的 var 作用類似，表示開始進行對應功能的創建，接下來后面的 hiUser 則表示這個函數的名稱，后面是一對圓括號和花括號，在花括號中則是對應這個函數的代碼。函數中對應的代碼則是這個函數的功能。
👸小媛：所以這個代碼的功能就是輸出一個 Hi 嗎？
🐶1_bit：對的。
👸小媛：那怎么使用呢？
🐶1_bit：使用也很簡單，只需要在JavaScript 代碼中使用這個函數名后加一個圓括號就可以了。
<script>function hiUser(){document.write("Hi");}hiUser();
</script>
👸小媛：喔，原來如此，明白了。
2.5.2 函數參數
🐶1_bit：其實咱們還可以傳遞參數進行顯示，例如你傳遞一個用戶名，然后對某個用戶名進行打招呼都可以。
👸小媛：咱么做？
🐶1_bit：你看看下面的示例。
<script>function hiUser(username){document.write("Hi "+username);}hiUser("XiaoMing");
</script>
👸小媛：所以 “XiaoMing” 就是一個作為字符串傳進去 hiUser 函數的參數？
🐶1_bit：是的，XiaoMing 參數傳到 hiUser 函數 后，將會存儲到 username 變量中，那么將會執行 document.write("Hi "+username); 代碼，由于 username 值是 XiaoMing ，那么最終將會顯示 Hi XiaoMing。
👸小媛：明白了。多個參數只需要逗號進行分隔就可以了嗎？
🐶1_bit：現在還不行，因為咱們還需要在函數中進行更改，你想這個函數接收兩個參數，那么就需要在函數中寫兩個變量對值進行接收。
<script>function hiUser(username,word){document.write(username+word);}hiUser("XiaoMing"," 666!");
</script>
👸小媛：所以在函數接收值后，username 就等于了 XiaoMing，而 word 就等于了 666！，然后再將兩者進行輸出顯示？
🐶1_bit：是的，最終值如下。
2.5.3 函數返回值
🐶1_bit：其實函數還有返回值。
👸小媛：什么是返回值？
🐶1_bit：返回值就像你用電飯鍋做飯，電飯鍋是一個功能，你傳入的米和水是參數，那么最終電飯鍋將會給熱騰騰的米飯給你，這個米飯就是最終的返回值。
👸小媛：哇，那怎么做呢？
🐶1_bit：你看下面示例。
<script>function hiUser(username,word){return username+word;}var histr=hiUser("XiaoMing"," 666!");document.write(histr);
</script>
🐶1_bit：以上代碼中，hiUser 中的代碼改變成了 return username+word;，其中 return 則是表示返回的意思，return 右側就是需要返回的值；當代碼運行到此處后，將會把 username+word 的運算結果返回出來；我們再看代碼 var histr=hiUser("XiaoMing"," 666!");，此時傳入了兩個參數，并且創建了一個變量 histr，histr 的值則等于 hiUser("XiaoMing"," 666!")，那么在此處就說明 hiUser("XiaoMing"," 666!") 會有一個返回值進行返回，值返回后將該值存儲到 histr 變量之中，最終使用代碼進行輸出顯示 document.write(histr);。
👸小媛：原來是這么回事呀。
🐶1_bit：對的，由于 hiUser("XiaoMing"," 666!") 有返回值，則表示這個函數調用本身就是一個值，那么可以直接將代碼寫成如下形式。
<script>function hiUser(username,word){return username+word;}document.write(hiUser("XiaoMing"," 666!"));
</script>
👸小媛：奧，明白了，因為本身有返回值，所以等 hiUser("XiaoMing"," 666!") 返回值后可以直接輸出內容。
🐶1_bit：是的。現在咱們學習了方法后，可以對整個網頁元素進行簡單的動態調整了。
👸小媛：真的嗎？
🐶1_bit：對的。
2.6 事件及函數
🐶1_bit：你還記得之前我跟你講的，點擊按鈕后可以使用變量對其計數，判斷點了多少次按鈕嗎？
👸小媛：記得，現在要做了嗎？
🐶1_bit：對的，不過咱們還要知道什么是事件。
👸小媛：事件是什么？
🐶1_bit：事件就是一件事，在網頁中，當你點擊按鈕的時候就觸發了一個事件，這個事件可以通過響應一個對應的函數執行某些代碼。
👸小媛：舉個例子吧。
🐶1_bit：以下代碼就是事件響應函數的一個示例代碼。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰課程10 javascript 02</title>
</head>
<body><button onclick="clickf()">這是一個按鈕</button><script>function clickf(){alert("我點了按鈕");}</script>
</body>
</html>
🐶1_bit：我們可以看到在 html 代碼中添加了一個按鈕，這個按鈕寫上了一個 onclick 屬性，onclick代表著點擊，并且賦值為 “clickf()”，那么則表示點擊后將會調用clickf() 函數，執行對應的內容。
👸小媛：那在這里的代碼中 alert("我點了按鈕"); 是什么意思？
🐶1_bit：alert是一個系統自帶的函數，表示彈窗，其中傳入的文本則是彈窗所顯示的內容。
👸小媛：原來是這樣的呀，明白了。
🐶1_bit：我們還可以直接把彈窗的代碼寫到 onclick 對應的值中。
<button onclick='alert("我點了按鈕");'>這是一個按鈕</button>
👸小媛：這樣可以執行嗎？而且你用了單引號？
🐶1_bit：在 JavaScript 中單引號和雙引號都可以表示值和字符串，在這里如果我使用了雙引號，那么將會與其中的 alert 彈窗所需要顯示的文本發生沖突，因為雙引號這些都是成對存在的，為了防止沖突，在此我使用了單引號。
👸小媛：明白了，如果是雙引號那么值錢的 alert 就成了一個字符串了。
🐶1_bit：對的，所以防止這個情況還是使用單引號為好。回到剛剛的案例，我們可以看出，在 onclick 內可以直接執行JavaScript 的代碼，但是并不方便，所以能寫函數就寫函數，如果實在沒必要寫也可以直接在 onclick 內部直接寫上代碼。
👸小媛：明白了，現在開始教那個記錄點擊數的方法吧。
🐶1_bit：這個很簡單，不過咱們還需要明白一個變量作用域的概念。
👸小媛：什么是變量作用域。
🐶1_bit：咱們先看看以下示例。
<body><button onclick="clickf()">這是一個按鈕</button><script>function clickf(){var times=0;times++;alert(times);}</script>
</body>
🐶1_bit：在函數 clickf() 內，times 變量定義為 0，每次執行 times++; 代碼使其變量值加1，隨后使用 alert 對值進行顯示；你覺得這個邏輯有問題嗎？
👸小媛：應該沒啥問題吧？
🐶1_bit：那你把這個代碼拿去運行看一下。
👸小媛：為什么我每次點擊后都是彈出 1 呢？
🐶1_bit：那是因為每次在這個函數之中都會執行代碼 var times=0;，接下來再加 1 肯定都是 1 了。
👸小媛：竟然是這個原因，那怎么改呢？
🐶1_bit：還需要吧這個 var times=0; 放在外部就可以了，放在外部就表示是一個全局變量，所有的函數都可以對其進行訪問，就如下代碼所示。
🐶1_bit：你再試試？
👸小媛：成功了，哈哈哈，可以一直加了。
🐶1_bit：那么接下來咱們再做一些好玩的。
👸小媛：啥好玩的？
🐶1_bit：咱們來動態的改變某些元素的屬性，例如 html 內容。
👸小媛：這么利害的嗎？怎么玩？
🐶1_bit：先看一下代碼，我等下給你道來。
<body><button onclick="change()">改變下面這個空的DIV容器內容</button><div id="divID"></div><script>function change(){htmlStr='<h1>這里是改變的內容</h1><p>真的是太容易了<span style="color: red;">呀</span></p>'document.getElementById('divID').innerHTML = htmlStr}</script>
</body>
🐶1_bit：我們可以看到按鈕的 onclick 事件綁定的是 change 函數，當點擊按鈕后將會執行改函數，在函數中，創建了一個 htmlStr 變量，這個變量的值是一串 html 代碼，接下來將會使用 document 對象調用 getElementById 函數完成接下來的任務。
👸小媛：那 getElementById 函數是什么用呢？
🐶1_bit：getElementById 函數可以通過 ID 獲取到對應的 html 文檔的節點，例如在這里傳入了 div 的ID 值作為參數，將會取到當前節點對象，隨后的 innerHTML 則表示當前 div 節點的 html 元素值，這里使用了等于號對其賦值，那么就表示將會用新的值覆蓋掉之前的值，最終點擊之后顯示結果如下。
👸小媛：原來如此，那之前本來有值，點擊該按鈕如何進行追加？
🐶1_bit：還記得 += 運算符嗎？
👸小媛：記得，a+=j 就等于 a=a+j。
🐶1_bit：對的，在此咱們也可以這樣做。
<body><button onclick="change()">改變下面這個空的DIV容器內容</button><div id="divID"><h1>這里是老舊的值</h1><p>這是<span style="color: red;">舊</span>的值</p></div><script>function change(){htmlStr='<h1>這里是改變的內容</h1><p>真的是太容易了<span style="color: red;">呀</span></p>'document.getElementById('divID').innerHTML += htmlStr}</script>
</body>
👸小媛：真的耶，點擊按鈕后不會發現改變，而且我一直點一直都會新增元素。
🐶1_bit：那接下來咱們來做個階梯如何？
👸小媛：啊？！階梯怎么做？
2.7 循環
2.7.1 for 循環基礎
🐶1_bit：那咱們現在得學一個叫做 循環 的知識點。
👸小媛：循環是啥？
🐶1_bit：循環可以幫助我們重復執行類似的代碼，并且你可以動態的更改一些內容使其更加靈活。
👸小媛：可以先簡單的舉個例子嗎？
🐶1_bit：例如你想顯示10次“我來了”三個字，那么不需要寫上次 write，也不用寫十個 p 標簽，你可以直接用 js 代碼寫成如下形式。
<script>for(var i=0;i<10;i++){document.write("我來了 <br/>");}
</script>
🐶1_bit：以上代碼中，for 表示循環，在其后的圓括號內是 var i=0;i<10;i++，其中 var i=0 指的是創建一個變量 i等于0，隨后一個分號結束；接下來是 i<10，指的是當前循環體（也就是花括號中的代碼）只有在滿足當前條件才能夠進行循環；最后是 i++，每次循環變量 i 的值就加 1。該循環的圓括號內包含了變量的值的初始化、條件以及步長，其中步長指的就是 i++，每次循環1次該變量就會加1；執行順序是先執行初始化，初始化只在整個循環開始時執行一次，接著每次循環是都會判斷 i<10 是否成立，接著將會執行 i++，這個 i 也被成為循環控制變量，指的是控制整個循環次數的變量，若你將 i++ 變成 i+=2，那么該循環的次數就會發生改變。
👸小媛：大概明白了，不過循環到底是啥意思我還沒搞清楚。
🐶1_bit：在以上代碼中，for 循環會自動的重復執行花括號中的代碼，每次執行 i 就加 1，執行多次后 i 必將大于 10，大于 10 后循環將會停止，那么則不會繼續執行。
👸小媛：嗷，明白了，原來是這個意思。
🐶1_bit：那么你刷新頁面將會發現十個“我來了”就出現了。
2.7.2 for 循環做階梯
👸小媛：那怎么做階梯呢？
🐶1_bit：這個很簡單，咱們直接上代碼。
<body><h1>開始做階梯</h1><button onclick="step()">點擊增加階梯</button><div id="divID"></div><script>var times=0;//次數function step(){times++;htmlStr='■';//階梯樣子for(var i=0;i<times;i++){document.getElementById('divID').innerHTML += htmlStr;}document.getElementById('divID').innerHTML +='<br/>';//加完階梯記得換行}</script>
</body>
👸小媛：哇，好復雜啊。
🐶1_bit：其實一點都不復雜，咱們可以看一下，首先<button onclick="step()">點擊增加階梯</button>代碼為一個按鈕的代碼，對應的 onclick 事件綁定為 step，接著下面的 JavaScript 代碼中，首先創建了一個全局變量 times 用于記錄按鈕點擊次數，隨后是一個 step 函數，這個函數中 times 每次在該函數執行時都會加 1，接著創建一個 htmlStr 變量賦值為一個方塊（可以省略 var 不寫），用于等下階梯的循環輸出，接下來 開始 for 循環，在 for 循環中重點查看條件 i<times，在此處表示 點幾下創建多少個 方框，也就是循環的代碼 document.getElementById('divID').innerHTML += htmlStr 將會執行多少次，每次執行都會在對應的 div 中增加多少個方塊，但是方塊不換行將會是一條直線，所以在循環執行完畢后在循環外對 div 中添加一個換行標簽，所以代碼寫成 document.getElementById('divID').innerHTML +='<br/>';。
👸小媛：原來是這樣，明白了，我運行了一下，果真如此。
🐶1_bit：看吧，階梯做出來了吧。
👸小媛：對了，那個雙斜桿就是注釋吧？用來解釋說明這一段代碼的作用？
🐶1_bit：對的，這個注釋在執行時并不會當作成代碼。
三、 變量及作用域
🐶1_bit：之前我們將了變量是用來存儲值的容器，那么你知道什么是作用域嗎？
👸小媛：懂的話就不是你教我了。
🐶1_bit：變量的 作用域值的是這個變量的作用范圍，或者你可以理解為生效范圍。
👸小媛：變量還有作用范圍？
🐶1_bit：對的，就像你家里面有一個密碼箱，里面裝了你最寶貴的東西，那么這個時候你鄰居可以拿你的密碼箱用嗎？
👸小媛：當然不行了。
🐶1_bit：所以這就是作用域的概念，在 JavaScript 中變量作用域就是指這個變量能夠作用的范圍“空間”，否則你亂用不是你作用域的變量將會出錯的。
👸小媛：奧，明白了，那怎么能夠看出來這個作用域是哪里可以用哪里不可以用嗎？
🐶1_bit：那接下來我們就學習如何查看作用域的范圍。
3.1 變量 let 和 var
🐶1_bit：之前咱們學習了聲明創建一個變量使用 var 關鍵字，一般來說咱們使用 var 用于創建全局變量，而 let 用來創建局部變量。
👸小媛：這是什么意思呢？
🐶1_bit：首先咱們可以看一下以下示例。
<body><script>{var v=10;}{let c=11;}document.write(c);</script>
</body>
👸小媛：為什么創建變量之外還有一個花括號？
🐶1_bit：這是為了讓你區分這個 var 和 let 的區別。剛剛有說 let 使用與定義局部變量，在代碼示例中， let c 遍歷創建處就等于了一個“局部”，與外面進行隔離，此時你再輸出變量 c 的內容是輸出不了的，但是可以輸出 var。
👸小媛：你的意思是說使用了 let 就等于加了一把鎖，鎖住了這個 let 的活動空間？
🐶1_bit：對的，是這個意思。
3.2 作用域
🐶1_bit：咱們再看一下下面的這個代碼。
<body><script>var a=10;function test(){let b=11;if(a==10){document.write(a+b);}else{document.write(b);}}test();</script>
</body>
🐶1_bit：在這個代碼中首先在最外側創建了一個變量 a，在這里相當于這個變量 a 是一個全局變量，接著創建了一個函數 test，在函數內部使用 let 創建了一個局部變量，接著使用 if 語句判斷變量 a，如果 a 等于10，那么將會輸出 a 加 b 的和，否則將會直接輸出 b 的值；最后直接使用 test() 調用函數，最后我們刷新一下這個頁面，發現顯示出了值為 21，說明 a 值在函數內部也可以去得到。
👸小媛：那代碼寫成以下的情況呢？
<body><p>這里是 html 內容</p><script>var a=10;</script><p>這里是 html 內容</p><script></script>function test(){let b=11;if(a==10){document.write(a+b);}else{document.write(b);}}</script><p>這里是 html 內容</p><script>test();</script>
</body>
🐶1_bit：放心，這個也是沒問題的，在這里 html 和 JavaScript 是分開的，實際上他們兩個是單獨存在的。
👸小媛：奧，原來是這樣。
四、數組
4.1 什么是數組
🐶1_bit：接下來咱們來看一下數組。
👸小媛：什么是數組？
🐶1_bit：數組就是數據集合的意思，在之前的學習變量中，我們可以得知，變量是存儲一個值的容器，那么在數組就是可以存儲多個值的容器。
👸小媛：哇，我明白了，那數組怎么存值呢？
🐶1_bit：這個很簡單，例如我們創建一個存儲名字的數組就寫成如下代碼。
<body><script>var arr=["Mr L","Xiaohong","W Wei"];</script>
</body>
👸小媛：就是多個值用逗號進行分隔？
🐶1_bit：對的，這些值還可以存儲為不同類型的數據，例如如下示例。
<body><script>var arr=["Mr L","Xiaohong",11,"W Wei"];</script>
</body>
4.2 數組訪問及取值
👸小媛：那這些值怎么用呢？
🐶1_bit：數組使用非常簡單，你想取第一個字就可以寫成。
<body><p id="pID"></p><script>var arr=["Mr L","Xiaohong",11,"W Wei"];document.getElementById("pID").innerHTML = arr[1];</script>
</body>
👸小媛：那為什么我顯示的時候是 Xiaohong 呢？
🐶1_bit：那是因為在編程中，數組的值是從 0 開始數的，例如你想取 Mr L 那么需要在 arr 后的方括號中寫上 0 就可以了。
👸小媛：明白了，所以取一個數組值那么就是一個數組名加上一對方括號，在方括號內寫上對應的數值就可以了？
🐶1_bit：對的是這樣的，但是要注意數值不能夠超過這個數組內元素的個數，這個個數成為數組長度。
👸小媛：明白了。
🐶1_bit：你也可以通過這個索引對數組的值進行更改。
<body><p id="pID"></p><script>var arr=["Mr L","Xiaohong",11,"W Wei"];arr[2]=90;document.getElementById("pID").innerHTML = arr[2];</script>
</body>
👸小媛：收到。
4.3 數組與循環
🐶1_bit：數組和循環其實是一堆好搭檔。
👸小媛：啥？
🐶1_bit：就是他倆可以搭配使用很方便。
👸小媛：怎么說？
🐶1_bit：例如在做一個網站時，網頁的中的一些數據可能是需要后端傳遞過來，那么這些數據有時候是以數組的格式呈現，換句話說就直接存在了數組之中，那么你在前端需要把這些數據進行顯示（例如某一個網站的熱門文章），那么你需要一個個去進行手動取到嗎？
👸小媛：感覺很麻煩。
🐶1_bit：對的，所以咱們就可以使用循環對這些數據進行遍歷，這樣就可以得到對應的數據了。
👸小媛：怎么做呢？
🐶1_bit：很簡單，你看下面示例。
<body><p id="pID"></p><script>var arr=["Mr L","Xiaohong",11,"W Wei"];for(let i=0;i<arr.length;i++){document.getElementById("pID").innerHTML += arr[i]+',';}</script>
</body>
🐶1_bit：輸出結果如下。
👸小媛：咦？在循環中我發現你是用了 let 創建了 i 這個局部變量？
🐶1_bit：對的，活學活用。
👸小媛：那那個 arr.length 是啥意思呢？
🐶1_bit：其實這個就是取得當前數組長度的意思，其實類和對象這個概念貫穿于整個 JavaScript，不過這個是接下來說的知識點，在此就先不將，你只需要知道 arr.length 就是得到當前數組的長度就ok了。
👸小媛：明白，所以最后面的 arr[i] 該怎么理解呢？
🐶1_bit：你想想，這個 i 值每次都會加1，但是肯定不會超過當前數組的長度，那么從0加到數組長度為止，這個 i 值的變化就是 0…1…2…3…這樣放到 arr[] 中不就是在取值嗎？
👸小媛：對喲，原來是這樣，明白了。
4.4 數組增刪值
🐶1_bit：數組還可以很快的刪除最后一個元素，例如如下示例。
<body><p id="pID"></p><script>var arr=[23,101,"XM",31,"XL",54];arr.pop(); for(let i=0;i<arr.length;i++){document.getElementById("pID").innerHTML += arr[i]+',';}</script>
</body>
👸小媛：是使用 pop 方法嗎？
🐶1_bit：對的，直接使用 pop 即可對數組末尾的元素進行刪除。
👸小媛：那刪除首個元素用什么呢？
🐶1_bit：用 shift()，例如如下示例：
<body><p id="pID"></p><script>var arr=[23,101,"XM",31,"XL",54];arr.shift(); for(let i=0;i<arr.length;i++){document.getElementById("pID").innerHTML += arr[i]+',';}</script>
</body>
👸小媛：那新增呢？
🐶1_bit：新增使用 push()。
<body><p id="pID"></p><script>var arr=[23,101,"XM",31,"XL",54];arr.push("新增元素"); for(let i=0;i<arr.length;i++){document.getElementById("pID").innerHTML += arr[i]+',';}</script>
</body>
👸小媛：那肯定就還有開頭新增元素的。
🐶1_bit：對的，在數組開頭新增元素使用unshift()。
<body><p id="pID"></p><script>var arr=[23,101,"XM",31,"XL",54];arr.unshift("新增元素"); for(let i=0;i<arr.length;i++){document.getElementById("pID").innerHTML += arr[i]+',';}</script>
</body>
🐶1_bit：除了這些簡便的方法，JavaScript 還有更多的使用方法，在此不一一做講解，在之后的實戰中將會說明。
👸小媛：明白了。
五、對象
🐶1_bit：在 JavaScript 中對象是很關鍵的一個概念，你還記得之前有說類和對象這個知識點嗎？
👸小媛：還記得。
🐶1_bit：例如咱們在制作一個網頁游戲時，你會發現有很多不同類似的 NPC 人物，這些人物都是想不多的屬性，有的可能頭發長、有的頭發短、有的大眼睛有的小眼睛…這些人物很多屬性可以通過代碼進行編輯，那編輯一個角色需要從頭到尾都打一遍重復的代碼嗎？
👸小媛：你是說例如制作一個人需要打代碼，那么很多個人很多代碼是相同的，如果要打那么多代碼就累癱了？
🐶1_bit：對的，所以類就可以很方便的為我們對這一類相同屬性的對象進行工作。例如我創建一個類，他們有名字、發色、年齡、性別 信息，以后需要創建一個人，那么就表示他是屬于人這個類型的數據，那么表示這個變量是人之后，這個變量就賦予了人這個類型的屬性，就不需要一而再再而三的打代碼了。
👸小媛：怎么做呢？
🐶1_bit：你看下面代碼。
<body><p id="pID"></p><script>class Human {name='';sex='';age=0;}var XiaoMing=new Human();XiaoMing.name='小明';XiaoMing.sex='男';XiaoMing.age=12;document.write(XiaoMing.name+XiaoMing.sex+XiaoMing.age);</script>
</body>
👸小媛：我迷糊了。
🐶1_bit：首先我們看 class。
🐶1_bit：class 表示一個類開始創建，其后接著的是一個類名，接著就是一堆花括號，花括號中就是這個類所對應的屬性。
👸小媛：所以這樣就是創建一個人有這些類型了？
🐶1_bit：對的。
👸小媛：接著咱們往下看。
🐶1_bit：我們可以看到 ，var Xiaoming 在不看后面其后面代碼時表示創建了一個變量，而 new Human 表示創建一個類，這是表示 XiaoMing 這個變量存儲的值是一個 Human 類的一個對象，那么 XiaoMing 這個變量就有了 Human 這個類的屬性。
👸小媛：原來是這個意思。
🐶1_bit：所以揭曉來可以使用小數點對其屬性進行調用，并且賦值，最后進行了輸出。
👸小媛：明白了，那還可以創建多個對象嗎？
🐶1_bit：當然可以，例如下面示例。
<body><p id="pID"></p><script>class Human {name='';sex='';age=0;}var XiaoMing=new Human();XiaoMing.name='小明';XiaoMing.sex='男';XiaoMing.age=12;var XiaoHong=new Human();XiaoHong.name='小紅';XiaoHong.sex='女';XiaoHong.age=12;document.write(XiaoMing.name+','+XiaoMing.sex+','+XiaoMing.age+'<br/>');document.write(XiaoHong.name+','+XiaoHong.sex+','+XiaoHong.age+'<br/>');</script>
</body>
👸小媛：哇，這樣就很方便了。
🐶1_bit：除了對應的屬性外，咱們還可以對這個類型創建方法，也就是類函數。
👸小媛：還可以這樣嗎？
🐶1_bit：當然可以，例如人類還可以進行說話，所以咱們在內部創建一個方法叫做 say。
<body><p id="pID"></p><script>class Human {name='';sex='';age=0;say(){document.getElementById("pID").innerHTML += 'Hi ';}}var XiaoMing=new Human();XiaoMing.name='小明';XiaoMing.sex='男';XiaoMing.age=12;XiaoMing.say();var XiaoHong=new Human();XiaoHong.name='小紅';XiaoHong.sex='女';XiaoHong.age=12;XiaoHong.say();document.write(XiaoMing.name+','+XiaoMing.sex+','+XiaoMing.age+'<br/>');document.write(XiaoHong.name+','+XiaoHong.sex+','+XiaoHong.age+'<br/>');</script>
</body>
🐶1_bit：當然我這樣寫是不規范的寫法，你可以直接使用 return 返回這個 hi 字符串即可，在此只是為了做一個示例。
👸小媛：明白了，看來很方便呀。
🐶1_bit：對的，咱們還可以使用循環遍歷這個對象的屬性。
<body><p id="pID"></p><script>class Human {name='';sex='';age=0;say(){document.getElementById("pID").innerHTML += 'Hi ';}}var XiaoMing=new Human();XiaoMing.name='小明';XiaoMing.sex='男';XiaoMing.age=12;XiaoMing.say();for(let k in XiaoMing){document.write(k+':'+XiaoMing[k]+' ');}</script>
</body>
👸小媛：for 循環里面使用一個 in 就可以訪問其屬性了呢？
🐶1_bit：這個 in 就表示 k 值進去 XiaoMing 這個對象里面去找到對應的屬性值，而 XiaoMing[k] 則是數組的寫法，其中 k 將會依次得到期屬性 name、sex 以及 age，那么 XiaoMing[k] 就會等于 XiaoMing[name]、XiaoMing[sex]、XiaoMing[age]，這樣既可取到對應的值。
👸小媛：哇，這個就跟數組一樣，對的，但是遍歷不會將方法也給輸出，明白了。
🐶1_bit：在 JavaScript 中還有一個對象數組，例如如下示例。
<body><p id="pID"></p><script>var data = {name:"XiaoMing", age:18, height:162};for(let k in data){document.write(k+':'+data[k]+' ');}</script>
</body>
👸小媛：哇，這樣就是給值添加了一個索引，這樣我就知道了這個值是什么數據了？
🐶1_bit：對的，記得，這個跟數組有區別，在 JavaScript 中這種鍵值對的數組是使用花括號中引入值的，這個一定要注意，并且是是一對一對的，一個值跟索引之間使用冒號分隔。
👸小媛：明白了。
目錄
【前端就業課 第一階段】HTML5 零基礎到實戰（十一）canvas 基礎
【前端就業課 第一階段】HTML5 零基礎到實戰（十）JavaScript基礎一篇入門
【前端就業課 第一階段】HTML5 零基礎到實戰（九）列表
【前端就業課 第一階段】HTML5 零基礎到實戰（八）表單詳解
【前端就業課 第一階段】HTML5 零基礎到實戰（七）文字及圖片樣式
【前端就業課 第一階段】HTML5 零基礎到實戰（六）表格詳解
【前端就業課 第一階段】HTML5 零基礎到實戰（五）基礎元素
【前端就業課 第一階段】HTML5 零基礎到實戰（四）偽類與偽元素
【前端就業課 第一階段】HTML5 零基礎到實戰（三）一篇文CSS基礎入門
【前端就業課 第一階段】HTML5 零基礎到實戰（二）超鏈接
【前端就業課 第一階段】HTML5 零基礎到實戰（一）基礎代碼結構詳解
)
