一篇文章帶你進入JavaScript--JavaScript總結

前言:在學習這麼長時間後的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.新增元素實現動態綁定事件