技術標籤：前端javascriptes6

語法約定：

1.區分大小寫

2，程式碼縮排

3，建議每行只寫一條語句，語句一分號;結尾，則以行末作為語句結束

4，程式碼執行順序：從上到下，由左到右

引用 javscript 方式：``

1，寫在 head 頭部，內嵌 js 程式碼

2，引入外部 js 檔案

3，寫在 body 主體

變數：

1，在程式執行過程中其值可以改變的量，是一個數據儲存空間的表示，即給記憶體空間起別名。

2，將數值通過變數進行儲存，以便程式隨時使用。通俗來說，變數就是儲存資料的

3，宣告，賦值 var i = 10； var 是’variable’:[可變的]

4，命名規範：只能以數字，英文字母，下劃線以及$符號組成，但不能以數字開頭。不能使用關鍵字和保留字。區分大小寫，用駝峰命名法

資料型別：

1，string：儲存一串字串，用雙引號或單引號括起來

2，number：表示整數或浮點數

3，boolean：表示真假，true 或 false

4，undefined：變數被聲明瞭，但未被賦值

5，null：空

判斷資料型別：

1，使用 typeof 判斷資料型別

2，用法：typeof（變數)或字面量

3，返回值：string，number，boolean，undefined，object：物件，null

常用的輸入/輸出：

1，alert()：彈出提示框

2，console.log()向控制檯輸出資訊。

3，document.write() 向網頁中輸出資訊，程式碼除錯。

4，prompt() 彈出輸入框，獲取使用者輸入的資料。宣告一個變數以儲存獲取到使用者輸入的資料返回的資料型別是字串。

運算子：

1，賦值運算子：=（當變數在左邊的時候叫做賦值，在右邊的時候叫做取值）

2，算數運算子：+，-，/，*，%

3，比較（關係）運算子：<，>，>=，<=，==，!=

4，邏輯與算符：&&，||，!

5，條件（三目）運算子：語法：條件？表示式 1:表示式 2

6，Nan：not a number 表示非數字，其自身是 number 型別。用來表示數值的一種不正常的狀態，一般在計算出錯時會出現。

7，isNaN（）：檢查其引數是否是非數字，如果是非數字，則返回 true，否則返回 false。

複雜的算數運算 Math 物件：執行常見的算數任務

1，Math.abs(a)；得到 a 的絕對值。

2，Math.pow(a,b)；得到 a 的 b 次方

3，Math.round(a)；四捨五入

4，Math.ceil(a)；向上取整

5，Math.floor(a)；向下取整

6，Math.random()；產生隨機數

7，Math.max(a,b…)；返回最大值

8，Math.min(a,b…)；返回最小值

9，Math.PI；返回圓周率的值

資料型別轉換：

1，強制型別轉換（顯式轉換）：

轉換為 number：（會從第一個字元開始解析，直到遇到非數字符號停止，並返回已解析的部分數值）

1，使用 number()：如果內容可以轉換成數字，則返回相應的數字（整數或者小數），如果內容不可以轉換成數字，則返回 NaN，如果內容為空，則返回 0

2，使用 parseInt()：將內容轉換成整數（直接去掉小數）

3，使用 parseFloat()：將內容轉換成小數

轉換為 string：

1，使用 string();

2，使用 tostring();

轉換為 boolean

1,使用 Boolean();

2，自動型別轉換（隱式轉換）：轉換為 number，轉換為 string，轉換為 boolean

流程控制語句：

選擇結構：

1，if…else

2，switch

3，if…else…if

4，比較 switch 和多重 if 選擇結構的區別：共同點是都是用來處理多分支條件的結構，不同點是 switch 選擇結構只能處理等值條件判斷的情況，多重 if 選擇結構沒有 seitch 選擇結構的限制，特別適合某個變數處於某個連續區間時的情況。

迴圈結構：

1，while

2，do…while

3，for(表示式 1[引數初始化]；表示式 2[條件判斷]；表示式 3[更新迴圈變數]){迴圈操作}

