前言:在學習這么長時間后的JavaScript后,今天來做個大概的總結,首先由基礎的JavaScript介紹開始，

一.什么是JavaScript

在學習前我們首先得知道這門語言是什么,有什么用,更詳細的介紹–JavaScript入門,下面我們來看一下JavaScript;

• JavaScript負責頁面中的的行為，
  - 它是一門運行在瀏覽器端的腳本語言，
  - JS的撰寫的位置

1.可以撰寫到標簽的指定屬性中;

<button onclick="alert('hello');">我是按鈕</button>
<a href="javascript:alert('aaa');">超鏈接</a>

2.可以撰寫到script標簽中;

<script type="text/javascript">
			//撰寫js代碼
		</script>

3.可以將代碼撰寫到外部的js檔案中，然后通過標簽將其引入 ;

<script type="text/javascript" src="檔案路徑"></script>

- 輸出陳述句
	- alert("要輸出的內容");
		- 該陳述句會在瀏覽器視窗中彈出一個警告框
		
	- document.write("要輸出的內容");
		- 該內容將會被寫到body標簽中，并在頁面中顯示
		
	- console.log("要輸出的內容");
		- 該內容會被寫到開發者工具的控制臺中

1. 基本的語法

• 注釋

• 單行注釋
  //注釋內容

• 多行注釋
  /*
  注釋內容
  */

• JS嚴格區分大小寫

• JS中每條陳述句以分號(;)結尾

• JS中會自動忽略多個空格和換行，所以我們可以利用空格和換行對代碼進行格式化，

2.字面量和變數

(1).字面量

字面量實際上就是一些固定的值，比如 1 2 3 4 true false null NaN "hello"

字面量都是不可以改變的，

由于字面量不是很方便使用，所以在JS中很少直接使用字面量

(2).變數

變數可以用來保存字面量，并且可以保存任意的字面量

一般都是通過變數來使用字面量，而不直接使用字面量，而且也可以通過變數來對字面量進行一個描述

宣告變數:

使用var關鍵字來宣告一個變數

var a;
var b;
var c;

為變數賦值

a = 1;
b = 2;
c = 3;

宣告和賦值同時進行

var d = 456;
var e = 789;

3. 識別符號

- 在JS中所有的可以自主命名的內容，都可以認為是一個識別符號，
	是識別符號就應該遵守識別符號的規范，
- 比如：變數名、函式名、屬性名
- 規范：
	1.識別符號中可以含有字母、數字、_、$
	2.識別符號不能以數字開頭
	3.識別符號不能是JS中的關鍵字和保留字
	4.識別符號一般采用駝峰命名法
		xxxYyyZzz

二.資料型別

關于資料型別這一方面,更詳細的介紹請移步至JavaScript資料型別和JavaScript資料型別轉換,下面開始本博文內容:

JS中一共分成六種資料型別:

- String 字串
- Number 數值
- Boolean 布林值
- Null 空值
- Undefined 未定義
- Object 物件

- 其中基本資料型別有	
	- String 字串
		- JS中的字串需要使用引號引起來雙引號或單引號都行

- 在字串中使用\作為轉義字符
\'  ==> '
\"  ==> "
\n  ==> 換行
\t  ==> 制表符
\\  ==> \	

- 使用typeof運算子檢查字串時，會回傳"string"		

- Number 數值
		- JS中所有的整數和浮點數都是Number型別
		- 特殊的數字
			Infinity 正無窮
			-Infinity 負無窮
			NaN 非法數字（Not A Number）
		- 其他進制的數字的表示：
			0b 開頭表示二進制，但是不是所有的瀏覽器都支持
			0 開頭表示八進制
			0x 開頭表示十六進制
			
		- 使用typeof檢查一個Number型別的資料時，會回傳"number"
			（包括NaN 和 Infinity）

- Boolean 布林值
		- 布林值主要用來進行邏輯判斷，布林值只有兩個
		- true 邏輯的真
		- false 邏輯的假
		- 使用typeof檢查一個布林值時，會回傳"boolean"	
	
- Null 空值
		- 空值專門用來表示為空的物件，Null型別的值只有一個
		- null
		- 使用typeof檢查一個Null型別的值時會回傳"object"

- Undefined 未定義
		- 如果宣告一個變數但是沒有為變數賦值此時變數的值就是undefined
		- 該型別的值只有一個 undefined
		- 使用typeof檢查一個Undefined型別的值時，會回傳"undefined"

- 參考資料型別	
	- Object 物件

1.資料型別轉換

型別轉換就是指將其他的資料型別，轉換為String、Number 或 Boolean

(1). 轉換為String

方式一（強制型別轉換）：
呼叫被轉換資料的toString()方法
例子：

var a = 123;
		a = a.toString();

注意：這個方法不適用于null和undefined
由于這兩個型別的資料中沒有方法，所以呼叫toString()時會報錯

方式二（強制型別轉換）：
呼叫String()函式
例子：

var a = 123;
		a = String(a);

原理：對于Number Boolean String都會呼叫他們的toString()方法來將其轉換為字串，
對于null值，直接轉換為字串"null"，對于undefined直接轉換為字串"undefined"

方式三（隱式的型別轉換）:
為任意的資料型別 ：+""
例子：

var a = true;
		a = a + "";

原理：和String()函式一樣

(2).轉換為Number

方式一（強制型別轉換）：

呼叫Number()函式;
例子：

var s = "123";
		s = Number(s);

轉換的情況：

1.字串 --> 數字
- 如果字串是一個合法的數字，則直接轉換為對應的數字
- 如果字串是一個非法的數字，則轉換為NaN
- 如果是一個空串或純空格的字串，則轉換為0
2.布林值 --> 數字
- true轉換為1
- false轉換為0
3.空值 --> 數字
- null轉換為0
4.未定義 --> 數字
- undefined 轉換為NaN

