前端開發——JavaScript簡介

前端開發——JavaScript簡介

本文主要講解JavaScript的一些基礎知識，如：變量，數據結構，循環，控制，集合等。後續還會有介紹函數，面向對象，JQuery，node.js等的內容。 
由於篇幅原因，所以寫的並不深入，大概只適合有一定編程語言基礎，但又懶得花費大把時間挨條查文檔的人看。

歷史來源

網景

在上個世紀的1995年，當時的網景公司正憑藉其Navigator瀏覽器成爲Web時代開啓時最著名的第一代互聯網公司。由於網景公司希望能在靜態HTML頁面上添加一些動態效果，於是叫Brendan Eich這哥們在兩週之內設計出了JavaScript語言。你沒看錯，這哥們只用了10天時間。

爲什麼起名叫JavaScript？原因是當時Java語言非常紅火，所以網景公司希望借Java的名氣來推廣，但事實上JavaScript除了語法上有點像Java，其他部分基本上沒啥關係。

ECMAScript

因爲網景開發了JavaScript，一年後微軟又模仿JavaScript開發了JScript，爲了讓JavaScript成爲全球標準，幾個公司聯合ECMA（European Computer Manufacturers Association）組織定製了JavaScript語言的標準，被稱爲ECMAScript標準。所以簡單說來就是，ECMAScript是一種語言標準，而JavaScript是網景公司對ECMAScript標準的一種實現。

那爲什麼不直接把JavaScript定爲標準呢？因爲JavaScript是網景的註冊商標。不過大多數時候，我們還是用JavaScript這個詞。如果你遇到ECMAScript這個詞，簡單把它替換爲JavaScript就行了。

ECMAScript 6

最新版ECMAScript 6標準（簡稱ES6）已經在2015年6月正式發佈了，一般，講到JavaScript的版本，實際上就是說它實現了ECMAScript標準的哪個版本。

由於瀏覽器在發佈時就確定了JavaScript的版本，加上很多用戶還在使用IE6這種古老的瀏覽器，這就導致你在寫JavaScript的時候，要照顧一下老用戶，不能一上來就用最新的ES6標準寫，否則，老用戶的瀏覽器是無法運行新版本的JavaScript代碼的。

語法

語句和代碼塊

JavaScript的語法和C語言一樣，每個語句以;結束，代碼塊用{...}包圍。但是，JavaScript並不強制要求在每個語句的結尾加;，瀏覽器中負責執行JavaScript代碼的引擎會自動在每個語句的結尾補上;，但是有的時候自動補全會產生一些靈異事件，所以我們一般都嚴格在每個語句後面加上;。

縮進

雖然，縮進並不是語法必須要求的，我們看有些代碼寫的亂七八糟的，依然能運行。但是，代碼量大、邏輯嵌套複雜到一定程度，這些代碼就變得非常難以解讀。所以我們也嚴格按照每一個代碼塊{...}裏的內容，前面都加上4個空格的縮進。

註釋

註釋是個開發人員閱讀的，解析引擎會自動無視這些內容。 
JavaScript的縮進有兩種，一種是單行註釋，以//開頭，後面的內容都爲註釋。另外一種是塊註釋 /*...*/，中間的內容都爲註釋。

大小寫

JavaScript和C語言，是區分大小寫的，編碼過程中經常會遇到某個字母大小寫錯誤引起的Bug，需要非常注意。

變量

聲明及賦值

JavaScript聲明變量的時候，只需要用var後面加上變量名即可。變量名可以由字母，數字，_,$來組合，並且不能以數字開頭，此外，變量名也不能是關鍵字。賦值用=來表示。

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> abc = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'Hello, world'</span>;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> num = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

此外，由於JavaScript是弱類型語言，所以，可以給變量賦不同類型的值。

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> abc = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'Hello, world'</span>;
abc = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>; </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

數據類型

數值型

JavaScript的數值沒有區分整形，單、雙精度浮點型等，只有一個數值型。比較特殊的是還有一個非數值和一個無限大，分別用NaN或者Infinity表示。

布爾型

JavaScript的布爾型用true，false表示真和假。需要注意只能是小寫，不能大寫或者大小寫混合。

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> isEmpty = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>;  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//這是假</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> isLogin = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>;   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//這是真</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

空值

JavaScript的空值有null，undefine。實際應用中，兩者並沒有什麼區別，大部分時候是用到前者。需要注意的是，空和0,''的區別，0是一個數值，而''表示一個長度爲0的字符串。

字符串

JavaScript的字符串用''或者""表示。如果剛好字符串裏帶有"或者'，就需要使用轉義字符\。

<code class="hljs 1c has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"他說：\"</span>今天天氣不錯！\<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

此外，比如換行\n,unicode編碼\u####都需要用到轉義字符。 
JavaScript的字符串可以用下標來獲取字符串對應位置的字符，但是不能通過此方法賦值。字符串還有一些諸如截取，轉換大小寫，獲取長度等等的方法，具體參考文檔。

