前端开发——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