方式二（強制型別轉換）：
呼叫parseInt()或parseFloat()
這兩個函式專門用來將一個字串轉換為數字的

• parseInt()
• 可以將一個字串中的有效的整數位提取出來，并轉換為Number
• 例子：

var a = "123.456px";
a = parseInt(a); //123

如果需要可以在parseInt()中指定一個第二個引數，來指定進制 (二進制、八進制、十進制、十六進制)

• parseFloat()
• 可以將一個字串中的有效的小數位提取出來，并轉換為Number
• 例子：

var a = "123.456px";
a = parseFloat(a); //123.456

方式三（隱式的型別轉換）：

• 使用一元的+來進行隱式的型別轉換
• 例子：

var a = "123";
	a = +a;

• 原理：和Number()函式一樣

(3).轉換為布林值

方式一（強制型別轉換）：

• 使用Boolean()函式
• 例子：

var s = "false";
s = Boolean(s); //true

• 轉換的情況
  字串 --> 布爾
  除了空串其余全是true
  
  數值 --> 布爾
  - 除了0和NaN其余的全是true

null、undefined —> 布爾
  - 都是false
  
  物件 —> 布爾
  - 都是true

方式二（隱式型別轉換）：
- 為任意的資料型別做兩次非運算，即可將其轉換為布林值
- 例子：

var a = "hello";
		a = !!a; //true

三.運算子：

運算子也是很重要的一部分,詳細的教程移步至JavaScript運算子;

• 運算子也稱為運算子
• 通過運算子可以對一個或多個值進行運算或操作

1.typeof運算子

• 用來檢查一個變數的資料型別
• 語法：typeof 變數
• 它會回傳一個用于描述型別的字串作為結果

2.算數運算子

• 對兩個值進行加法運算并回傳結果(+)
  對兩個值進行減法運算并回傳結果(-)
  對兩個值進行乘法運算并回傳結果(*)
  對兩個值進行除法運算并回傳結果(/)
  對兩個值進行取余運算并回傳結果(%)
• 除了加法以外，對非Number型別的值進行運算時，都會先轉換為Number然后在做運算，
• 而做加法運算時，如果是兩個字串進行相加，則會做拼串操作，將兩個字符連接為一個字串，
• 任何值和字串做加法，都會先轉換為字串，然后再拼串

3.一元運算子

• 一元運算子只需要一個運算元

一元的 '+'
- 就是正號，不會對值產生任何影響，但是可以將一個非數字轉換為數字
- 例子：

 var a = true;
 a = +a;

一元的 '-'
- 就是負號，可以對一個數字進行符號位取反
- 例子：

var a = 10;
 a = -a;

4.自增

• 自增可以使變數在原值的基礎上自增1
  - 自增使用 ++
  - 自增可以使用 前++（++a）后++(a++)
  - 無論是++a 還是 a++都會立即使原變數自增1
  不同的是++a和a++的值是不同的，
  ++a的值是變數的新值（自增后的值）
  a++的值是變數的原值（自增前的值）

5.自減

• 自減可以使變數在原值的基礎上自減1
  - 自減使用 --
  - 自減可以使用 前--（--a）后--(a--)
  - 無論是--a 還是 a--都會立即使原變數自減1
  不同的是--a和a--的值是不同的，
  --a的值是變數的新值（自減后的值）
  a--的值是變數的原值（自減前的值）

6.邏輯運算子:

(1).(非)!

• 非運算可以對一個布林值進行取反，true變false false邊true
• 當對非布林值使用!時，會先將其轉換為布林值然后再取反
• 我們可以利用!來將其他的資料型別轉換為布林值

(2.)(與)&&

• &&可以對符號兩側的值進行與運算
  只有兩端的值都為true時，才會回傳true，只要有一個false就會回傳false，
  - 與是一個短路的與，如果第一個值是false，則不再檢查第二個值
  - 對于非布林值，它會將其轉換為布林值然后做運算，并回傳原值
  - 規則：
  1.如果第一個值為false，則回傳第一個值
  2.如果第一個值為true，則回傳第二個值

(3).(或)||

• ||可以對符號兩側的值進行或運算
  只有兩端都是false時，才會回傳false，只要有一個true，就會回傳true，
  或是一個短路的或，如果第一個值是true，則不再檢查第二個值
  對于非布林值，它會將其轉換為布林值然后做運算，并回傳原值
  規則：
  1.如果第一個值為true，則回傳第一個值
  2.如果第一個值為false，則回傳第二個值

7.賦值運算子

=
	- 可以將符號右側的值賦值給左側變數
	
+=
	- a += 5 相當于 a = a+5
	- var str = "hello";  str += "world";
	
-=
	- a -= 5  相當于 a = a-5
	
*=
	- a *= 5 相當于 a = a*5
	
/=
	- a /= 5 相當于 a = a/5	

%=
	- a %= 5 相當于 a = a%5	

8.關系運算子

關系運算子用來比較兩個值之間的大小關系的

>=
<
<=

• 關系運算子的規則和數學中一致，用來比較兩個值之間的關系，
  如果關系成立則回傳true，關系不成立則回傳false，
  如果比較的兩個值是非數值，會將其轉換為Number然后再比較，
  如果比較的兩個值都是字串，此時會比較字串的Unicode編碼，而不會轉換為Number，

9.相等運算子

==
	- 相等，判斷左右兩個值是否相等，如果相等回傳true，如果不等回傳false
	- 相等會自動對兩個值進行型別轉換，如果對不同的型別進行比較，會將其轉換為相同的型別然后再比較，
		轉換后相等它也會回傳true
!=
	- 不等，判斷左右兩個值是否不等，如果不等則回傳true，如果相等則回傳false
	- 不等也會做自動的型別轉換，
	