4，for(迴圈變數 in 集合）{}

二重迴圈：

1，一個迴圈體內又包含另一個完整的迴圈結構

2，外層迴圈變數變化一次，內層迴圈變數要變化一遍

3，各種迴圈可以互相巢狀。

陣列：

1，陣列是一個變數，用來儲存一組資料。

2，陣列得大小可以動態調整，沒有長度限制，

3，可以儲存任意型別的資料。

4，宣告一個變數就是在記憶體空間劃出一塊合適的空間，宣告一個數組就是在記憶體空間劃出一串連續的空間。

5，建立陣列：var 陣列名 = new Array();//js 中的陣列沒有長度和類別限制。

6，為陣列元素賦值：陣列名[索引] = 元素值

7，獲取元素值：陣列名[索引]

使用字串作為陣列下標。

1，陣列不僅可以使用非負整數作為索引下標，也可以使用字串作為下標，一般稱之為 key（鍵）

2，key 不會對 length 屬性產生影響，所以不適合用普通 for 迴圈，而應該使用 for…in 迴圈（還會自動跳過 undefined 得資料）

陣列常用方法

1，排序方法：sort（排序）：預設按數值升序或字元順序排列，非 string 型別會自動轉換為 string

2，反轉方法：reverse（反轉）：將陣列倒敘排列

3，拼接操作：

1，join（連線）：將陣列拼接為 string

2，concat（合併）：將多個數組拼接成一個數組

4，轉換陣列：tostring()；將陣列轉換為字串；

valueOf()；返回陣列物件本身；

5，迭代陣列：forEach()；

氣泡排序：

//氣泡排序法

for (var i = 0; i < array.length - 1; i++) {

for (var j = 0; j < array.length - i - 1; j++) {

if (array[j] > array[j + 1]) {

var temp = array[j];

array[j] = array[j + 1];

array[j+1]= temp;

}

}

}

console.log(array);

內建函式：

1，isNaN()；判斷是否為 NaN，如果是，返回 true；

2，isFinite()；判斷是否為有限數字（或可以轉換為有限數字），返回 true。如果是 NaN、或者是正，負無窮大。則返回 false

自定義函式：

1，建立函式：function 函式名（引數 1，引數 2…）{函式體;}

2，呼叫函式：函式名(引數值);

3，形參：定義函式時指定得引數，沒有實際得值，佔位置

4，實參：呼叫函式時指定得引數，有實際得值。

5，JavaScript 中呼叫函式時，實參得個數可以和形參得個數相等。

6，JavaScript 中沒有過載得概念，後定義得同名函式會覆蓋前面定義得函式。所以不要定義同名得函式。注意：在其他語言中會有過載得概念，即函式名相同，引數個數不同得多個同名函式。

7，形參和實參匹配問題：Js 中呼叫函式時，實參得個數可以和形參得個數不相等。

8，return 得作用：1，返回函式執行得結果，2 結束函式得執行。

9，定義函式的兩種形式：

一：函式宣告：function 函式名(引數){函式體}

二：函式表示式：var 變數名 = function(引數){函式體}；

三：兩種形式的區別，函式宣告不是匿名函式，結尾沒有分號；函式表示式沒有名字，成為匿名函式，一般用於回撥，也可能用於一次執行的函式。變數提升問題；

10，回撥函式 callback：不立即執行的函式呼叫，滿足一定條件時執行或者由別的程式碼呼叫執行

用法：呼叫時只寫函式名，沒有小括號和引數

應用：事件繫結，函式引數。

11，函式也是一種資料型別（console.log(typeof myFun);

變數作用域：

1，區域性變數：在函式內宣告的變數，只能在該函式內訪問，函式執行結束，變數自動銷燬

2，全域性變數：只要不是在函式內宣告的變數（在函式內未使用 var 宣告，直接賦值的變數，也是全域性變數），在任何位置都可以訪問，當所有頁面關閉時銷燬

3，就近原則：如果區域性變數和全域性變數同名，預設訪問的是全域性變數。

如果想訪問全域性變數，必須使用 window 字首，在一定條件下也可以使用 this 字首。

4，js 中沒有塊級作用域的概念，只要不是在函式中定義的 變數都是全域性變數，在其他語言中，一對花括號 {}就是一個程式碼塊。在程式碼塊中定義的變數在程式碼塊外是無法訪問的。es6 中可以使用關鍵字 let 定義變數，支援塊級作用域。

解析器執行 JavaScript 程式碼的過程：

1，首先執預解析（全域性作用域【變數提升】）：將變數 var 和函式 function 的宣告提前到作用域的最上面，需要注意的是變數的賦值操作不會提前。

2，然後執行程式碼：首先，從上往下，一行一行執行程式碼。當執行函式會進入函式內部，再次預解析（區域性作用域）然後從上往下，一行一行的執行程式碼。

javascript 組成：

1，ECMAscript

2，DOM（文件物件模型）

3，BOM（瀏覽器物件模型）

文件物件模型（Document Object Model)是 W3C 制定的一套規範，提供了一組操作 HTML 和 XML 文件的 API，即提供一屬性，方法和事件。DOM 可以把 HTML 和 XML 文件解析成一個文件樹，書上的每一個分支都可以視為一個物件，通過 DOM 可以動態的操作該文件