運算符

JavaScript的運算符有四則運算符，模運算符，比較運算符等。四則運算符就是我們常見的+-*/,模運算符用於求餘%，比較運算符>，== ，<，>=，===，其中==會轉換類型比較，===不會轉換類型比較。例如：

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> abc = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> num = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;
alert(num==abc); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//結果是true</span>
alert(num===abc);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//結果是false</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

對象

JavaScript的對象和C語言的結構體類似，是描述同一個東西的數據集合，但是相對更靈活。

<code class="hljs applescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">var laomao = {
    <span class="hljs-property" style="box-sizing: border-box;">name</span> : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"老貓是吧"</span>,
    age : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">24</span>,
    isMan : <span class="hljs-constant" style="box-sizing: border-box;">true</span>,
    money : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>,
};
alert(laomao.<span class="hljs-property" style="box-sizing: border-box;">name</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

分支

JavaScript的分支有if 和switch兩大種，和C語言基本一致。

<code class="hljs lua has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">//<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>...<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span>...結構
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span> > <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>) {
    alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'這是真的'</span>);
} <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> {
    alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'老子纔不信'</span>);
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

<code class="hljs lua has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">//<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>...<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">elseif</span>...<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span>結構
var age = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">30</span>;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (age < <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>) {
    alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'小孩'</span>);
} <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (age >= <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span> && age < <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">18</span>) {
    alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'年輕人'</span>);
} <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> {
    alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'老人了'</span>);
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">switch</span>...<span class="hljs-reserved" style="box-sizing: border-box;">case</span>...結構
<span class="hljs-reserved" style="box-sizing: border-box;">var</span> code = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">404</span>;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">switch</span> (code) {
    <span class="hljs-reserved" style="box-sizing: border-box;">case</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">404</span>:
        alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'頁面不存在'</span>);
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;
    <span class="hljs-reserved" style="box-sizing: border-box;">case</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>:
        alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'服務器給響應了'</span>);
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;
    <span class="hljs-reserved" style="box-sizing: border-box;">default</span> :
        alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'網絡連接失敗'</span>);
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li></ul>

循環

JavaScript的循環有for 和while兩大種，和C語言基本一致。

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//for循環計算0~99之間所有整數的和</span>
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">var</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">sum</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;
for(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">var</span> i<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;i<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>;i<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">++</span>) {
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">sum</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">sum</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">+</span> i;
}
alert(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">sum</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//while循環計算0~99之間所有整數的和</span>
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">var</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">sum</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">var</span> i <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">while</span>(i <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>) {
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">sum</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">+=</span> i;
    i<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">++</span>;
}
alert(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">sum</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

容器

JavaScript的容器有數組，字典，集合，其中字典和集合需要支持ES6標準的瀏覽器才能使用，否則會出現ReferenceError錯誤。

數組

array，數組是一個通過下標管理元素的集合，JavaScript的數組可以同時存放不同類型的數據。可以通過[]或者Array()來創建數組。

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> arr = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Array</span>(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ab"</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>);
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> arr2 = [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ab"</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">123</span>,<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NaN</span>];
alert(arr);
alert(arr2);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

字典

map，字典是一個通過鍵值對（key-value）管理元素的集合，對字典裏的數據進行管理都是通過key來操作，所以一個字典裏key不會相同。

<code class="hljs actionscript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> myDic = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Map();
myDic.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">set</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'name'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'laomao'</span>);

<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//創建一個字典</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> dic = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Map([[<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'city'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'xm'</span>],[<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'id'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'0592'</span>],[<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'human'</span>,myDic]]);
dic.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">set</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'address'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'觀日路'</span>);  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//增加一個鍵值對</span>
dic.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">get</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'city'</span>);  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//獲取鍵爲ciyt的值</span>
dic.has(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'address'</span>);  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//判斷是否有鍵爲address的數據</span>
dic.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">delete</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'id'</span>);  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//刪除鍵爲id的數據</span>

alert(dic.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">get</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'human'</span>).<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">get</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'name'</span>));</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

集合

set，集合，是一個無序的容器，因爲無序，所以也不會有重複的元素。

<code class="hljs oxygene has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//創建集合set,包括2個元素999和888</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> mySet = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">Set</span>([<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">999</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">888</span>]);  
mySet.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">add</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'hello'</span>);  
mySet.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">add</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'world'</span>);
mySet.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">add</span>(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">123</span>);     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//增加元素123</span>
alert(mySet.size);  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//獲取mySet的個數</span>
mySet.delete(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">123</span>);  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//刪除元素123</span>
alert(mySet.size);

<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//遍歷mySet的所有元素</span>
mySet.forEach(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(value)</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">{
    alert(value);
}</span>);</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li></ul>

以上內容有部分參考自: 
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set