===
	- 全等，判斷左右兩個值是否全等，它和相等類似，只不過它不會進行自動的型別轉換，
		如果兩個值的型別不同，則直接回傳false
		
!==
	- 不全等，和不等類似，但是它不會進行自動的型別轉換，如果兩個值的型別不同，它會直接回傳true
	
特殊的值：
	- null和undefined
		- 由于undefined衍生自null，所以null == undefined 會回傳true，
			但是 null === undefined 會回傳false，
			
	- NaN
		- NaN不與任何值相等，報告它自身 NaN == NaN //false
		
	- 判斷一個值是否是NaN
		- 使用isNaN()函式
		三元運算子：
?:
	- 語法：條件運算式?陳述句1:陳述句2;
	- 執行流程：
		先對條件運算式求值判斷，
			如果判斷結果為true，則執行陳述句1，并回傳執行結果
			如果判斷結果為false，則執行陳述句2，并回傳執行結果
優先級：
		- 和數學中一樣，JS中的運算子也是具有優先級的，
			比如 先乘除 后加減 先與 后或
		- 具體的優先級可以參考優先級的表格，在表格中越靠上的優先級越高，
			優先級越高的越優先計算，優先級相同的，從左往右計算，
		- 優先級不需要記憶，如果越到拿不準的，使用()來改變優先級，

四.條件分支陳述句

switch陳述句:

switch(條件運算式){
    case 運算式:
		陳述句...
		break;
	case 運算式:
		陳述句...
		break;
	case 運算式:
		陳述句...
		break;
	default:
		陳述句...
		break;
    }

• 執行流程：
  switch...case...陳述句在執行時，會依次將case后的運算式的值和switch后的運算式的值進行全等比較，
  如果比較結果為false，則繼續向下比較，如果比較結果為true，則從當前case處開始向下執行代碼，
  如果所有的case判斷結果都為false，則從default處開始執行代碼，

五.回圈陳述句

通過回圈陳述句可以反復執行某些陳述句多次

while回圈

   while(條件運算式){
    
    	陳述句...
    
	}

• 執行流程：
  
  while陳述句在執行時，會先對條件運算式進行求值判斷，
  
  如果判斷結果為false，則終止回圈
  
  如果判斷結果為true，則執行回圈體
  
  回圈體執行完畢，繼續對條件運算式進行求值判斷，依此類推

do…while回圈

do{
    	陳述句...
    }while(條件運算式)

執行流程:
do...while在執行時，會先執行do后的回圈體，然后在對條件運算式進行判斷，
如果判斷判斷結果為false，則終止回圈，
如果判斷結果為true，則繼續執行回圈體，依此類推

和while的區別：

while：先判斷后執行

do...while: 先執行后判斷

do...while可以確保回圈體至少執行一次，

for回圈

for(①初始化運算式 ; ②條件運算式 ; ④更新運算式){
    			③陳述句...
    		}

執行流程：
首先執行①初始化運算式，初始化一個變數，

然后對②條件運算式進行求值判斷，如果為false則終止回圈

如果判斷結果為true，則執行③回圈體

回圈體執行完畢，執行④更新運算式，對變數進行更新，

更新運算式執行完畢重復②

死回圈

while(true){
    	
    	}
    	
for(;;){

}				

六.物件（Object）

物件是JS中的參考資料型別

- 物件是一種復合資料型別，在物件中可以保存多個不同資料型別的屬性

- 使用typeof檢查一個物件時，會回傳object

- 創建物件

- 方式一：

			- var obj = new Object();

- 方式二：

			- var obj = {};

- 向物件中添加屬性
	- 語法：
		物件.屬性名 = 屬性值;
		物件["屬性名"] = 屬性值;
		
		- 物件的屬性名沒有任何要求，不需要遵守識別符號的規范，
			但是在開發中，盡量按照識別符號的要求去寫，
		- 屬性值也可以任意的資料型別，

- 讀取物件中的屬性
	- 語法：
		物件.屬性名
		物件["屬性名"]
	- 如果讀取一個物件中沒有的屬性，它不會報錯，而是回傳一個undefined
	
- 洗掉物件中的屬性
	- 語法：
		delete 物件.屬性名
		delete 物件["屬性名"]
		
- 使用in檢查物件中是否含有指定屬性
	- 語法："屬性名" in 物件
		- 如果在物件中含有該屬性，則回傳true
			如果沒有則回傳false
			
- 使用物件字面量，在創建物件時直接向物件中添加屬性
	語法：
		var obj = {
						屬性名:屬性值,
						屬性名:屬性值,
						屬性名:屬性值,
						屬性名:屬性值
				}
				
- 基本資料型別和參考資料型別
	- 基本資料型別
		String Number Boolean Null Undefined
	- 參考資料型別
		Object
	- 基本資料型別的資料，變數是直接保存的它的值，
		變數與變數之間是互相獨立的，修改一個變數不會影響其他的變數，
	- 參考資料型別的資料，變數是保存的物件的參考（記憶體地址），
		如果多個變數指向的是同一個物件，此時修改一個變數的屬性，會影響其他的變數，
	- 比較兩個變數時，對于基本資料型別，比較的就是值，
		對于參考資料型別比較的是地址，地址相同才相同

七.函式（Function）

函式也是一個物件，也具有普通物件的功能

- 函式中可以封裝一些代碼，在需要的時候可以去呼叫函式來執行這些代碼

- 使用typeof檢查一個函式時會回傳function

- 創建函式	

- 函式宣告

			function 函式名([形參1,形參2...形參N]){

				陳述句...

			}

- 函式運算式
		var 函式名 = function([形參1,形參2...形參N]){
			陳述句...
		};
		