DOM 的作用：

1，獲取頁面中的元素

2，獲取/設定元素的屬性

3，獲取/設定元素的樣式

4，刪除/新增元素

5，繫結事件——觸發響應

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-ZdGaKm7l-1611544030137)(<C:\Users\黃忠勝\AppData\Local\YNote\data\weixinobU7Vjic4GE4TjiFoZtThc2PB2Ig\f4c7b96cb73f4fb8b3fef482f85b672a\1605508422(1)].jpg>)

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-7r8QpxRL-1611544030138)(<C:\Users\黃忠勝\AppData\Local\YNote\data\weixinobU7Vjic4GE4TjiFoZtThc2PB2Ig\21cea407a0744e8997bdbff80d116369\1605508573(1)].jpg>)

window 物件常用的方法

1，alert("");顯示一個帶有提示資訊和確定按鈕的警告對話方塊

2，confirm（text）：顯示一個帶有提示資訊，確定和取消按鈕的對話方塊

3，prompt(text,val)：顯示一個帶有提示資訊，確定和取消按鈕以及文字輸入框的對話方塊

4，open(url,name,options)：開啟具有指定名稱的新視窗，並載入給定 URL 所指定的文件

5，showModalDialog()：在一個模式視窗中顯示指定的 HTML 文件。

6，close();關閉當前文件(FF 與 IE 規則不同)

7，setTimeout(func,delay)：設定一次性定時器，經過指定毫秒值後執行某個函式

8，setInterval(func,delay)：設定週期性定時器，週期迴圈執行某個函式

9，clearInterval(timer)：清除週期性定時器

10，clearTimeout(timer)：清除一次性定時器 1

window 物件的常用事件：

1，onload：一個頁面或一幅影象完成載入

2，onmouseover：滑鼠移到某元素之上

3，onmouseout：滑鼠離開某元素時

4，onclick：當用戶單擊某個物件時呼叫的事件控制代碼

5，onkeydown：當某個鍵盤按鍵被按下

6，onscroll：視窗滾動條滑動

document 物件（表示整個 HTML 文件）：

document 操作可分為兩類：讀操作，更新操作

1，屬性：

bgColor：設定或檢索 document 物件的背景顏色

innerHTML：把內容解析到 DOM 書上

innerText：把內容解析成純文字

2，方法：

1，write()：在當前頁面中輸出指定內容

2，getElementById("")：返回指定 id 的第一個物件的引用

3，getElementByName()：返回帶有指定名稱的物件的集合，返回一個數組

4，getElementByTagName()：返回帶有指定標籤名的物件的集合，不僅 document 物件具有此方法，其他 DOM 物件同樣具有，用來在元素內部根據標籤名查詢。

DOM 相關型別：

1，Node:節點

Document：文件

Element：元素

Text：文字

Attr：屬性

NodeList：節點列表集合

