JavaScript知识概括

JavaScript简介

什么是语言？

• 计算机就是一个由人来控制的机器，人让它干嘛，它就得干嘛。
• 我们要学习的语言就是人和计算机交流的工具，人类通过语言 来控制、操作计算机。
• 编程语言和我们说的中文、英文本质上没有区别，只是语法比 较特殊。
• 语言的发展：
  ①纸带机：机器语言
  ②汇编语言：符号语言
  ③现代语言：高级语言

起源：

• JavaScript诞生于1995年，它的出现主要是用于处理网页中的 前端验证。
• 所谓的前端验证，就是指检查用户输入的内容是否符合一定的 规则。
• 比如：用户名的长度，密码的长度，邮箱的格式等。

简史：

• JavaScript是由网景公司发明，起初命名为LiveScript，后来由 于SUN公司的介入更名为了JavaScript。
• 1996年微软公司在其最新的IE3浏览器中引入了自己对 JavaScript的实现JScript。
• 于是在市面上存在两个版本的JavaScript，一个网景公司的 JavaScript和微软的JScript。
• 为了确保不同的浏览器上运行的JavaScript标准一致，所以几 个公司共同定制了JS的标准名命名为ECMAScript。

实现：

• ECMAScript是一个标准，而这个标准需要由各个厂商去实现。
• 不同的浏览器厂商对该标准会有不同的实现。
• 我们已经知道ECMAScript是JavaScript标准，所以一般情况下这两个词我们认为是一个意思。
• 但是实际上JavaScript的含义却要更大一些。
• 一个完整的JavaScript实现应该由以下三个部分构成：
• 一个完整的JavaScript实现包含了三个部分：ECMAScript、DOM和BOM。

JS的特点：

• 解释型语言
• 类似于 C 和 Java 的语法结构
• 动态语言
• 基于原型的面向对象

解释型语言：

• JavaScript是一门解释型语言，所谓解释型值语言不需要被编 译为机器码在执行，而是直接执行。
• 由于少了编译这一步骤，所以解释型语言开发起来尤为轻松， 但是解释型语言运行较慢也是它的劣势。
• 不过解释型语言中使用了JIT技术，使得运行速度得以改善。

动态语言：

• JavaScript是一门动态语言，所谓的动态语言可以暂时理解为 在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了。当然这个问题我们 以后再谈。
• 不过在补充一句动态语言相比静态语言性能上要差一些，不过由于JavaScript中应用的JIT技术，所以JS可能是运行速度最快的动态语言了。

基于原型的面向对象：

• JavaScript是一门面向对象的语言。
• Java也是一门面向对象的语言，但是与Java不同JavaScript是基于原型的面向对象。

JavaScript语法

JavaScript编写位置：

• JS代码需要编写到script标签中
• 推荐使用的方式：可以将js代码编写到外部js文件中，然后通过script标签引入，写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制。
  ①script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略，如果需要则可以在创建一个新的script标签用于编写内部代码。
• 可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码。

<a href="javascript:alert('让你点你就点！！');">你也点我一下</a>
<a href="javascript:;">你也点我一下</a>

• 可以将js代码编写到标签的onclick属性中，当我们点击按钮时，js代码才会执行虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用。

JS基本语法：

• 注释中的内容不会被执行，但是可以在源代码中查看，要养成良好的编写注释的习惯，也可以通过注释来对代码进行一些简单的调试。
• 多行注释

/*
alert("hello");
*/

• 单行注释

//alert("hello");

• JS中严格区分大小写
• JS中每一条语句以分号(;)结尾
  ①如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，
  ②而且有些时候，浏览器会加错分号，所以在开发中分号必须写
• JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化

字面量和变量：

• 字面量，都是一些不可改变的值，比如 ：1 2 3 4 5 。字面量都是可以直接使用，但是我们一般都不会直接使用字面量
• 变量 变量可以用来保存字面量，而且变量的值是可以任意改变的。变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，而很少直接使用字面量。可以通过变量对字面量进行描述。

标识符：

• 在JS中所有的可以由我们自主命名的都可以称为是标识符，例如：变量名、函数名、属性名都属于标识符。
• 命名一个标识符时需要遵守如下的规则：
  ①.标识符中可以含有字母、数字、_、$
  ②标识符不能以数字开头
  ③标识符不能是ES中的关键字或保留字
  ④标识符一般都采用驼峰命名法
  <1>首字母小写，每个单词的开头字母大写，其余字母小写：helloWorld xxxYyyZzz
• JS底层保存标识符时实际上是采用的Unicode编码，所以理论上讲，所有的utf-8中含有的内容都可以作为标识符。

数据类型：

• 数据类型指的就是字面量的类型，在JS中一共有六种数据类型：
  ①String 字符串
  ②Number 数值
  ③Boolean 布尔值
  ④Null 空值
  ⑤Undefined 未定义
  ⑥Object 对象
• 其中String Number Boolean Null Undefined属于基本数据类型，而Object属于引用数据类型。

数据类型

String字符串：

• 在JS中字符串需要使用引号引起来，使用双引号或单引号都可以，但是不要混着用。
• 引号不能嵌套，双引号不能放双引号，单引号不能放单引号
• 在字符串中我们可以使用\作为转义字符，当表示一些特殊符号时可以使用\进行转义。

\" 表示 "
\' 表示 '
\n 表示换行
\t 制表符
\\ 表示\

Number类型：

• 在JS中所有的数值都是Number类型，包括整数和浮点数（小数）。
• JS中可以表示：
  ①数字的最大值：Number.MAX_VALUE=1.7976931348623157e+308
  ②Number.MIN_VALUE 大于0的最小值=5e-324
• 如果使用Number表示的数字超过了最大值，则会返回一个 Infinity 表示正无穷。-Infinity 表示负无穷
• 使用typeof检查Infinity也会返回number
• NaN 是一个特殊的数字，表示Not A Number，使用typeof检查一个NaN也会返回number。
• 可以使用一个运算符 typeof来检查一个变量的类型
  ①语法：typeof 变量
  ②检查字符串时，会返回string
  ③检查数值时，会返回number
• 在JS中整数的运算基本可以保证精确，如果使用JS进行浮点运算，可能得到一个不精确的结果。所以千万不要使用JS进行对精确度要求比较高的运算。

Boolean类型：

• Boolean 布尔值 布尔值只有两个，主要用来做逻辑判断
  ①true表示真
  ②false表示假
• 使用typeof检查一个布尔值时，会返回boolean

Null和Undefined：

• Null（空值）类型的值只有一个，就是null。null这个值专门用来表示一个为空的对象。使用typeof检查一个null值时，会返回object。
• Undefined（未定义）类型的值只有一个，就是undefind。当声明一个变量，但是并不给变量赋值时，它的值就是undefined。使用typeof检查一个undefined时也会返回undefined。
  ①但如果直接使用未声明的变量会直接报错。

强制类型转换：

• 指将一个数据类型强制转换为其他的数据类型
• 类型转换主要指，将其他的数据类型，转换为String，Number，Boolean。

转换为String：

• 方式一：调用被转换数据类型的toString()方法，该方法不会影响到原变量，它会将转换的结果返回。
  ①但是注意：null和undefined这两个值没有toString()方法，如果调用他们的方法，会报错。
• 方式二：调用String()函数，并将被转换的数据作为参数传递给函数，使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法，但是对于null和undefined，就不会调用toString()方法。它会将 null 直接转换为 "null"，将 undefined 直接转换为 "undefined"。

转换为Number：

• 转换方式一：使用Number()函数
  ①字符串 --> 数字
  <1>如果是纯数字的字符串，则直接将其转换为数字
  <2>如果字符串中有非数字的内容，则转换为NaN
  <3>如果字符串是一个空串或者是一个全是空格的字符串，则转换为数字 0
  ②布尔 --> 数字
  <1>true 转成数字 1
  <2>false 转成数字 0
  <3>null --> 数字 0
  <4>undefined --> 数字 NaN