- 呼叫函式
	- 語法：函式物件([實參1,實參2...實參N]);
		fun() sum() alert() Number() parseInt()
	- 當我們呼叫函式時，函式中封裝的代碼會按照撰寫的順序執行

- 形參和實參
	- 形參：形式引數
		- 定義函式時，可以在()中定義一個或多個形參，形參之間使用,隔開
			定義形參就相當于在函式內宣告了對應的變數但是并不賦值，
			形參會在呼叫時才賦值，
			
- 實參：實際引數
		- 呼叫函式時，可以在()傳遞實參，傳遞的實參會賦值給對應的形參,
			呼叫函式時JS決議器不會檢查實參的型別和個數，可以傳遞任意資料型別的值，
			如果實參的數量大于形參，多余實參將不會賦值，
			如果實參的數量小于形參，則沒有對應實參的形參將會賦值undefined		
-arguments:偽陣列引數

		 arguments物件是所有（非箭頭）函式中都可用的區域變數，你可以使用arguments物件在函式中參考函式的引數，此物件包含傳遞給函式的每個引數，第一個引數在索引0處，
		 
		 arguments物件不是一個 Array ，它類似于Array，但除了length屬性和索引元素之外沒有任何Array屬性，
		 
- arguments

	- arguments和this類似，都是函式中的隱含的引數

	- arguments是一個類陣列元素，它用來封裝函式執行程序中的實參

		所以即使不定義形參，也可以通過arguments來使用實參

	- arguments中有一個屬性callee表示當前執行的函式物件

1.函式

- 回傳值，就是函式執行的結果，

	- 使用return 來設定函式的回傳值，

	- 語法：return 值;

		- 該值就會成為函式的回傳值，可以通過一個變數來接識訓傳值

	- return后邊的代碼都不會執行，一旦執行到return陳述句時，函式將會立刻退出，

	- return后可以跟任意型別的值，可以是基本資料型別，也可以是一個物件，

	- 如果return后不跟值，或者是不寫return則函式默認回傳undefined，

	- break、continue和return

		

	- break
    - 退出回圈
    - continue
    - 跳過當次回圈,進入下一次回圈
    - return
    - 退出函式,下面的代碼不會再執行



- 引數，函式的實參也可以是任意的資料型別，

- 方法（method）
	- 可以將一個函式設定為一個物件的屬性，
		當一個物件的屬性是一個函式時，
			我們稱這個函式是該物件的方法，
	- 物件.方法名();
	- 函式名();	

2.作用域

作用域簡單來說就是一個變數的作用范圍，

- 在JS中作用域分成兩種：	

1.全域作用域
			- 直接在script標簽中撰寫的代碼都運行在全域作用域中
			- 全域作用域在打開頁面時創建，在頁面關閉時銷毀，
			- 全域作用域中有一個全域物件window，window物件由瀏覽器提供，
				可以在頁面中直接使用，它代表的是整個的瀏覽器的視窗，
			- 在全域作用域中創建的變數都會作為window物件的屬性保存
				在全域作用域中創建的函式都會作為window物件的方法保存
			- 在全域作用域中創建的變數和函式可以在頁面的任意位置訪問，
				在函式作用域中也可以訪問到全域作用域的變數，
			- 盡量不要在全域中創建變數	

	

2.函式作用域
		- 函式作用域是函式執行時創建的作用域，每次呼叫函式都會創建一個新的函式作用域，
		- 函式作用域在函式執行時創建，在函式執行結束時銷毀，
		- 在函式作用域中創建的變數，不能在全域中訪問，
		- 當在函式作用域中使用一個變數時，它會先在自身作用域中尋找，
			如果找到了則直接使用，如果沒有找到則到上一級作用域中尋找，
				如果找到了則使用，找不到則繼續向上找，一直會
				
	- 變數的宣告提前
		- 在全域作用域中，使用var關鍵字宣告的變數會在所有的代碼執行之前被宣告，但是不會賦值，
			所以我們可以在變數宣告前使用變數，但是不使用var關鍵字宣告的變數不會被宣告提前，
		- 在函式作用域中，也具有該特性，使用var關鍵字宣告的變數會在函式所有的代碼執行前被宣告，
			如果沒有使用var關鍵字宣告變數，則變數會變成全域變數
			
	- 函式的宣告提前
		- 在全域作用域中，使用函式宣告創建的函式（function fun(){}）,會在所有的代碼執行之前被創建，
			也就是我們可以在函式宣告前去呼叫函式，但是使用函式運算式(var fun = function(){})創建的函式沒有該特性
		- 在函式作用域中，使用函式宣告創建的函式，會在所有的函式中的代碼執行之前就被創建好了，

3.this（背景關系物件）

- 我們每次呼叫函式時，決議器都會將一個背景關系物件作為隱含的引數傳遞進函式，

	使用this來參考背景關系物件，根據函式的呼叫形式不同，this的值也不同，

- this的不同的情況：

	1.以函式的形式呼叫時，this是window

	2.以方法的形式呼叫時，this就是呼叫方法的物件

	3.以建構式的形式呼叫時，this就是新創建的物件
	
- call()

- apply()

	- 這兩個方法都是函式物件的方法需要通過函式物件來呼叫

	- 通過兩個方法可以直接呼叫函式，并且可以通過第一個實參來指定函式中this

	- 不同的是call是直接傳遞函式的實參而apply需要將實參封裝到一個陣列中傳遞

4.建構式

建構式是專門用來創建物件的函式

- 一個建構式我們也可以稱為一個類

- 通過一個建構式創建的物件，我們稱該物件時這個建構式的實體

- 通過同一個建構式創建的物件，我們稱為一類物件

- 建構式就是一個普通的函式，只是他的呼叫方式不同，

	如果直接呼叫，它就是一個普通函式

	如果使用new來呼叫，則它就是一個建構式