NamedNodeMap：屬性對映集合

2，表示 DOM 樹的最頂層節點，對應於 HTML 文件

3，屬性：childNodes：子節點列表

4，document Element：獲取文件的根元素

方法：creatElement(元素名)【建立元素節點】

createTextNode(文字內容)【建立文字節點】

appendChild(子節點)【新增子節點，主要新增元素】

createNode(型別，名稱)【根據條件建立一個新節點】：節點型別：1 表示元素節點，2，表示屬性節點，3，表示文字節點

Element 型別：

1，屬性：nodeName【元素名】

attrbutes【返回屬性集合，namedNodeMap 型別】

childNodes【返回子節點集合，nodeList 型別】

firstChild/lastChild【第一個/最後一個子節點】

parentNode【返回元素的父節點】

2，方法：appendChild()【新增子節點，包括子元素，文字節點等】

getAttribute()【獲取指定屬性的值】

setAttribute()【新增/修改屬性】

document 寫操作的步驟：

1，建立新元素：document.createElement(元素名)

2，設定文字內容（支援文字內容的元素）：元素.appendChild(document.createTextNode(文字內容));

3，設定屬性：元素.setAttribute(屬性名，屬性值);

4，找到父元素：document.getElement…

其他元素操作：

1，克隆：node.cloneNode(true|false 是否包括內容);

2，插入：parent.insertBefore(新的節點，已經存在的節點);

3，刪除：parent.removeChild(要刪除的節點);

4，替換：parent.replaceChild(新的節點，被替換的節點);

js 訪問 css 樣式：

1，style 屬性：1，單一單詞的 CSS 樣式屬性，直接使用“物件名.style.樣式名”來訪問。如 obj.style.color = “red”;

2，複合詞，將複合符號“-”去掉，並將其後的單詞首字母改成大寫，如 obj.style.fontSize = “18px”;

2,className 屬性： 當修改的樣式比較多時，可以藉助於樣式表，為不同狀態下的樣式分別定義一個類選擇器，在指令碼中使用“物件名.className"來訪問

------------------------------------------------------

物件：

1， 特徵：物件具有的屬性：如學生的姓名，年齡的

2，行為：物件具有的能力：如學生可以學習，跑步，做自我介紹

1，面向物件：1，可以建立自定義的型別，自定義類。

2，支援封裝、繼承，多型（三大特徵）

3，面向物件的語言：Java，C#，C++等

2，基於物件：1，無法建立自定義的型別，但可以模擬實現

2，不能很好的支援面向物件三大特徵

3，基於物件的語言：javascript【我們可以認為 js 是面向物件的語言，但其不完全具有物件的特徵】

javascript 中的物件： js 中物件是無序屬性的集合【屬性可理解為鍵值對，鍵是屬性名，值是對應的資料，所以也可認為物件是鍵值對的集合。值可細分為基本值，物件，函式】

優點：物件可以封裝一組資料，便於使用

建立物件：var 物件名 = new object（）

賦值：物件名.屬性名=屬性值

獲取屬性值：物件名.屬性名 或 物件名[“屬性名”]

物件的組成：屬性，方法，事件

函式和方法的區別：函式【直接呼叫的就是函式，如 parseInt();】

方法【通過物件呼叫的是方法，如 stu.study();】

建立物件的三種方式：1，直接使用 Object【var person = new Object();】

2，使用建構函式【function Person(name){this.name=name}】

3，使用物件字面量【var stu = { name:“tom”,}】

建構函式：1，用來建立物件的函式，稱為建構函式【構造器】，建構函式可以在建立物件的同時設定屬性值。

2，定義建構函式，模擬類的定義 i：

function 建構函式名(){

this.屬性名=屬性值；

this.方法名=function(){方法定義};

}

呼叫建構函式，建立物件：var 物件名 = new 建構函式名();

帶引數的建構函式：為了便於物件的建立以及初始化，通常會使用帶引數的建構函式

function 建構函式名(形參 1，形參 2…){

this.屬性名=形參 1；

this.屬性名=形參 2;

this.方法名=function（）{方法定義};

}