• 转换方式二：这种方式专门用来对付字符串
  ①parseInt() 把一个字符串转换为一个整数
  ②parseFloat() 把一个字符串转换为一个浮点数

其他的进制的数：

• 在js中，如果需要表示16进制的数字，则需要以0x开头。如果需要表示8进制的数字，则需要以0开头。如果要要表示2进制的数字，则需要以0b开头。但是不是所有的浏览器都支持。

//十六进制
a = 0x10;
a = 0xff;
a = 0xCafe;
			
//八进制数字
a = 070;
			
//二进制数字
a = 0b10;

• 像"070"这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析。 a = “070”;
  ①可以在parseInt()中传递一个第二个参数，来指定数字的进制。

a = parseInt(a,10);

转换为Boolean：

• 使用Boolean()函数
  ①数字 —> 布尔
  <1>除了0和NaN，其余的都是true
  ②字符串 —> 布尔
  <1>除了空串，其余的都是true
  ③null和undefined都会转换为false
  ④对象也会转换为true

运算符

运算符：

• 运算符也叫操作符，通过运算符可以对一个或多个值进行运算,并获取运算结果
  ①比如：typeof就是运算符，可以来获得一个值的类型，它会将该值的类型以字符串的形式返回：
  number string boolean undefined object
• 算数运算符，当对非Number类型的值进行运算时，会将这些值转换为Number然后再运算。任何值和NaN做运算都得NaN。
  ①+
  <1>+可以对两个值进行加法运算，并将结果返回，如果对两个字符串进行加法运算，则会做拼串，会将两个字符串拼接为一个字符串，并返回。任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作。
  ②-
  <1>可以对两个值进行减法运算，并将结果返回
  ③*
  <1>* 可以对两个值进行乘法运算
  ④/
  <1>/ 可以对两个值进行除法运算
  ⑤%
  <1>% 取模运算（取余数）
• 注意：任何值和字符串相加都会转换为字符串，并做拼串操作，我们可以利用这一特点，来将一个任意的数据类型转换为String。我们只需要为任意的数据类型 + 一个 “” 即可将其转换为String。这是一种隐式的类型转换，由浏览器自动完成，实际上它也是调用String()函数。
• 注意： 任何值做- * /运算时都会自动转换为Number，我们可以利用这一特点做隐式的类型转换。可以通过为一个值 -0 *1 /1来将其转换为Number。原理和Number()函数一样，使用起来更加简单。

一元运算符：

• 一元运算符，只需要一个操作数
• +正号： 正号不会对数字产生任何影响
• - 负号：负号可以对数字进行负号的取反
• 对于非Number类型的值，它会将先转换为Number，然后再运算。可以对一个其他的数据类型使用+,来将其转换为number，它的原理和Number()函数一样。

自增和自减：

• 自增 ++：通过自增可以使变量在自身的基础上增加1，对于一个变量自增以后，原变量的值会立即自增1。自增分成两种：后++(a++) 和 前++(++a)，无论是a++ 还是 ++a，都会立即使原变量的值自增1
  ①不同的是a++ 和 ++a的值不同
  <1>a++的值等于原变量的值（自增前的值）
  <2>++a的值等于新值 （自增后的值）
• 自减 --，通过自减可以使变量在自身的基础上减1，自减分成两种：后–(a–) 和 前–(--a)，无论是a-- 还是 --a 都会立即使原变量的值自减1。
  ①不同的是a-- 和 --a的值不同
  <1>a-- 是变量的原值 （自减前的值）
  <2>–a 是变量的新值 （自减以后的值）

逻辑运算法：

• JS中为我们提供了三种逻辑运算符：
• ! 非
  ①!可以用来对一个值进行非运算
  ②所谓非运算就是值对一个布尔值进行取反操作，true变false，false变true
  ③如果对一个值进行两次取反，它不会变化，所以我们可以利用该特点，来将一个其他的数据类型转换为布尔值，可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean()函数一样。
• && 与
  ①&&可以对符号两侧的值进行与运算并返回结果
  ②运算规则：
  <1>两个值中只要有一个值为false就返回false，只有两个值都为true时，才会返回true。
  <2>JS中的“与”属于短路的与，如果第一个值为false，则不会看第二个值。
• || 或
  ① ||可以对符号两侧的值进行或运算并返回结果
  ②运算规则：
  <1>两个值中只要有一个true，就返回true，如果两个值都为false，才返回false。
  <2>JS中的“或”属于短路的或，如果第一个值为true，则不会检查第二个值。

&& || 非布尔值的情况：

• 对于非布尔值进行与或运算时，会先将其转换为布尔值，然后再运算，并且返回原值。
• 与运算：
  ①如果第一个值为true，则必然返回第二个值
  ②如果第一个值为false，则直接返回第一个值
• 或运算：
  ①如果第一个值为true，则直接返回第一个值
  ②如果第一个值为false，则返回第二个值

赋值运算：

• 可以将符号右侧的值赋值给符号左侧的变量
• +=
  ①a += 5 等价于 a = a + 5
• -=
  ①a -= 5 等价于 a = a - 5
• *=
  ①a *= 5 等价于 a = a * 5
• /=
  ①a /= 5 等价于 a = a / 5
• %=
  ①a %= 5 等价于 a = a % 5

关系运算符：

• 通过关系运算符可以比较两个值之间的大小关系，如果关系成立它会返回true，如果关系不成立则返回false
• > 大于号
  ①以】判断符号左侧的值是否大于右侧的值
  ②如果关系成立，返回true，如果关系不成立则返回false
  ->= 大于等于
  ①判断符号左侧的值是否大于或等于右侧的值
  ②如果关系成立，返回true，如果关系不成立则返回false
• < 小于号
  ①判断符号左侧的值是否小于右侧的值
  ②如果关系成立，返回true，如果关系不成立则返回false
• <= 小于等于
  ①判断符号左侧的值是否小于或等于右侧的值
  ②如果关系成立，返回true，如果关系不成立则返回false
• 非数值的情况：
  ①对于非数值进行比较时，会将其转换为数字然后在比较
  ②如果符号两侧的值都是字符串时，不会将其转换为数字进行比较，而会分别比较字符串中字符的Unicode编码。

编码：

• 在字符串中使用转义字符输入Unicode编码：

\u四位编码

console.log("\u2620");

• 在网页中使用Unicode编码，这里的编码需要的是10进制。

&#编码; 

相等运算法：

• 相等运算符用来比较两个值是否相等，如果相等会返回true，否则返回false。
• 使用 =\= 来做相等运算
  ①当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后在比较。
• 使用 !=不相等
  ①不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false。
  ②使用 != 来做不相等运算，不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false。
• ===全等
  ①用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回false。
• !==不全等
  ①用来判断两个值是否不全等，和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true。

条件运算符：

• 条件运算符也叫三元运算符，语法：条件表达式?语句1:语句2;
• 执行的流程：条件运算符在执行时，首先对条件表达式进行求值，如果该值为true，则执行语句1，并返回执行结果。如果该值为false，则执行语句2，并返回执行结果。如果条件的表达式的求值结果是一个非布尔值，会将其转换为布尔值然后在运算。

false?alert("语句1"):alert("语句2");

运算符的优先级：

• , 运算使用,可以分割多个语句，一般可以在声明多个变量时使用。

//使用,运算符同时声明多个变量
//var a , b , c;
			
//可以同时声明多个变量并赋值
//var a=1 , b=2 , c=3;

• 就和数学中一样，在JS中运算符也有优先级，比如：先乘除 后加减。在JS中有一个运算符优先级的表，在表中越靠上优先级越高，优先级越高越优先计算，如果优先级一样，则从左往右计算。
• 但是这个表我们并不需要记忆，如果遇到优先级不清楚,可以使用()来改变优先级。