- 例子：
	function Person(){
	
	}
	
- 建構式的執行流程：
	1.創建一個新的物件
	2.將新的物件作為函式的背景關系物件（this）
	3.執行函式中的代碼
	4.將新建的物件回傳
	
- instanceof 用來檢查一個物件是否是一個類的實體
	- 語法：物件 instanceof 建構式
		- 如果該物件時建構式的實體，則回傳true，否則回傳false
		- Object是所有物件的祖先，所以任何物件和Object做instanceof都會回傳true
		
- 列舉物件中的屬性
	for...in
	語法：
		for(var 屬性名 in 物件){
		
		}
		
	for...in陳述句的回圈體會執行多次，物件中有幾個屬性就會執行幾次，
		每次講一個屬性名賦值給我們定義的變數，我們可以通過它來獲取物件中的屬性	

5.原型（prototype）

- 創建一個函式以后，決議器都會默認在函式中添加一個數prototype

	prototype屬性指向的是一個物件，這個物件我們稱為原型物件，

- 當函式作為建構式使用，它所創建的物件中都會有一個隱含的屬性執行該原型物件，

	這個隱含的屬性可以通過物件._proto_來訪問，

- 原型物件就相當于一個公共的區域，凡是通過同一個建構式創建的物件他們通常都可以訪問到相同的原型物件，

	我們可以將物件中共有的屬性和方法統一添加到原型物件中，

		這樣我們只需要添加一次，就可以使所有的物件都可以使用，

- 當我們去訪問物件的一個屬性或呼叫物件的一個方法時，它會先自身中尋找，

	如果在自身中找到了，則直接使用，

	如果沒有找到，則去原型物件中尋找，如果找到了則使用，

	如果沒有找到，則去原型的原型中尋找，依此類推，直到找到Object的原型為止，Object的原型的原型為null，

	如果依然沒有找到則回傳undefined

- hasOwnProperty()

	- 這個方法可以用來檢查物件自身中是否含有某個屬性

	- 語法：物件.hasOwnProperty("屬性名")

6.陣列（Array）

陣列也是一個物件，是一個用來存盤資料的物件,和Object類似，但是它的存盤效率比普通物件要高

- 陣列中保存的內容我們稱為元素	

- 陣列使用索引（index）來操作元素

- 索引指由0開始的整數

- 陣列的操作：

- 創建陣列
			- var arr = new Array();
			- var arr = [];

- 向陣列中添加元素
		- 語法；
			陣列物件[索引] = 值;
			arr[0] = 123;
			arr[1] = "hello";
			
- 創建陣列時直接添加元素
		- 語法：
			var arr = [元素1,元素2....元素N];
			- 例子：
			var arr = [123,"hello",true,null];
				
- 獲取和修改陣列的長度
		- 使用length屬性來操作陣列的長度
		- 獲取長度：
			陣列.length
			- length獲取到的是陣列的最大索引+1
			- 對于連續的陣列，length獲取到的就是陣列中元素的個數
		- 修改陣列的長度
			陣列.length = 新長度
				- 如果修改后的length大于原長度，則多出的部分會空出來
				- 如果修改后的length小于原長度，則原陣列中多出的元素會被洗掉
		- 向陣列的最后添加元素
			陣列[陣列.length] = 值;
			
- 陣列的方法
	- push()
		- 用來向陣列的末尾添加一個或多個元素，并回傳陣列新的長度
		- 語法：陣列.push(元素1,元素2,元素N)
	- pop()
		- 用來洗掉陣列的最后一個元素，并回傳被洗掉的元素
	- unshift()
		- 向陣列的前邊添加一個或多個元素，并回傳陣列的新的長度
	- shift()
		- 洗掉陣列的前邊的一個元素，并回傳被洗掉的元素
	- slice()
		- 可以從一個陣列中截取指定的元素
		- 該方法不會影響原陣列，而是將截取到的內容封裝為一個新的陣列并回傳
		- 引數：
			1.截取開始位置的索引（包括開始位置）
			2.截取結束位置的索引（不包括結束位置）
				- 第二個引數可以省略不寫，如果不寫則一直截取到最后
				- 引數可以傳遞一個負值，如果是負值，則從后往前數
	- splice()
		- 可以用來洗掉陣列中指定元素，并使用新的元素替換
			該方法會將洗掉的元素封裝到新陣列中回傳
		- 引數：
			1.洗掉開始位置的索引
			2.洗掉的個數
			3.三個以后，都是替換的元素，這些元素將會插入到開始位置索引的前邊
			reverse()

		- 可以用來反轉一個陣列，它會對原陣列產生影響

	- concat()

		- 可以連接兩個或多個陣列，它不會影響原陣列，而是新陣列作為回傳值回傳

	- join()

		- 可以將一個陣列轉換為一個字串

		- 引數：

			需要一個字串作為引數，這個字串將會作為連接符來連接陣列中的元素

			如果不指定連接符則默認使用,

	- sort()

		- 可以對一個陣列中的內容進行排序，默認是按照Unicode編碼進行排序

			呼叫以后，會直接修改原陣列，

		- 可以自己指定排序的規則，需要一個回呼函式作為引數：

		function(a,b){
				//升序排列
				//return a-b;
				//降序排列
				return b-a;
			}

- 遍歷陣列
	- 遍歷陣列就是將陣列中元素都獲取到
	- 一般情況我們都是使用for回圈來遍歷陣列：
		for(var i=0 ; i<陣列.length ; i++){
			//陣列[i]
		}
		
	- 使用forEach()方法來遍歷陣列（不兼容IE8）
	
		陣列.forEach(function(value , index , obj){
		
		});
		
		forEach()方法需要一個回呼函式作為引數，
			陣列中有幾個元素，回呼函式就會被呼叫幾次，
			每次呼叫時，都會將遍歷到的資訊以實參的形式傳遞進來，
			我們可以定義形參來獲取這些資訊，
			value:正在遍歷的元素
			index:正在遍歷元素的索引
			obj:被遍歷物件