var 物件名 = new 建構函式名(實參 1，實參 2…)

this 關鍵字

1，this 表示當前物件，建構函式中的 this，表示將來 new 出來的當前物件。

通過物件字面量建立物件：

var stu={

name:"tom",
​ age:12,
​ sex:"男",
​ "js-score":92,
​ study:function(){
​ console.log("正在學習js中...");`` ​ ``}
}

十、Debug 除錯
1，簡介：程式得故障和缺陷，稱之為 bug，排除程式得故障和缺陷稱之為 debug
debug 程式碼除錯得方式：alert(),console.log(),打斷點，使用開發人員工具
2，步驟：1 設定斷點 2（暫停執行得程式碼行）單步執行 3 觀察變數

更新操作

繫結事件：

1. 靜態繫結：通過為標籤得事件屬性賦值

2. 動態繫結：通過為 DOM 物件得事件屬性賦值
   

4. 動態繫結：通過為 DOM 物件進行事件監聽，使用 addEventListene(“事件名”，回撥函式);

5. 1. <script>
          var btn = document.getElementById("btn");
      	btn.addEventListener('click',function(){
              console.log("動態繫結");
          });
      </script>
      

6. 注意：
   ​ 可以通過事件回撥函式得第一個引數獲取事件物件 Event，在事件回撥函式中，this 表示事件源，即發生事件得元素

7. 可以通過事件回撥函式得第一個引數獲取事件物件 event，屬性含義

   target：事件的目標元素，即事件源
   type：事件型別
   timeStamp：事件生成得日期和時間
   clientX：當事件被觸發時，滑鼠指標得水平座標
   clientY：當事件被觸發時，滑鼠指標得垂直座標
   在事件回撥函式中，this表示事件源
   

常用事件：

表單事件：

事件流：
當一個 HTML 元素產生事件時，該事件會在當前元素與根元素之間按特定得順序傳播，所有經 過得節點都會收到該事件並執行，這個傳播過程就是 DOM 事件流

事件冒泡/事件捕獲
事件冒泡：當一個元素上得事件被觸發時，事件從事件源開始，往上冒泡知道頁面得根元素，這個過程稱為事件冒泡（預設方式）
事件捕獲：當一個元素上得事件被觸發時，事件從頁面得根元素，往下直到事件目標元素，這過程被稱為事件捕獲
阻止事件冒泡：event.stopPropagation();

事件代理/事件委託
概念：利用事件冒泡/事件捕獲機制，通過給父元素繫結事件，從而實現對所有子元素得事件處理。無需為每個子元素繫結事件
優點：減少事件註冊，降低記憶體佔用。新增元素時實現動態繫結事件
事件預設行為：
當一個事件發生時瀏覽器自己會預設做得事情，如：點選連結時預設會跳轉，右鍵點選時預設會彈出選單，阻止事件得預設行為：e.preventDefault();

BOM

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-Xt50p0vk-1611544030139)(<C:\Users\黃忠勝\Desktop\1606827845(1)].jpg>)

Window 物件

引用資料型別：
基本資料型別（簡單資料型別）：string、number、boolean、undefined、null
引用資料型別（複雜資料型別）：Object、Array、
記憶體：
棧記憶體：基本資料型別得變數和引用資料型別得變數得引用，會儲存棧記憶體中，存取速度比較快
堆記憶體：引用資料型別得變數，會儲存在堆記憶體中，存取速度較慢
基本資料型別和引用資料型別作為函式引數：
基本型別作為方法得引數：傳遞得是引數得值，在函式內部修改引數得值，不會影響外部變數
引用型別作為方法得引數：傳遞得是引數得引用，在函式內部修改引數得值，會影響外部變數

閉包：**
閉包是 JS 中特有得現象，在一個函式內部又定義了一個函式，這個定義在內部得函式，就是閉包
閉包就是能夠讀取其他函式內部變數得函式，閉包是在某個作用域內定義得函式，該函式可以訪問這個作用域內得所有變數，從作用來說，閉包就是將函式內部和函式外部連結起來得一座橋樑**