流程控制

代码块：

• 我们的程序是由一条一条语句构成的，语句是按照自上向下的顺序一条一条执行的。在JS中可以使用{}来为语句进行分组,同一个{}中的语句我们称为是一组语句，它们要么都执行，要么都不执行，一个{}中的语句我们也称为叫一个代码块。
• 在代码块的后边就不用再编写;了

{
	var a = 10;	
	alert("hello");
	console.log("你好");
	document.write("语句");
}

• JS中的代码块，只具有分组的的作用，没有其他的用途，代码块内容的内容，在外部是完全可见的。

流程控制语句：

• JS中的程序是从上到下一行一行执行的，通过流程控制语句可以控制程序执行流程，使程序可以根据一定的条件来选择执行。
• 语句的分类：
  ①条件判断语句
  ②条件分支语句
  ③循环语句

if语句（条件判断语句）：

• 条件判断语句：使用条件判断语句可以在执行某个语句之前进行判断，如果条件成立才会执行语句，条件不成立则语句不执行。
• 语法一：
  ①if语句在执行时，会先对条件表达式进行求值判断，如果条件表达式的值为true，则执行if后的语句，如果条件表达式的值为false，则不会执行if后的语句。
  ②if语句只能控制紧随其后的那个语句,如果希望if语句可以控制多条语句，可以将这些语句统一放到代码块中
  ③if语句后的代码块不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句

if(条件表达式){
		语句
}

• 语法二：
  ①当该语句执行时，会先对if后的条件表达式进行求值判断，如果该值为true，则执行if后的语句，如果该值为false，则执行else后的语句。

if(条件表达式){
		语句...
}else{
		语句...
}

• 语法三：
  ①当该语句执行时，会从上到下依次对条件表达式进行求值判断，如果值为true，则执行当前语句。如果值为false，则继续向下判断。如果所有的条件都不满足，则执行最后一个else后的语句。该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束语句。

if(条件表达式){
		语句...
}else if(条件表达式){
		语句...
}else if(条件表达式){
		语句...
}else{
		语句...
}

条件分支语句：

• 条件分支语句也叫switch语句。语法：

switch(条件表达式){
	case 表达式:
 		语句...
		break;
 	case 表达式:
		语句...
		break;
	default:
		语句...
		break;
}

• 执行流程：switch…case…语句在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较，如果比较结果为true，则从当前case处开始执行代码。
• 当前case后的所有的代码都会执行，我们可以在case的后边跟着一个break关键字，这样可以确保只会执行当前case后的语句，而不会执行其他的case。如果比较结果为false，则继续向下比较。如果所有的比较结果都为false，则只执行default后的语句。switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能，同样使用if也可以实现switch的功能，所以我们使用时，可以根据自己的习惯选择。

循环语句：

• 循环语句：通过循环语句可以反复的执行一段代码多次
• while循环， 语法：

while(条件表达式){
	语句...
}

• while语句在执行时，先对条件表达式进行求值判断，如果值为true，则执行循环体，循环体执行完毕以后，继续对表达式进行判断，如果为true，则继续执行循环体，以此类推，如果值为false，则终止循环。
• do...while循环，语法：

do{
	语句...
}while(条件表达式)

• 执行流程：do…while语句在执行时，会先执行循环体，循环体执行完毕以后，在对while后的条件表达式进行判断，如果结果为true，则继续执行循环体，执行完毕继续判断以此类推，如果结果为false，则终止循环。
• 总结：实际上这两个语句功能类似，不同的是while是先判断后执行，而do…while会先执行后判断，do…while可以保证循环体至少执行一次，而while不能。
• 注意：像这种将条件表达式写死为true的循环，叫做死循环，该循环不会停止，除非浏览器关闭，死循环在开发中慎用，可以使用break，来终止循环。

while(true){
	alert(n++);
}

• 步骤：创建一个循环，往往需要三个步骤：