八.包裝類

- 在JS中為我們提供了三個包裝類：

	String() Boolean() Number()

	- 通過這三個包裝類可以創建基本資料型別的物件

	例子：

		var num = new Number(2);

		var str = new String("hello");

		var bool = new Boolean(true);

	- 但是在實際應用中千萬不要這么干，

- 當我們去操作一個基本資料型別的屬性和方法時，
	決議器會臨時將其轉換為對應的包裝類，然后再去操作屬性和方法，
	操作完成以后再將這個臨時物件進行銷毀，

九.字串

length

	- 獲取字串的長度

charAt()

	- 根據索引獲取指定的字符

charCodeAt()

	- 根據索引獲取指定的字符編碼

String.fromCharCode()

	- 根據字符編碼獲取字符

indexOf()

lastIndexOf()

	- 從一個字串中檢索指定內容

	- 需要一個字串作為引數，這個字串就是要檢索的內容，

		如果找到該內容，則會回傳其第一次出現的索引，如果沒有找到則回傳-1，

	- 可以指定一個第二個引數，來表示開始查找的位置

	- indexOf()是從前向后找

	- lastIndexOf()是從后向前找

slice()

	- 可以從一個字串中截取指定的內容，并將截取到內容回傳，不會影響原變數

	- 引數：

		第一個：截取開始的位置（包括開始）

		第二個：截取結束的位置（不包括結束）

		- 可以省略第二個引數，如果省略則一直截取到最后

		- 可以傳負數，如果是負數則從后往前數

substr()	

	- 和slice()基本一致，不同的是它第二個引數不是索引，而是截取的數量

	

substring()
	- 和slice()基本一致，不同的是它不能接受負值作為引數，如果設定一個負值，則會自動修正為0，
		substring()中如果第二個引數小于第一個，自動調整位置
toLowerCase() 
	- 將字串轉換為小寫并回傳
toUpperCase() 
	- 將字串轉換為大寫并回傳
split()
	- 可以根據指定內容將一個字串拆分為一個陣列
	- 引數：
		- 需要一個字串作為引數，將會根據字串去拆分陣列
			可以接收一個正則運算式，此時會根據正則運算式去拆分陣列
			
match() 
	- 可以將字串中和正則運算式匹配的內容提取出來
	- 引數：
		- 正則運算式，可以根據該正則運算式將字串中符合要求的內容提取出來
				并且封裝到一個陣列中回傳

replace()  
	- 可以將字串中指定內容替換為新的內容
	- 引數：
		- 第一個：被替換的內容，可以是一個正則運算式
		- 第二個：替換的新內容
		
search() 
	- 可以根據正則運算式去字串中查找指定的內容
	- 引數：
		正則運算式，將會根據該運算式查詢內容，
				并且將第一個匹配到的內容的索引回傳，如果沒有匹配到任何內容，則回傳-1，

十.正則運算式

正則用來定義一些字串的規則，程式可以根據這些規則來判斷一個字串是否符合規則，也可以將一個字串中符合規則的內容提取出來，

- 創建正則運算式

	- var reg = new RegExp("正則","匹配模式");

	- var reg = /正則運算式/匹配模式

	

- 語法：
	匹配模式：
		i:忽略大小寫
		g:全域匹配模式
		- 設定匹配模式時，可以都不設定，也可以設定1個，也可以全設定，設定時沒有順序要求
		
	正則語法		
		| 或
		[] 或
		[^ ] 除了
		[a-z] 小寫字母
		[A-Z] 大寫字母
		[A-z] 任意字母
		[0-9] 任意數字
		
- 方法：
	test()
		- 可以用來檢查一個字串是否符合正則運算式
		- 如果符合回傳true，否則回傳false
- 量詞

		{n} 正好n次

		{m,n} m-n次

		{m,} 至少m次

		+	至少1次 {1,}

		?   0次或1次 {0,1}

		*   0次或多次 {0,}

		

- 轉義字符
		\ 在正則運算式中使用\作為轉義字符
		\. 表示.
		\\ 表示\
		. 表示任意字符
		\w
			- 相當于[A-z0-9_]
		\W
			- 相當于[^A-z0-9_]
		\d
			- 任意數字
		\D
			- 除了數字
		\s
			- 空格
		\S
			- 除了空格
		\b
			- 單詞邊界
		\B
			- 除了單詞邊界
	^ 表示開始
	$ 表示結束

十一.Date

日期的物件，在JS中通過Date物件來表示一個時間

- 創建物件

	- 創建一個當前的時間物件

		var d = new Date();

	- 創建一個指定的時間物件

		var d = new Date("月/日/年 時:分:秒");

		

- 方法：
	getDate()
		- 當前日期物件是幾日（1-31）
		
	getDay() 
		- 回傳當前日期物件時周幾（0-6）
			- 0 周日
			- 1 周一 ，，，
			
	getMonth()
		- 回傳當前日期物件的月份（0-11）
		- 0 一月 1 二月 ，，，
	getFullYear() 從 Date 物件以四位數字回傳年份， 
	
	getHours() 回傳 Date 物件的小時 (0 ~ 23)， 
	getMinutes() 回傳 Date 物件的分鐘 (0 ~ 59)， 
	getSeconds() 回傳 Date 物件的秒數 (0 ~ 59)， 
	getMilliseconds() 回傳 Date 物件的毫秒(0 ~ 999)， 
	
	getTime()
		- 回傳當前日期物件的時間戳
		- 時間戳，指的是從1970年月1日 0時0分0秒，到現在時間的毫秒數
			計算機底層保存時間都是以時間戳的形式保存的，
			
	Date.now()
		- 可以獲取當前代碼執行時的時間戳