JSON(JavaScript Object Notation)
JavaScript Object Notation 是一種輕量級得資料交換格式，用於表示 Js 物件得一種方式
採用與程式語言無關得文字格式，易於閱讀和編寫，同時也易於解析和生成
語法：{“屬性名”:屬性值,“屬性名”:屬性值…}
注意：JSON 結構是由一系列得鍵值對所組成，稱為 JSON 物件，屬性名使用雙引號括起來。JSON 和物件字面量得區別，JSON 得屬性必須加雙引號，而物件字面量可以不加
使用：
1，簡單得 JSON 物件
2，複合屬性，屬性得值為 JSON 物件
3，JSON 物件的集合
JSON 轉換：
JSON 轉換為字串：

var person = {
  name: "楊小洋",
  age: 18,
  height: 180.5,
};
var str = JSON.stringify(person);

字串轉換為 JSON：

var str = '{"name":"tom","age":18}';
var obj = JSON.parse(str);
var user='[
{"id":1,"userName":"admin","password":"123"},
{"id":2,"userName":"tom","password":"456"}
]';
var objs=JSON.parse(users);

原型 prototype:
在建構函式中有一個屬性叫 prototype
1，prototype 是一個物件屬性，其屬性值為物件，稱為原型物件
2，可以通過 prototype 來新增新的屬性和方法，此時所有該建構函式建立的物件都會具有這些屬性和方法
3，由該建構函式建立的物件會預設連結到該屬性上
語法：
建構函式.prototype.屬性名=值
建構函式.prototype.方法名=function（）{方法定義體}
訪問物件屬性的查詢順序：
1，首先在當前物件中查詢對應的例項屬性
2，如果沒有，就會到該物件關聯的建構函式的 prototype 屬性中查詢，即到原型物件中查詢
作用：
物件間共享資料
為“類”（系統內建或自定義）增加新的屬性，方法，並且新增內容對於當前頁面中已經建立的物件也有效
_ proto _
prototype 是一個隱藏屬性，於是為每個物件提供一個叫——proto——的屬性
物件的 proto 與建立他的建構函式的 prototype 本質上是一個東西
proto 是物件的屬性，是站在物件的角度，來討論其原型物件
prototype 是建構函式的屬性，是站在建構函式的角度，來討論其原型屬性
注意：由於 proto 是非標準屬性，因此一般不建議使用
物件的型別
判斷資料的型別：
1，使用 tyeof：可以判斷任意變數的型別，判斷物件的型別總是返回 object
2，使用 instanceof：只能判斷物件是否為某種型別，需要指定判斷的目標資料型別，無法獲取物件的型別名稱
語法：物件 instanceof 你猜想的資料型別，返回 boolean 值
獲取物件的型別：
1，函式有一個 name 屬性，通過該屬性可以獲取函式的名稱。
2，建構函式的名稱就是物件的型別

var stu = new Student()---->Student型別
var p = new Person()  ----->Person型別
var nums = new Array()  ---->Array型別
var obj = new Object() ---->Object型別

constructor 屬性：
每個物件都有一個 constructor 屬性，該屬性描述的就是其建構函式
物件的 constructor 屬性是其原型物件提供的，因為每個物件都連結到其原型屬性上
call 和 apply：
作用：以某個物件的身份來呼叫另一個物件的方法
區別：傳參的方式有所不同，第一個引數是相同的，都表示由該物件來呼叫執行，後面的引數不同，call 是逐個傳參，後面引數可以由多個逗號隔開，apply 是以陣列形式傳參，後面引數只能由一個，會自動拆分為多個元素傳入

繼承：
1，物件冒充繼承（構造繼承）
核心：使用 call，以物件冒充的形式呼叫父類的建構函式，相當於是複製父類的例項屬性給子類
缺點：只能繼承父類建構函式中的屬性和方法，無法繼承原型中的屬性和方法
2，原型鏈繼承：
核心：使用 prototype，將父類的例項做為子類的原型
缺點：建立子類例項時，無法想父類建構函式傳參，導致繼承的父類屬性沒有值