//1.创初始化一个变量
var i = 11;			
//2.在循环中设置一个条件表达式
while(i <= 10){
//3.定义一个更新表达式，每次更新初始化变量
document.write(i++ +"<br />")

• for语句：也是一个循环语句，也称为for循环，在for循环中，为我们提供了专门的位置用来放三个表达式：
  ①初始化表达式
  ②条件表达式
  ③更新表达式
• for循环的语法：

for(初始化表达式;条件表达式;更新表达式){
	语句
}

• for循环的执行流程：
  ①执行初始化表达式，初始化变量（初始化表达式只会执行一次）
  ②执行条件表达式，判断是否执行循环。
  <1>如果为true，则执行循环③
  <2>如果为false，终止循环
  ④执行更新表达式，更新表达式执行完毕继续重复②
• for循环中的三个部分都可以省略，也可以写在外部。如果在for循环中不写任何的表达式，只写两个;。此时循环是一个死循环会一直执行下去，慎用。

for(;;){
	alert("hello");
}

break和continue：

• break关键字可以用来退出switch或循环语句，不能在if语句中使用break和continue。break关键字，会立即终止离他最近的那个循环语句。
• 可以为循环语句创建一个label，来标识当前的循环。

label:循环语句

• 使用break语句时，可以在break后跟着一个label，这样break将会结束指定的循环，而不是最近的。
• continue关键字可以用来跳过当次循环，同样continue也是默认只会对离他最近的循环循环起作用。

对象

对象：

• JS中数据类型
  ①String 字符串
  ②Number 数值
  ③Boolean 布尔值
  ④Null 空值
  ⑤Undefined 未定义
• 以上这五种类型属于基本数据类型，以后我们看到的值，只要不是上边的5种，全都是对象。
• Object 对象，基本数据类型都是单一的值"hello" 123 true,值和值之间没有任何的联系。
• 在JS中来表示一个人的信息（name gender age）：

var name = "孙悟空";
var gender = "男";
var age = 18;

• 如果使用基本数据类型的数据，我们所创建的变量都是独立，不能成为一个整体。
• 对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。
• 对象的分类：
  ①内建对象
  <1>由ES标准中定义的对象，在任何的ES的实现中都可以使用，比如：Math String Number Boolean Function Object。
  ②宿主对象
  <1>由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象。比如 BOM DOM。
  ③自定义对象
  <1>由开发人员自己创建的对象
• 创建对象：使用new关键字调用的函数，是构造函数constructor。构造函数是专门用来创建对象的函数。使用typeof检查一个对象时，会返回object。

var obj = new Object();

• 在对象中保存的值称为属性，向对象添加属性。语法：对象.属性名 = 属性值。
• 读取对象中的属性，语法：对象.属性名。如果读取对象中没有的属性，不会报错而是会返回undefined。
• 修改对象的属性值，语法：对象.属性名 = 新值。
• 删除对象的属性，语法：delete 对象.属性名。

属性名和属性值：

• 向对象中添加属性，属性名：对象的属性名不强制要求遵守标识符的规范。什么乱七八糟的名字都可以使用。但是我们使用是还是尽量按照标识符的规范去做。
• 如果要使用特殊的属性名，不能采用.的方式来操作。需要使用另一种方式：语法：对象["属性名"] = 属性值。读取时也需要采用这种方式
• 使用[]这种形式去操作属性，更加的灵活，在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性。
• JS对象的属性值，可以是任意的数据类型，甚至也可以是一个对象。
• in 运算符，通过该运算符可以检查一个对象中是否含有指定的属性。如果有则返回true，没有则返回false。语法："属性名" in 对象

基本和引用数据类型：

• 基本数据类型：String Number Boolean Null Undefined
• 引用数据类型：Object
• JS中的变量都是保存到栈内存中的，基本数据类型的值直接在栈内存中存储，值与值之间是独立存在，修改一个变量不会影响其他的变量
• 对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性时，另一个也会受到影响。

对象字面量：

• 使用对象字面量，可以在创建对象时，直接指定对象中的属性 语法：{属性名:属性值,属性名:属性值....}
• 对象字面量的属性名可以加引号也可以不加，建议不加, 如果要使用一些特殊的名字，则必须加引号
• 属性名和属性值是一组一组的名值对结构，名和值之间使用:连接，多个名值对之间使用,隔开
• 如果一个属性之后没有其他的属性了，就不要写,

函数

函数：

• 函数 function。函数也是一个对象。函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）
• 函数中可以保存一些代码在需要的时候调用。使用typeof检查一个函数对象时，会返回function
• 我们在实际开发中很少使用构造函数来创建一个函数对象。创建一个函数对象，可以将要封装的代码以字符串的形式传递给构造函数。

var fun = new Function("console.log('Hello 这是我的第一个函数');");

• 封装到函数中的代码不会立即执行，函数中的代码会在函数调用的时候执行。调用函数语法：函数对象()。当调用函数时，函数中封装的代码会按照顺序执行。
• 使用函数声明 来创建一个函数。语法：

function 函数名([形参1,形参2...形参N]){
			语句...
}

• 使用函数表达式 来创建一个函数。语法：

var 函数名  = function([形参1,形参2...形参N]){
   	语句....
}

函数的参数：

• 可以在函数的()中来指定一个或多个形参（形式参数）。多个形参之间使用,隔开，声明形参就相当于在函数内部声明了对应的变量，但是并不赋值。
• 在调用函数时，可以在()中指定实参（实际参数）。实参将会赋值给函数中对应的形参。
• 调用函数时解析器不会检查实参的类型。所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对参数进行类型的检查，函数的实参可以是任意的数据类型
• 调用函数时，解析器也不会检查实参的数量。多余实参不会被赋值。如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined。

传递参数：

• JS中的所有的参数传递都是按值传递的。 也就是说把函数外部的值赋值给函数内部 的参数，就和把值从一个变量赋值给另一 个变量是一样的。

执行环境：

• 执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的 行为。
• 每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。
• 全局执行环境是最外围的一个执行环境。在 Web 浏览器中，全局执行环境被认为是 window 对象，因此所有全局变量和函数都是作为window 对象的属性和方法创建的。
• 某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁。
• 在内部环境可以读取外部环境的变量，反之则不行。

返回值：

• 可以使用 return 来设置函数的返回值，语法：return 值
• return后的值将会会作为函数的执行结果返回，可以定义一个变量，来接收该结果。
• 在函数中return后的语句都不会执行。
• 若函数不返回则为无函数结果，有以下：
  ①函数中默认不写return，则会返回undefined未定义
  ②函数中写了return语句，但后面不跟任何值，就相当于返回一个undefined未定义。
• 若函数有返回结果则：
  ①return后可以跟任意类型的值。
• 在事件处理函数中：
  ①return true; 继续执行默认行为。
  ②return;继续执行默认行为。
  ③return false;阻止执行默认行为。

立即执行函数：

函数对象();

• 立即执行函数，函数定义完，立即被调用，这种函数叫做立即执行函数。立即执行函数往往只会执行一次。

对象的函数（方法）：

• 函数也可以称为对象的属性，如果一个函数作为一个对象的属性保存，那么我们称这个函数时这个对象的方法。
• 调用这个函数就说调用对象的方法（method）。但是它只是名称上的区别没有其他的区别。

枚举对象中的属性：

• 枚举对象中的属性。使用for … in 语句。语法：

for(var 变量 in 对象){

 }

• for…in语句 对象中有几个属性，循环体就会执行几次，每次执行时，会将对象中的一个属性的名字赋值给变量。

作用域：

• 作用域指一个变量的作用的范围
• 在JS中一共有两种作用域：
  ①全局作用域：直接编写在script标签中的JS代码，都在全局作用域。全局作用域在页面打开时创建，在页面关闭时销毁。在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用
  <1>在全局作用域中：创建的变量都会作为window对象的属性保存，创建的函数都会作为window对象的方法保存。全局作用域中的变量都是全局变量，在页面的任意的部分都可以访问的到
  ②函数作用域：下面介绍。

变量的声明提前：

• 变量的声明提前，使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值），但是如果声明变量时不使用var关键字，则变量不会被声明提前。
• 函数的声明提前，使用函数声明形式创建的函数 function 函数(){}。它会在所有的代码执行之前就被创建，所以我们可以在函数声明前来调用函数。使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用。

函数作用域：

• 函数作用域：调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁。每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的。在函数作用域中可以访问到全局作用域的变量。在全局作用域中无法访问到函数作用域的变量。
• 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用。如果没有则向上一级作用域中寻找，直到找到全局作用域，如果全局作用域中依然没有找到，则会报错ReferenceError。
• 在函数中要访问全局变量可以使用window对象
• 在函数作用域也有声明提前的特性，使用var关键字声明的变量，会在函数中所有的代码执行之前被声明。函数声明也会在函数中所有的代码执行之前执行
• 在函数中，不是用var声明的变量都会成为全局变量
• 定义形参就相当于在函数作用域中声明了变量
• 全局变量可以通过window.属性找到。

使用与不使用var定义的变量：

• JavaScript变量分为 局部变量 和 全局变量简单理解：
  ①在函数中用var声明的变量即为 局部变量
  ②在函数外用var声明的变量即为 全局变量
• 使用var声明变量也叫显示声明，不用var声明变量也叫隐式声明
• 在函数外，不管是使用var声明变量，还是不用var声明变量，它们都是全局变量。 全局变量其实是在window对象中添加属性并赋值。
• 在函数中，使用var声明的变量为局部变量，不用var声明的变量为全局变量
• 用var声明变量和不用var声明变量的区别之一：
  ①在函数外，用var声明的变量为全局变量，不用var声明的变量为全局变量
  ②在函数中，用var声明的变量为局部变量，不用var声明的变量为全局变量
  ③除了作用域的区别以外，同为全局变量，同为window对象的其中一个属性，用var声明的变量不可以删除，不用var声明的变量可以删除！
• 对象属性是否可删除, 其实是可以配置的
  ①Object.getOwnPropertyDescriptor(); 方法返回某个对象属性的描述对象
  ②Object.defineProperty(); 方法会直接在某个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象
  ③描述对象包含以下信息：
  <1>value 属性的值
  <2>writable 属性是否可读写
  <3>enumerable 属性是否可枚举
  <4>configurable 属性是否可配置(删除)
• 对象的属性是否可删除，取决于描述对象的配置属性configurable 用var声明的变量默认不可删除，不用var声明的变量默认带可删除。

debug：

this：

• 解析器在调用函数每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象，根据函数的调用方式的不同，this会指向不同的对象
  ①以函数的形式调用时，this永远都是window
  ②以方法的形式调用时，this就是调用方法的那个对象

工厂方法创建对象：

• 使用工厂方法创建对象，通过该方法可以大批量的创建对象 。
• 使用工厂方法创建的对象，使用的构造函数都是Object。所以创建的对象都是Object这个类型，就导致我们无法区分出多种不同类型的对象。

构造函数：

• 创建一个构造函数，专门用来创建Person对象的，构造函数就是一个普通的函数，创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写
• 构造函数和普通函数的区别就是调用方式的不同。普通函数是直接调用，而构造函数需要使用new关键字来调用
• 对于不加new来执行构造函数来说，返回值就是构造函数的执行结果；对于加new关键字来执行构造函数而言，如果return的是基本数据类型，那么忽视掉该return值，如果返回的是一个引用类型，那么返回该引用类型。
• 构造函数的执行流程：
  ①立刻创建一个新的对象
  ②将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
  ③逐行执行函数中的代码
  ④将新建的对象作为返回值返回
• 使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。 我们将通过一个构造函数创建的对象，称为是该类的实例
• this的情况：
  ①当以函数的形式调用时，this是window
  ②当以方法的形式调用时，谁调用方法this就是谁
  ③当以构造函数的形式调用时，this就是新创建的那个对象
• 使用instanceof可以检查一个对象是否是一个类的实例，语法：对象 instanceof 构造函数
• 所有的对象都是Object的后代，所以任何对象和Object做instanceof检查时都会返回true

构造函数的方法：

• 创建一个Person构造函数，在Person构造函数中，为每一个对象都添加了一个sayName方法，目前我们的方法是在构造函数内部创建的，也就是构造函数每执行一次就会创建一个新的sayName方法。也是所有实例的sayName都是唯一的。这样就导致了构造函数执行一次就会创建一个新的方法，
• 执行10000次就会创建10000个新的方法，而10000个方法都是一摸一样的。这是完全没有必要，完全可以使所有的对象共享同一个方法
• 将函数定义在全局作用域，污染了全局作用域的命名空间。而且定义在全局作用域中也很不安全
• 向原型中添加sayName方法

原型 prototype：

• 我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype。这个属性对应着一个对象，这个对象就是我们所谓的原型对象
• 如果函数作为普通函数调用prototype没有任何作用。当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
• 原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。
• 当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了
• 使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true
• 可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性，使用该方法只有当对象自身中含有属性时，才会返回true
• 原型对象也是对象，所以它也有原型，当我们使用一个对象的属性或方法时，会现在自身中寻找，自身中如果有，则直接使用，如果没有则去原型对象中寻找，如果原型对象中有，则使用，如果没有则去原型的原型中寻找,直到找到Object对象的原型，Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined
• 当我们直接在页面中打印一个对象时，事件上是输出的对象的toString()方法的返回值。如果我们希望在输出对象时不输出[object Object]，可以为对象添加一个toString()方法。

垃圾回收（GC）：

• 就像人生活的时间长了会产生垃圾一样，程序运行过程中也会产生垃圾。这些垃圾积攒过多以后，会导致程序运行的速度过慢，所以我们需要一个垃圾回收的机制，来处理程序运行过程中产生垃圾
• 当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，所以这种垃圾必须进行清理。
• 在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作。我们需要做的只是要将不再使用的对象设置null即可。

数组

数组（Array）：

• 数组也是一个对象。是内建对象，它和我们普通对象功能类似，也是用来存储一些值的。不同的是普通对象是使用字符串作为属性名的，而数组时使用数字来作为索引操作元素。
• 索引：从0开始的整数就是索引。 数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据
• 向数组中添加元素。语法：数组[索引] = 值
• 读取数组中的元素。语法：数组[索引] 。如果读取不存在的索引，他不会报错而是返回undefined。
• 获取数组的长度，可以使用length属性来获取数组的长度(元素的个数)。语法：数组.length
  ①对于连续的数组，使用length可以获取到数组的长度（元素的个数）
  ②对于非连续的数组，使用length会获取到数组的最大的索引+1，尽量不要创建非连续的数组
• 修改length。如果修改的length大于原长度，则多出部分会空出来。如果修改的length小于原长度，则多出的元素会被删除
• 向数组的最后一个位置添加元素。语法：数组[数组.length] = 值;

创建一个数组：

• 使用字面量来创建数组，语法:[]。使用字面量创建数组时，可以在创建时就指定数组中的元素
• 使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作文构造函数的参数传递
• 数组中的元素可以是任意的数据类型，也可以是对象。也可以是一个函数。数组中也可以放数组，如下这种数组我们称为二维数组

数组的方法：

• push()
  ①该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度，可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾。该方法会将数组新的长度作为返回值返回
• pop()
  ①该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
• unshift()
  ①向数组开头添加一个或多个元素，并返回新的数组长度。向前边插入元素以后，其他的元素索引会依次调整
• shift()
  ①可以删除数组的第一个元素，并将被删除的元素作为返回值返回

数组遍历：

• 所谓的遍历数组，就是将数组中所有的元素都取出来

for(var i=0 ; i<arr.length ; i++){
				console.log(arr[i]);
			}

forEach()：

• 一般我们都是使用for循环去遍历数组，JS中还为我们提供了一个方法，用来遍历数组
• forEach()这个方法只支持IE8以上的浏览器。IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach。还是使用for循环来遍历
• forEach()方法需要一个函数作为参数，像这种函数，由我们创建但是不由我们调用的，我们称为回调函数，数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素。以实参的形式传递进来，我们可以来定义形参，来读取这些内容
• 浏览器会在回调函数中传递三个参数：
  第一个参数，就是当前正在遍历的元素
  第二个参数，就是当前正在遍历的元素的索引
  第三个参数，就是正在遍历的数组

arr.forEach(function(value , index , obj){
				console.log(value);
			});

数组的方法详解：

• slice()
  ①可以用来从数组提取指定元素。该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
  ②参数：
  <1>截取开始的位置的索引,包含开始索引
  <2>截取结束的位置的索引,不包含结束索引
  1、第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
  2、索引可以传递一个负值，如果传递一个负值，则从后往前计算。例如：-1 倒数第一个。-2 倒数第二个、
• splice()
  ①可以用于删除数组中的指定元素，使用splice()会影响到原数组，会将指定元素从原数组中删除。并将被删除的元素作为返回值返回
  ②参数：
  第一个，表示开始位置的索引
  第二个，表示删除的数量
  第三个及以后可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
• concat()
  ①可以连接两个或多个数组，并将新的数组返回。该方法不会对原数组产生影响
• join()
  ①该方法可以将数组转换为一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回。在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符。如果不指定连接符，则默认使用,作为连接符。
• reverse()
  ①该方法用来反转数组（前边的去后边，后边的去前边），该方法会直接修改原数组
• sort()
  ①可以用来对数组中的元素进行排序。也会影响原数组，默认会按照Unicode编码进行排序。即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，所以对数字进排序时，可能会得到错误的结果。
  ②我们可以自己来指定排序的规则，我们可以在sort()添加一个回调函数，来指定排序规则，回调函数中需要定义两个形参,浏览器将会分别使用数组中的元素作为实参去调用回调函数，使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边。浏览器会根据回调函数的返回值来决定元素的顺序，
  <1>如果返回一个大于0的值，则元素会交换位置
  <2>如果返回一个小于0的值，则元素位置不变
  <3>如果返回一个0，则认为两个元素相等，也不交换位置
• 如果需要升序排列，则返回 a-b。如果需要降序排列，则返回b-a。

函数的方法：

• call()和apply()
  ①这两个方法都是函数对象的方法，需要通过函数对象来调用。当对函数调用call()和apply()都会调用函数执行。在调用call()和apply()可以将一个对象指定为第一个参数。此时这个对象将会成为函数执行时的this
  ②call()方法可以将实参在对象之后依次传递
  ③apply()方法需要将实参封装到一个数组中统一传递
• this的情况：
  ①以函数形式调用时，this永远都是window
  ②以方法的形式调用时，this是调用方法的对象
  ③以构造函数的形式调用时，this是新创建的那个对象
  ④使用call和apply调用时，this是指定的那个对象

arguments：

• 在调用函数时，浏览器每次都会传递进两个隐含的参数：
  ①函数的上下文对象 this
  ②封装实参的对象 arguments
  arguments是一个类数组对象,它也可以通过索引来操作数据，也可以获取长度，在调用函数时，我们所传递的实参都会在arguments中保存。arguments.length可以用来获取实参的长度。我们即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦。
  <1>arguments[0] 表示第一个实参
  <2>arguments[1] 表示第二个实参 。。。
  <3>它里边有一个属性叫做callee，这个属性对应一个函数对象，就是当前正在指向的函数的对象。

Date

Date：

• Date对象，在JS中使用Date对象来表示一个时间
• 如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间

var d = new Date();

• 创建一个指定的时间对象，需要在构造函数中传递一个表示时间的字符串作为参数。日期的格式： 月份/日/年 时:分:秒

var d2 = new Date("2/18/2011 11:10:30");

• getDate()获取当前日期对象是几日
• getDay()获取当前日期对象时周几。会返回一个0-6的值。0 表示周日。1表示周一
• getMonth()获取当前时间对象的月份，会返回一个0-11的值。0 表示1月，1 表示2月，11 表示12月。
• getFullYear()获取当前日期对象的年份
• getTime()获取当前日期对象的时间戳
  ①时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分0秒。到当前日期所花费的毫秒数（1秒 = 1000毫秒）。计算机底层在保存时间时使用都是时间戳。（保存不了其他格式）

Math

Math：

• Math和其他的对象不同，它不是一个构造函数，它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法,比如Math.PI 表示的圆周率
• abs()可以用来计算一个数的绝对值
• Math.ceil()可以对一个数进行向上取整，小数位只有有值就自动进1
• Math.floor()可以对一个数进行向下取整，小数部分会被舍掉
• Math.round()可以对一个数进行四舍五入取整
• Math.random()可以用来生成一个0-1之间的随机数
  ①生成一个0-x之间的随机数：Math.round(Math.random()x)
  ②生成一个x-y之间的随机数：Math.round(Math.random()(y-x)+x)
• max()可以获取多个数中的最大值
• min()可以获取多个数中的最小值
• Math.pow(x,y)返回x的y次幂
• Math.sqrt() 用于对一个数进行开方运算

包装类

包装类：

• 基本数据类型String Number Boolean Null Undefined
• 引用数据类型 Object
• 在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象
  ①String()可以将基本数据类型字符串转换为String对象
  ②Number()可以将基本数据类型的数字转换为Number对象
  ③Boolean()可以将基本数据类型的布尔值转换为Boolean对象
• 但是注意：我们在实际应用中不会使用基本数据类型的对象，如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果
• 方法和属性能添加给对象，不能添加给基本数据类型，当我们对一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法，调用完以后，在将其转换为基本数据类型。

字符串相关方法

字符串相关方法：

• 在底层字符串是以字符数组的形式保存的 [“H”,“e”,“l”]
• length属性，可以用来获取字符串的长度
• charAt()可以返回字符串中指定位置的字符，根据索引获取指定的字符
• charCodeAt()获取指定位置字符的字符编码（Unicode编码）
• String.formCharCode()可以根据字符编码去获取字符
• concat()可以用来连接两个或多个字符串。作用和+一样
• indexof()该方法可以检索一个字符串中是否含有指定内容。如果字符串中含有该内容，则会返回其第一次出现的索引，如果没有找到指定的内容，则返回-1。可以指定一个第二个参数，指定开始查找的位置
• lastIndexOf(); 该方法的用法和indexOf()一样，不同的是indexOf是从前往后找，而lastIndexOf是从后往前找，也可以指定开始查找的位置
• slice()可以从字符串中截取指定的内容，不会影响原字符串，而是将截取到内容返回。
  ①参数：
  第一个，开始位置的索引（包括开始位置）
  第二个，结束位置的索引（不包括结束位置），如果省略第二个参数，则会截取到后边所有的。也可以传递一个负数作为参数，负数的话将会从后边计算
• substring()可以用来截取一个字符串，可以slice()类似
  ①参数：
  第一个：开始截取位置的索引（包括开始位置）
  第二个：结束位置的索引（不包括结束位置）
  ②不同的是这个方法不能接受负值作为参数，如果传递了一个负值，则默认使用0。而且他还自动调整参数的位置，如果第二个参数小于第一个，则自动交换
• substr()用来截取字符串
  ①参数：
  1.截取开始位置的索引
  2.截取的长度
• split()可以将一个字符串拆分为一个数组
  ①参数：需要一个字符串作为参数，将会根据该字符串去拆分数组
  ②如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素
• toUpperCase()将一个字符串转换为大写并返回
• toLowerCase()将一个字符串转换为小写并返回

正则表达式

正则表达式：

• 邮箱号：admin@.com adminatguigu.com
• 邮件的规则：
  1.前边可以是xxxx乱七八糟
  2.跟着一个@
  3.后边可以是xxxx乱七八糟
  4…com获取其他的乱七八糟

var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;

• 正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，获取将字符串中符合规则的内容提取出来
• 创建正则表达式的对象语法：

var 变量 = new RegExp("正则表达式","匹配模式");
使用typeof检查正则对象，会返回object
var reg = new RegExp("a"); 这个正则表达式可以来检查一个字符串中是否含有a
在构造函数中可以传递一个匹配模式作为第二个参数，
可以是 i 忽略大小写  g 全局匹配模式

• 正则表达式的方法：test()。使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，如果符合则返回true，否则返回false
• 使用字面量来创建正则表达式，语法：var 变量 = /正则表达式/匹配模式。使用字面量的方式创建更加简单，使用构造函数创建更加灵活

var reg = new RegExp("a","i");
var reg = /a/i;

正则表达式语法：

• 使用 | 表示或者的意思
• []里的内容也是或的关系

[ab] == a|b
[a-z] 任意小写字母
[A-Z] 任意大写字母
[A-z] 任意字母
[0-9] 任意数字

• [^ ] 除了的意思

reg = /[^ab]/; 除了ab的所有字母

字符串和正则相关的方法：

• test()方法是一个正则表达式方法，用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
• split()可以将一个字符串拆分为一个数组。方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串。这个方法即使不指定全局匹配，也会全都插分
• search()可以搜索字符串中是否含有指定内容，如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1。
  ①它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串，serach()只会查找第一个，即使设置全局匹配也没用
• match()可以根据正则表达式，从一个字符串中将符合条件的内容提取出来。
  ①默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索，我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容。
  ②可以为一个正则表达式设置多个匹配模式，且顺序无所谓。match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果。
• replace()可以将字符串中指定内容替换为新的内容
  ①参数：
  1.被替换的内容，可以接受一个正则表达式作为参数
  2.新的内容
  ②默认只会替换第一个

正则表达式语法详解：

• 量词：通过量词可以设置一个内容出现的次数。量词只对它前边的一个内容起作用
  ①{n}正好出现n次
  ② {m,n}出现m-n次
  ③ {m,} m次以上
  ④ +至少一个，相当于{1,}
  ⑤ * 0个或多个，相当于{0,}
  ⑥ ?0个或1个，相当于{0,1}
• 检查一个字符串中是否以a开头
  ①^ 表示开头
  ②$ 表示结尾
  ③如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达
• 创建一个正则表达式，用来检查一个字符串是否是一个合法手机号
  ①手机号的规则：13567890123 （11位）
  <1>以1开头
  <2>第二位3-9任意数字
  <3>三位以后任意数字9个
  ②var phoneReg = /^1[3-9][0-9]{9}$/;
• 检查一个字符串中是否含有.。. 表示任意字符，在正则表达式中使用\作为转义字符。

\. 来表示.
\\  表示\

• 注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，如果要使用\则需要使用\来代替
• 其他正则表达式语法：
  ①\w任意字母、数字、_ [A-z0-9_]
  ② \W除了字母、数字、_ [^A-z0-9_]
  ③ \d任意的数字 [0-9]
  ④\D除了数字 [^0-9]
  ⑤\s空格
  ⑥\S除了空格
  ⑦\b单词边界
  ⑧\B除了单词边界

DOM

DOM简介：

• 浏览器已经为我们提供 文档节点 对象这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页。
• DOM，全称Document Object Model文档对象模型。JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
  ①文档表示的就是整个的HTML网页文档
  ②对象表示将网页中的每一个部分都转换为了一个对象。
  ③使用模型来表示对象之间的关系，这样方便我们获取对象。

节点：

• 节点Node，是构成我们网页的最基本的组成部分，网页中的 每一个部分都可以称为是一个节点。
  ①比如：html标签、属性、文本、注释、整个文档等都是一个节点。
• 虽然都是节点，但是实际上他们的具体类型是不同的。
  ①比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
• 节点的类型不同，属性和方法也都不尽相同。
• 节点：Node——构成HTML文档最基本的单元。常用节点分为四类：
  – 文档节点：整个HTML文档
  – 元素节点：HTML文档中的HTML标签
  – 属性节点：元素的属性
  – 文本节点：HTML标签中的文本内容

节点属性：

文档节点（document）

• 文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点。
• document对象作为window对象的属性存在的，我们不用获取可以直接使用。
• 通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。

元素节点（Element）：

• HTML中的各种标签都是元素节点，这也是我们最常用 的一个节点。
• 浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。
  ① 比如：document.getElementById()根据id属性值获取一个元素节点对象。

文本节点（Text）：

• 文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点。
  ①它包括可以字面解释的纯文本内容。
• 文本节点一般是作为元素节点的子节点存在的。
• 获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本 节点。
  ①例如： 元素节点.firstChild;获取元素节点的第一个子节点，一般为文本节点

属性节点（Attr）：

• 属性节点表示的是标签中的一个一个的属 性，这里要注意的是属性节点并非是元素 节点的子节点，而是元素节点的一部分。

• 可以通过元素节点来获取指定的属性节点。
  ①例如：元素节点.getAttributeNode(“属性名”);
  ②注意：我们一般不使用属性节点。

文档的加载：

• 浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行,如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象。
• onload事件会在整个页面加载完成之后才触发。为window绑定一个onload事件。该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。

语法API：

• 获取元素节点，通过document对象调用
  ①getElementById()通过id属性获取一个元素节点对象
  ②getElementsByTagName()通过标签名获取一组元素节点对象
  ③getElementsByName()通过name属性获取一组元素节点对象
• 获取元素节点的子节点，通过具体的元素节点调用
  ①getElementsByTagName()方法，返回当前节点的指定标签名后代节点
  ②childNodes属性，表示当前节点的所有子节点
  ③firstChild属性，表示当前节点的第一个子节点
  ④lastChild属性，表示当前节点的最后一个子节点
• 获取父节点和兄弟节点，通过具体的节点调用
  ①parentNode属性，表示当前节点的父节点
  ②previousSibling属性，表示当前节点的前一个兄弟节点
  ③nextSibling属性，表示当前节点的后一个兄弟节点
• 元素节点的属性，获取，元素对象.属性名
  ①element.value
  ②element.id
  ③element.className
• 设置，元素对象.属性名=新的值
  ①element.value = “hello”
  ②element.id = “id01”
  ③element.className = “newClass”
• 其他属性
  ①nodeValue文本节点可以通过nodeValue属性获取和设置文本节点的内容
  ②innerHTML元素节点通过该属性获取和设置标签内部的html代码
  ③innerText该属性可以获取到元素内部的文本内容，它和innerHTML类似，不同的是它会自动将html去除。
• 使用CSS选择器进行查询。这两个方法都是用document对象来调用，两个方法使用相同，都是传递一个选择器字符串作为参数，方法会自动根据选择器字符串去网页中查找元素。不同的地方是querySelector()只会返回找到的第一个元素，而querySelectorAll()会返回所有符合条件的元素。
  ①querySelector()，虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替。
  ②querySelectorAll()
• 节点的修改，这里的修改我们主要指对元素节点的操作。
  ①创建节点
  <1>document.createElement(标签名)
  <2>document.createTextNode(文本)
  <3>document.createAttribute(属性名);
  ②删除节点，父节点.removeChild(子节点)
  ③替换节点，父节点.replaceChild(新节点 , 旧节点)
  ④插入节点：
  <1>父节点.appendChild(子节点)
  <2>父节点.insertBefore(新节点 , 旧节点)

inner/outer-HTML/Text详解：

• 以下都是以div这个标签元素调用。
• innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)
• outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身）
• innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）
• outerText设置或获取标签自身及其所包含的文本信息（包括自身）
  