十二.Math

Math屬于一個工具類，它不需要我們創建物件，它里邊封裝了屬性運算相關的常量和方法

我們可以直接使用它來進行數學運算相關的操作

- 方法：

		Math.PI
			- 常量，圓周率
		Math.abs()
			- 絕對值運算
		Math.ceil()
			- 向上取整
		Math.floor()
			- 向下取整
		Math.round()
			- 四舍五入取整
		Math.random()	
			- 生成一個0-1之間的亂數
			- 生成一個x-y之間的亂數
				Math.round(Math.random()*(y-x)+x);
		Math.pow(x,y)
			- 求x的y次冪
		Math.sqrt()
			- 對一個數進行開方
		Math.max()
			- 求多個數中最大值
		Math.min()
			- 求多個數中的最小值

十三.DOM

- Document Object Model

- 檔案物件模型，通過DOM可以來任意來修改網頁中各個內容

- 檔案

	- 檔案指的是網頁，一個網頁就是一個檔案

- 物件

	- 物件指將網頁中的每一個節點都轉換為物件

		轉換完物件以后，就可以以一種純面向物件的形式來操作網頁了

- 模型

	- 模型用來表示節點和節點之間的關系，方便操作頁面

- 節點（Node）

	- 節點是構成網頁的最基本的單元，網頁中的每一個部分都可以稱為是一個節點

	- 雖然都是節點，但是節點的型別卻是不同的

	- 常用的節點

		- 檔案節點 （Document），代表整個網頁

		- 元素節點（Element），代表網頁中的標簽

		- 屬性節點（Attribute），代表標簽中的屬性

		- 文本節點（Text），代表網頁中的文本內容

		

- DOM操作
	- DOM查詢
	- 在網頁中瀏覽器已經為我們提供了document物件，
		它代表的是整個網頁，它是window物件的屬性，可以在頁面中直接使用，
	- document查詢方法：
		- 根據元素的id屬性查詢一個元素節點物件：
			- document.getElementById("id屬性值");
		- 根據元素的name屬性值查詢一組元素節點物件:
			- document.getElementsByName("name屬性值");
		- 根據標簽名來查詢一組元素節點物件：
			- document.getElementsByTagName("標簽名");
			
	- 元素的屬性：
		- 讀取元素的屬性：
			語法：元素.屬性名
			例子：ele.name  
				  ele.id  
				  ele.value 
				  ele.className
				  
		- 修改元素的屬性：
			語法：元素.屬性名 = 屬性值
			
		- innerHTML
			- 使用該屬性可以獲取或設定元素內部的HTML代碼

- 事件（Event）
	- 事件指的是用戶和瀏覽器之間的互動行為，比如：點擊按鈕、關閉視窗、滑鼠移動，，，
	- 我們可以為事件來系結回呼函式來回應事件，
	- 系結事件的方式：
		1.可以在標簽的事件屬性中設定相應的JS代碼
			例子：
				<button onclick="js代碼，，，">按鈕</button>
		2.可以通過為物件的指定事件屬性設定回呼函式的形式來處理事件
			例子：
				<button id="btn">按鈕</button>
				<script>
					var btn = document.getElementById("btn");
					btn.onclick = function(){
					
					};
				</script>
				
- 檔案的加載
	- 瀏覽器在加載一個頁面時，是按照自上向下的順序加載的，加載一行執行一行，
	- 如果將js代碼撰寫到頁面的上邊，當代碼執行時，頁面中的DOM物件還沒有加載，
		此時將會無法正常獲取到DOM物件，導致DOM操作失敗，
	- 解決方式一：
		- 可以將js代碼撰寫到body的下邊
		<body>
			<button id="btn">按鈕</button>
			<script>
				var btn = document.getElementById("btn");
				btn.onclick = function(){
				
				};
			</script>
		</body>
		
	- 解決方式二：
		- 將js代碼撰寫到window.onload = function(){}中
		- window.onload 對應的回呼函式會在整個頁面加載完畢以后才執行，
			所以可以確保代碼執行時，DOM物件已經加載完畢了
		<script>
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
				
				};
			};
		
		</script>	

1.DOM查詢

- 通過具體的元素節點來查詢

	- 元素.getElementsByTagName()

			- 通過標簽名查詢當前元素的指定后代元素
	- 元素.childNodes
		- 獲取當前元素的所有子節點
		- 會獲取到空白的文本子節點
	
	- 元素.children
		- 獲取當前元素的所有子元素
	
	- 元素.firstChild
		- 獲取當前元素的第一個子節點
	
	- 元素.lastChild
		- 獲取當前元素的最后一個子節點
	
	- 元素.parentNode
		- 獲取當前元素的父元素
	
	- 元素.previousSibling
		- 獲取當前元素的前一個兄弟節點
	
	- 元素.nextSibling
		- 獲取當前元素的后一個兄弟節點
		
innerHTML和innerText
	- 這兩個屬性并沒有在DOM標準定義，但是大部分瀏覽器都支持這兩個屬性
	- 兩個屬性作用類似，都可以獲取到標簽內部的內容，
		不同是innerHTML會獲取到html標簽，而innerText會自動去除標簽
	- 如果使用這兩個屬性來設定標簽內部的內容時，沒有任何區別的	
	
讀取標簽內部的文本內容
	<h1>h1中的文本內容</h1>
	元素.firstChild.nodeValue
	