3，組合繼承：
​ 物件冒充+原型鏈
原型鏈： 任何物件都有其原型物件，原型物件也有原型物件，物件的原型物件一直往上找，找到 null 為止，在這一過程中，有一個 Object 型別的，有很多方法，他就是 Object.prototype，位於頂層

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-XyTzZAs3-1611544030140)(<C:\Users\黃忠勝\Desktop\1606979770(1)].jpg>)

內建物件：

string：
1，定義方式：var str=“welcome”
var str = new string(‘welcome’)
常用的字串的方法：

Date
定義方式：
語法：

var date = new Date(); //定義一個日期物件，表示當前事件
var date = new Date(year, month, day, hour, minute, second); //引數為指定得年月日時分秒
var date = new Date(millSeconds); //引數與1970-1-1相差得毫秒數

常用方法：

正則表示式：
是一門獨立得語言，有自己得語法，用於檢測指定字元是否符合特定規則
他就是用來定義規則得，稱為：Regular Expression
在 JavaScript 中提供了 RegExp 物件，表示正則表示式
建立方式：
1，使用字面量：

var reg = /pattern/abeirtttu;

2，使用建構函式：

var reg = new RegExp(pattern, attribute);

說明：Pattern 表示匹配模式，用於指定匹配規則，由元字元，量詞，特殊符號組成
​ attribute 表示匹配特徵，取值：i 忽略大小寫，g 全域性匹配，m 多行匹配
​ 方法：

String 物件得以下方法，支援使用正則表示式：

匹配規則：

量詞：指定字元出現得次數

特殊符號：具有特殊含義得符號

注意：[\u4E00-\u9FA5]用來匹配中文字元

表單校驗：
客戶端表單校驗得目的：1，保證輸入得資料符合要求
2，減輕伺服器得壓力
通過 onsubmit 事件繫結回撥函式，判斷表單資料是否符合要求，符合返回 ture，否則 false

下拉列表：
Select 物件：表示 HTML 表單中得一個下拉列表

Option 對香港：表示 HTML 表單中下拉列表得一個選項

客戶端儲存：
簡介：出於記錄使用者特定資料的目的，需要客戶端資料儲存技術。
常用儲存機制：
1，Cookie：
優點：需要與伺服器互動，瀏覽器自動管理不同站點的資料併發送到伺服器端
缺點：安全性受限，資料量受限（4kb），可用性受限，明文儲存
2，Web Storage：HTML5 新增，分為 localStorage 和 sessionStorgae
優點：操作簡單，不會自動傳送到伺服器端、儲存空間大（瀏覽器可支援到 10MB 以上）
缺點：安全性受限，永不過期，不區分站點，明文儲存。

Cookie：
以鍵值對形式儲存，在客戶端通過 document 物件的 cookie 屬性進行操作
寫入 cookie：語法

document.cookie = "鍵=值;expires=失效事件的GMT格式字串";

如果未指定 expires，則瀏覽器關閉時 cookie 就失效
​ 讀取 cookie：先通過 document.cookie 進行整體讀取，然後再根據分號和等號進行拆分

WebStorage:
WebStorage 是 HTML5 中引入的本地儲存解決方案，可以在客戶端本地儲存資料由兩部分組成
1，localStorage：在本地永久性儲存資料
2，seccionStorage：儲存的資料只在會話期間有效，關閉瀏覽器自動刪除
基本用法：

注意：WebStorage 中只能儲存字串資料，如果要儲存物件，需要先轉換為字串格式

事件監聽：
監聽 WebStorage 中資料的變化，當資料發生變化時觸發執行回撥函式
語法：window.addEventListener(‘storage’,回撥函式)
1， storage 事件，對 localStorage 和 sessionStorage 中的資料進行監聽
2，回撥函式，接收一個 StorageEvent 型別的事件物件引數。包括：
key：發生變化的鍵
olaValue 原值
newValue 新值
storageArea 發生變化的 localStorage 物件
url 引發變化的頁面的 URL