使用DOM操作CSS：

• 通过JS修改元素的样式：语法：元素.style.样式名 = 样式值
• 注意：如果CSS的样式名中含有-，这种名称在JS中是不合法的比如background-color。需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写
• 我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
• 但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效。所以尽量不要为样式添加!important

使用DOM读取元素样式：

• 获取元素的当前显示的样式语法：元素.currentStyle.样式名，它可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取它的默认值。currentStyle只有IE浏览器支持，其他的浏览器都不支持
• 在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式。这个方法是window的方法，可以直接使用。
  ①需要两个参数，第一个：要获取样式的元素，第二个：可以传递一个伪元素，一般都传null
  ②该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象.样式名来读取样式。如果获取的样式没有设置，则会获取到真实的值，而不是默认值。比如：没有设置width，它不会获取到auto，而是一个长度。但是该方法不支持IE8及以下的浏览器
• 通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性

其他样式操作的属性：

• clientWidth 和clientHeight
  ①这两个属性可以获取元素的可见宽度和高度，这些属性都是不带px的，返回都是一个数字，可以直接进行计算。
  ②会获取元素宽度和高度，包括内容区和内边距
  ③这些属性都是只读的，不能修改

• offsetWidth和offsetHeight
  ①获取元素的整个的宽度和高度，包括内容区、内边距和边框