- document物件的其他的屬性和方法
	document.all
		- 獲取頁面中的所有元素，相當于document.getElementsByTagName("*");
		
	document.documentElement
		- 獲取頁面中html根元素
		
	document.body
		- 獲取頁面中的body元素
		
	document.getElementsByClassName()
		- 根據元素的class屬性值查詢一組元素節點物件
		- 這個方法不支持IE8及以下的瀏覽器
		
	document.querySelector()
		- 根據CSS選擇器去頁面中查詢一個元素
		- 如果匹配到的元素有多個，則它會回傳查詢到的第一個元素	
		
	document.querySelectorAll()	
		- 根據CSS選擇器去頁面中查詢一組元素
		- 會將匹配到所有元素封裝到一個陣列中回傳，即使只匹配到一個

2.DOM修改

document.createElement()
	- 可以根據標簽名創建一個元素節點物件
		
document.createTextNode()
	- 可以根據文本內容創建一個文本節點物件
	
父節點.appendChild(子節點)
	- 向父節點中添加指定的子節點
	
父節點.insertBefore(新節點,舊節點)
	- 將一個新的節點插入到舊節點的前邊
	
父節點.replaceChild(新節點,舊節點)
	- 使用一個新的節點去替換舊節點
	
父節點.removeChild(子節點)
	- 洗掉指定的子節點
	- 推薦方式：子節點.parentNode.removeChild(子節點)

3.DOM對CSS的操作

- 讀取和修改行內樣式

	- 使用style屬性來操作元素的行內樣式

	- 讀取行內樣式：

		語法：元素.style.樣式名

		- 例子：

			元素.style.width

			元素.style.height

			- 注意：如果樣式名中帶有-，則需要將樣式名修改為駝峰命名法

				將-去掉，然后-后的字母改大寫

			- 比如：background-color --> backgroundColor

					border-width ---> borderWidth

					

- 修改行內樣式：
		語法：元素.style.樣式名 = 樣式值
		- 通過style修改的樣式都是行內樣式，由于行內樣式的優先級比較高，
			所以我們通過JS來修改的樣式，往往會立即生效，
			但是如果樣式中設定了!important，則行內樣式將不會生效，
			
- 讀取元素的當前樣式
	- 正常瀏覽器
		- 使用getComputedStyle()
		- 這個方法是window物件的方法，可以回傳一個物件，這個物件中保存著當前元素生效樣式
		- 引數：
			1.要獲取樣式的元素
			2.可以傳遞一個偽元素，一般傳null
		- 例子：
			獲取元素的寬度
				getComputedStyle(box , null)["width"];
		- 通過該方法讀取到樣式都是只讀的不能修改

	- IE8
		- 使用currentStyle
		- 語法：
			元素.currentStyle.樣式名
		- 例子：
			box.currentStyle["width"]
		- 通過這個屬性讀取到的樣式是只讀的不能修改

- 其他的樣式相關的屬性
	注意：以下樣式都是只讀的

	clientHeight
		- 元素的可見高度，指元素的內容區和內邊距的高度
	clientWidth
		- 元素的可見寬度，指元素的內容區和內邊距的寬度
	offsetHeight
		- 整個元素的高度，包括內容區、內邊距、邊框
	offfsetWidth
		- 整個元素的寬度，包括內容區、內邊距、邊框
	offsetParent
		- 當前元素的定位父元素
		- 離他最近的開啟了定位的祖先元素，如果所有的元素都沒有開啟定位，則回傳body
	offsetLeft
	offsetTop
		- 當前元素和定位父元素之間的偏移量
		- offsetLeft水平偏移量  offsetTop垂直偏移量
	
	scrollHeight
	scrollWidth
		- 獲取元素滾動區域的高度和寬度
	
	scrollTop
	scrollLeft
		- 獲取元素垂直和水平滾動條滾動的距離
		
	判斷滾動條是否滾動到底
		- 垂直滾動條
			scrollHeight - scrollTop = clientHeight
			
		- 水平滾動	
			scrollWidth - scrollLeft = clientWidth

4.事件（Event）

- 事件物件

- 當回應函式被呼叫時，瀏覽器每次都會將一個事件物件作為實參傳遞進回應函式中，

	這個事件物件中封裝了當前事件的相關資訊，比如：滑鼠的坐標，鍵盤的按鍵，滑鼠的按鍵，滾輪的方向，，

- 可以在回應函式中定義一個形參，來使用事件物件，但是在IE8以下瀏覽器中事件物件沒有做完實參傳遞，而是作為window物件的屬性保存

	

- 例子：

			元素.事件 = function(event){

				event = event || window.event;
		};
		
		元素.事件 = function(e){
			e = e || event;
			
		};
		
- 事件的冒泡（Bubble）
- 事件的冒泡指的是事件向上傳導，當后代元素上的事件被觸發時，將會導致其祖先元素上的同類事件也會觸發，
- 事件的冒泡大部分情況下都是有益的，如果需要取消冒泡，則需要使用事件物件來取消
- 可以將事件物件的cancelBubble設定為true，即可取消冒泡
	- 例子：
			元素.事件 = function(event){
				event = event || window.event;
				event.cancelBubble = true;
			};
- 事件委托()
		- 事件委托就是利用事件冒泡，只指定一個事件處理程式，就可以管理某一型別的所有事件，事件委托是利用事件的冒泡原理來實作的，
		舉個例子：頁面上有這么一個節點樹，div>ul>li>a;比如給最里面的a加一個click點擊事件，那么這個事件就會一層一層的往外執行，執行順序a>li>ul>div，有這樣一個機制，那么我們給最外面的div加點擊事件，
		那么里面的ul，li，a做點擊事件的時候，都會冒泡到最外層的div上，所以都會觸發，
		這就是事件委托，委托它們父級代為執行事件，
		 - 優點:1.大量減少記憶體占用，減少事件注冊，
		 - 2.新增元素實作動態系結事件