• offsetParent
  ①可以用来获取当前元素的定位父元素，会获取到离当前元素最近的开启了定位的祖先元素。如果所有的祖先元素都没有开启定位，则返回body

• offsetLeft
  ①当前元素相对于其定位父元素的水平偏移量

• offsetTop
  ①当前元素相对于其定位父元素的垂直偏移量

• scrollWidth和scrollHeight
  ①可以获取元素整个滚动区域的宽度和高度

• scrollLeft
  ①可以获取水平滚动条滚动的距离

• scrollTop
  ①可以获取垂直滚动条滚动的距离

事件

事件处理中的this：

• 在事件处理程序内的 this 所引用的对象即是设定了该事件处理程序的元素。(但前提是在js中通过元素调用事件函数)

document.getElementById('aa').onclick = function () {
	console.log(this);  //  <div id="aa"></div>
}

• 如果是在元素上绑定事件。此时 this 指向 全局变量也就是Window。

<div class="container">
    <div id="aa" onclick="clicke()"></div>
</div>
//定义函数
function clicke() {
  	console.log(this);
}

• js 使用 addEventListener 绑定事件，此时的 this 指向该元素。(注意:在IE浏览器中使用为 attachEvent(), this 指向全局变量也就是window)

document.getElementById('aa').addEventListener('click', function () {
	console.log(this);  //  <div id="aa"></div>
});

事件：

事件对象：

• 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数。
• Event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。
• 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 ，键盘哪个按键被按下 ，鼠标滚轮滚动的方向
• 在IE8中，响应函数被处罚时，浏览器不会传递事件对象，在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的。

areaDiv.onmousemove = function(event){
	event = event || window.event;
}

• 属性：
  ①获取到鼠标的坐标
  <1>clientX和clientY用于获取鼠标在当前的可见窗口的坐标
  <2>pageX和pageY可以获取鼠标相对于当前页面的坐标，但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用

事件的冒泡（Bubble）：

• 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
• 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡，可以将事件对象的cancelBubble设置为true，即可取消冒泡

事件的委派：

• 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的。我们可以尝试将其绑定给元素的共同的祖先元素
• 事件的委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
• 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

事件和绑定：

• 我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行
• 这种写法我们称为结构和行为耦合，不方便维护，不推荐使用

-<button id="btn" onmousemove="alert('讨厌，你点我干嘛！');">我是一个按钮</button>-->

• 事件，就是用户和浏览器之间的交互行为，比如：点击按钮，鼠标移动、关闭窗口。
• 可以为按钮的对应事件绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会被调用。

事件的绑定：

• 使用对象.事件 = 函数的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的

btn01.onclick = function(){
		alert(1);
};

• addEventListener()通过这个方法也可以为元素绑定响应函数
  ①参数：
  1.事件的字符串，不要on
  2.回调函数，当事件触发时该函数会被调用
  3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
  ②使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行，这个方法不支持IE8及以下的浏览器。
• attachEvent()，在IE8中可以使用attachEvent()来绑定事件
  ②参数：
  1.事件的字符串，要on
  2.回调函数
  ② 这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反。

事件的传播：

• 关于事件的传播网景公司和微软公司有不同的理解
  ①微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
  ②网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素
• W3C综合了两个公司的方案，将事件传播分成了三个阶段
  ①捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
  ②目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件
  ③冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
• 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true，一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false。
• IE8及以下的浏览器中没有捕获阶段

拖拽的流程:

• 当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
• 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
• 当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
• 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常，这个是浏览器提供的默认行为， 如果不希望发生这个行为，则可以通过return false来取消默认行为
• 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false。需要使用event来取消默认行为event.preventDefault();。但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错

键盘事件：

• onkeydown按键被按下。对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发。当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快。这种设计是为了防止误操作的发生。

• onkeyup按键被松开。键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document

• 可以通过event.keyCode来获取按键的编码。
  ①通过它可以判断哪个按键被按下，除了keyCode，
  ②事件对象中还提供了几个属性
  <1>altKey
  <2>ctrlKey
  <3>shiftKey
  ③这个三个用来判断alt ctrl 和 shift是否被按下。如果按下则返回true，否则返回false

BOM

BOM:

• 浏览器对象模型，BOM可以使我们通过JS来操作浏览器
• 在BOM中为我们提供了一组对象，用来完成对浏览器的操作
• BOM对象
  ①Window代表的是整个浏览器的窗口，同时window也是网页中的全局对象
  ②Navigator代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
  ③Location代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
  ④History代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效。
  ⑤Screen代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
• 这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用

Navigator：

• 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器，由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了，一般我们只会使用userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent
  ①火狐的userAgent
  Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
  ②Chrome的userAgent
  Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
  ③IE8
  Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
  ④IE11
  Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
• 在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了
• 如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息。比如：ActiveXObject

History：

• 对象可以用来操作浏览器向前或向后翻页
• length属性，可以获取到当成访问的链接数量
• back() 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
• forward()可以跳转下一个页面，作用和浏览器的前进按钮一样
• go()可以用来跳转到指定的页面，它需要一个整数作为参数
  1:表示向前跳转一个页面 相当于forward()
  2:表示向前跳转两个页面
  -1:表示向后跳转一个页面
  -2:表示向后跳转两个页面

Location：

• 该对象中封装了浏览器的地址栏的信息
• 如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
• 如果直接将location属性修改为一个完整的路径，或相对路径，则我们页面会自动跳转到该路径，并且会生成相应的历史记录
• assign()用来跳转到其他的页面，作用和直接修改location一样
• reload()用于重新加载当前页面，作用和刷新按钮一样。如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
• replace() 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面。不会生成历史记录，不能使用回退按钮回退

screen对象：

• screen 对象基本上只用来表明客户端的能 力，其中包括浏览器窗口外部的显示器的 信息，如像素宽度和高度等。
• 该对象作用不大，我们一般不太使用。

定时调用：

• JS的程序的执行速度是非常非常快的。如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
• setInterval()定时调用。可以将一个函数，每隔一段时间执行一次
  ①参数：
  1.回调函数，该函数会每隔一段时间被调用一次
  2.每次调用间隔的时间，单位是毫秒
  ②返回值：返回一个Number类型的数据，这个数字用来作为定时器的唯一标识。
• clearInterval()可以用来关闭一个定时器，方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器

窗口大小：

• 浏览器中提供了四个属性用来确定窗口的 大小：
  ①网页窗口的大小
  – innerWidth
  – innerHeight
  ②浏览器本身的尺寸
  – outerWidth
  – outerHeight

打开窗口：

• 使用 window.open() 方法既可以导航到一个 特定的 URL，也可以打开一个新的浏览器窗口。
• 这个方法需要四个参数：
  – 需要加载的url地址
  – 窗口的目标
  – 一个特性的字符串
  – 是否创建新的历史记录

系统对话框：

• 浏览器通过 alert() 、 confirm() 和 prompt() 方法可以调用系统对话框向用户显示消息。
• 它们的外观由操作系统及（或）浏览器设置决 定，而不是由 CSS 决定。
• 显示系统对话框时会导致程序终止，当关闭对 话框程序会恢复执行。
• alert：alert()接收一个字符串并显示给用户。调用alert()方法会向用户显示一个包含一个确认
  按钮的对话框。
• confirm：confirm和alert类似，只不过confirm弹出的对话框有一个确认和取消按钮。用户可以通过按钮来确认是否执行操作。
  ①这个函数的执行会返回一个布尔值，如果选择确定则返回true，如果点击取消则返回false。
• prompt：prompt会弹出一个带输入框的提示框，并可以将用户输入的内容返回。
  ①它需要两个值作为参数：
  – 显示的提示文字
  – 文本框中的默认值
  ②例子：
  – prompt(‘你的年龄是？’,‘18’);

延时调用：

• 延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
• 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
• 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择
• 使用clearTimeout()来关闭一个延时调用

JSON

json简介：

• 如果需要兼容IE7及以下的JSON操作，则可以通过引入一个外部的js文件来处理
• JS中的对象只有JS自己认识，其他的语言都不认识。 JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互
• JSON：JavaScript Object Notation JS对象表示法。JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号。其他的和JS语法一致。
• JSON分类：
  1.对象 {}
  2.数组 []
• JSON中允许的值：
  1.字符串
  2.数值
  3.布尔值
  4.null
  5.对象
  6.数组

var arr = '[1,2,3,"hello",true]';
			
var obj2 = '{"arr":[1,2,3]}';
			
var arr2 ='[{"name":"孙悟空","age":18,"gender":"男"},{"name":"孙悟空","age":18,"gender":"男"}]';

• 将JSON字符串转换为JS中的对象，在JS中，为我们提供了一个工具类，就叫JSON。这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON。
• json --> js对象： JSON.parse()
  ① 可以将以JSON字符串转换为js对象
  ② 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回
• JS对象 —> JSON：JSON.stringify()
  ①可以将一个JS对象转换为JSON字符串
  ②需要一个js对象作为参数，会返回一个JSON字符串
• eval()这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回，如果使用eval()执行的字符串中含有{},它会将{}当成是代码块。如果不希望将其当成代码块解析，则需要在字符串前后各加一个()
• eval()这个函数的功能很强大，可以直接执行一个字符串中的js代码，但是在开发中尽量不要使用，首先它的执行性能比较差，然后它还具有安全隐患。

var str = '{"name":"孙悟空","age":18,"gender":"男"}';

var str2 = "alert('hello');";
			
var obj = eval("("+str+")");

json总结：

• 理解：主要分为JSON字符串，JSON对象，JS对象。
  ①JSON字符串：所谓字符串：单引号或者双引号引起来，只不过格式按照JSON进行构建。
  ②JSON对象：也是普通JS对象，只不过属性必须加双引号，且值不可以是方法函数、undefined以及NAN。
  ③JS对象：就是普通JS对象。
• 使用时一般使用JSON对象(也就是JS对象)和JSON字符串。

区 别	JSON	JavaScript
含 义	数据格式	类实例
传输	可以跨平台数据传输，速度快	类实例
表现1	键值对的方式，属性必须加双引号	键值对的方式，属性不加双引号
表现2	值不可以是方法函数、undefined以及NAN	值可以是函数、对象、字符串、数字、boolean 等
相互转换1	JSON.parse(str),不兼容IE7	JS对象转换为Json字符串
相互转换2	eval("(" + str + “)”);（兼容所有浏览器，但是不安全，会执行json里面的表达式）	JSON.stringify(obj)