Q課程回顧：
? 閉包：有權訪問另外一個函數的局部變量的函數，作用：延伸變量使用范圍
? mdn，w3c
function fn1 () {var n = 3;return function () {console.log(n);}
}
? 遞歸：函數調用其本身
function fn () {fn();}
fn();
正則表達式概述
什么是正則表達式
正則表達式（ Regular Expression ）是用于匹配字符串中字符組合的模式。在JavaScript中，正則表達式也是對象。作用：檢索關鍵字，過濾敏感字符，表單驗證正則表通常被用來檢索、替換那些符合某個模式（規則）的文本，例如驗證表單：用戶名表單只能輸入英文字母、數字或者下劃線， 昵稱輸入框中可以輸入中文(匹配)。此外，正則表達式還常用于過濾掉頁面內容中的一些敏感詞(替換)，或從字符串中獲取我們想要的特定部分(提取)等 。其他語言也會使用正則表達式，本階段我們主要是利用JavaScript 正則表達式完成表單驗證。正則表達式的特點
1. 靈活性、邏輯性和功能性非常的強。
2. 可以迅速地用極簡單的方式達到字符串的復雜控制。
3. 對于剛接觸的人來說，比較晦澀難懂。比如：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
4. 實際開發,一般都是直接復制寫好的正則表達式. 但是要求會使用正則表達式并且根據實際情況修改正則表達式. 比如用戶名: /^[a-z0-9_-]{3,16}$/正則表達式在js中的使用
創建正則表達式
在 JavaScript 中，可以通過兩種方式創建一個正則表達式。方式一：通過調用RegExp對象的構造函數創建 var regexp = new RegExp(/123/);console.log(regexp);方式二：利用字面量創建 正則表達式var reg = /abc/; 含義：只要包含abc就可以測試正則表達式
test() 正則對象方法，用于檢測字符串是否符合該規則，該對象會返回 true 或 false，其參數是測試字符串注意正則里面沒有引號
regexObj.test(str);
regexObj：正則表達式
str：用戶輸入字符串var rg = /123/;
console.log(rg.test(123));//匹配字符中是否出現123 出現結果為true
console.log(rg.test('abc'));//匹配字符中是否出現123 未出現結果為false
正則表達式中的特殊字符
正則表達式的組成
每個正則表達式可以由簡單的字符構成，比如 /abc/，也可以是簡單和特殊字符的組合，比如 /ab*c/ 。其中特殊字符也被稱為元字符，在正則表達式中是具有特殊意義的專用符號，如 ^ 、$ 、+ 等。正則表達式：簡單字符 和 特殊字符【元字符】特殊字符非常多，可以參考： MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_ExpressionsjQuery手冊：正則表達式部分正則測試工具 ： http://tool.oschina.net/regex邊界符
正則表達式中的邊界符（位置符）用來提示字符所處的位置，主要有兩個字符^ : 表示匹配行首的文本（以誰開始）【/^abc/：以abc為開頭】$：表示匹配行尾的文本（以誰結束）【/^abc$/：只能是abc】如果 ^和 $ 在一起，表示必須是精確匹配。
var rg = /abc/; // 正則表達式里面不需要加引號 不管是數字型還是字符串型
// /abc/ 只要包含有abc這個字符串返回的都是true
console.log(rg.test('abc'));
console.log(rg.test('abcd'));
console.log(rg.test('aabcd'));
console.log('---------------------------');
var reg = /^abc/;
console.log(reg.test('abc')); // true
console.log(reg.test('abcd')); // true
console.log(reg.test('aabcd')); // false
console.log('---------------------------');
var reg1 = /^abc$/; // 精確匹配 要求必須是 abc字符串才符合規范
console.log(reg1.test('abc')); // true
console.log(reg1.test('abcd')); // false
console.log(reg1.test('aabcd')); // false
console.log(reg1.test('abcabc')); // false
字符類
字符類表示有一系列字符可供選擇，只要匹配其中一個就可以了。所有可供選擇的字符都放在方括號內。
[] 方括號
表示有一系列字符可供選擇，只要匹配其中一個就可以了【多選1】
[abcdefg]var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回為true
console.log(rg.test('andy'));//true
console.log(rg.test('baby'));//true
console.log(rg.test('color'));//true
console.log(rg.test('red'));//false
var rg1 = /^[abc]$/; // 三選一 只有是a 或者是 b 或者是c 這三個字母才返回 true
console.log(rg1.test('aa'));//false
console.log(rg1.test('a'));//true
console.log(rg1.test('b'));//true
console.log(rg1.test('c'));//true
console.log(rg1.test('abc'));//false
----------------------------------------------------------------------------------
var reg = /^[a-z]$/ //26個英文字母任何一個字母返回 true - 表示的是a 到z 的范圍
console.log(reg.test('a'));//true
console.log(reg.test('z'));//true
console.log(reg.test('A'));//false
-----------------------------------------------------------------------------------
//字符組合
var reg1 = /^[a-zA-Z0-9]$/; // 26個英文字母(大寫和小寫都可以)任何一個字母返回 true
------------------------------------------------------------------------------------
//取反 方括號內部加上 ^ 表示取反，只要包含方括號內的字符，都返回 false 。
var reg2 = /^[^a-zA-Z0-9]$/;
console.log(reg2.test('a'));//false
console.log(reg2.test('B'));//false
console.log(reg2.test(8));//false
console.log(reg2.test('!'));//true/^[^a-z]$/：兩個^，括號外面的是便邊界，括號里面的是取反的含義
量詞符
量詞符用來設定某個模式出現的次數。
量詞 說明* 重復0次或更多次【>=0次】/^[a-z]*$/+ 重復1次或更多次【>=1次】【/^[a-z]+$/】? 重復0次或1次{n} 重復n次{n,} 重復n次或更多次{n,m} 重復n到m次
注意：{n,m}n和m之間不準有空格課程回顧：
? 正則表達式：匹配字符組合模式
? 創建：var reg1 = new RegExp(/abc/); var reg2 = /abc/;
? 方法：reg.test(‘abcd’);
? 特殊字符：
? 邊界符：^，$
? 方括號：[abc]
? 量詞符：*，+，?，{n}，{n,}，{n,m}
用戶名表單驗證
功能需求:
- 如果用戶名輸入合法, 則后面提示信息為: 用戶名合法,并且顏色為綠色
- 如果用戶名輸入不合法, 則后面提示信息為: 用戶名不符合規范, 并且顏色為紅色
var input = document.querySelector('input');var span = document.querySelector('span');var reg = /^[a-zA-Z0-9_-]{6,16}$/;input.onblur = function () {if (reg.test(this.value)) {span.innerHTML = '輸入正確';span.className = 'right';}else {span.innerHTML = '錯誤內容';span.className = 'error';}
}
括號總結
1.大括號 量詞符. 里面表示重復次數{}2.中括號 字符集合。匹配方括號中的任意字符. []3.小括號表示優先級()正則表達式在線測試 ： https://c.runoob.com
預定義類
預定義類指的是某些常見模式的簡寫方式.
驗證案例：
手機驗證
var tel = document.getElementById('tel');
var regtel = /^[1][3|4|5|7|8][0-9]{9}$/;
tel.onblur = function () {if (regtel.test(tel.value)) {this.nextElementSibling.className = 'success';this.nextElementSibling.innerHTML = '手機輸入正確<i class="success_icon"></i>';console.log(123);} else {tel.nextElementSibling.className = 'error';tel.nextElementSibling.innerHTML = '手機輸入錯誤<i class="error_icon"></i>';console.log(456)}}
QQ驗證：
var regqq = /^[1-9][0-9]{4,}$/;var regtel = /^1[3|4|5|7|8][0-9]{9}$/;var regqq = /^[1-9][0-9]{4,}$/;function jiance (obj, reg) {obj.onblur = function () {if (reg.test(this.value)) {this.nextElementSibling.className = 'success';this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 手機輸入正確';} else {this.nextElementSibling.className = 'error';this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 手機輸入錯誤';}}}jiance(tel,regtel);jiance(qq,regqq);
昵稱驗證：
var nikName = /^[\u4e00-\u9fa5]{2,8}$/;
短信驗證：
var regmsg = /^[0-9]{6}$/;
replace替換：
字符串的方法：替換
字符串.replace(要替換的字符串, '替換為誰');/表達式/[修飾符]g：全局匹配i：忽略大小寫gi：全局+忽略屏蔽敏感字符
<script type="text/javascript">// 點擊按鈕發布留言var btn = document.querySelector('input');var txt = document.getElementById('txt');var ul = document.querySelector('ul');// 添加事件btn.onclick = function () {// 創建livar li = document.createElement('li');// 放到ulul.appendChild(li);// 獲取內容var val = txt.value;// 替換val = val.replace(/搞基|gay/gi,'**');// 放到li里面li.innerText = val;// 清空txt.value = '';}</script>
課程回顧：
? 正則：匹配字符組合模式
? 創建正則：var reg1 = new RegExp(/abc/); var reg2 = /abc/;
? 檢測測試：reg1.test(‘字符串’);
? 特殊字符：
? 邊界符：^，$
? 方括號：[多選一]
? 量詞符：*，+，?，{n}，{n,}，{n,m}
? 修飾符：/abc/修飾符
整體回顧：
? ES6：引入類
class 類名 {constructor (uname, age) {this.uname = uname;this.age = age;this.say();}say () {this.uname;}hi () {}}
// 實例化對象
var obj = new 類名(參數，參數);// 繼承：
class Father {}
class Son extends Father {}
? ES5：
創建對象：字面量，構造函數Object，自定義構造函數new的執行過程：1創建新對象，2this指向這個對象，3執行代碼，4返回這個對象成員：靜態成員，實例成員function Person (uname, age) {this.uname = uname;this.age = age;
}原型對象：是構造函數屬性，prototype，用來共享方法節省內存【構造函數.prototype.方法 = function () {}】
對象原型：是對象的屬性，__proto__，用來指向原型對象
構造函數：constructor，原型對象的屬性，用來指回構造函數本身繼承：組合繼承（構造函數和原型對象）屬性：用call改變父類中的this指向方法：父實例對象賦值給子原型對象，最后指回構造函數本身
類的本質就是function【語法糖】新增方法：
數組：forEach，filter，some(數組.forEach(function (val, index, obj) {}))字符串：trim（去除字符串兩側空白）
函數進階：
函數定義：命名函數，匿名函數，實例化對象new Function函數調用：方式很多，事件處理程序，方法，定時器......this指向：調用者，構造函數中的this指向實例對象改變this指向：call，apply，bind（fun.方法(對象)）;嚴格模式：JS兩種模式（正常，嚴格["use strict"]）;高階函數：把函數當做返回值或者參數的函數，【操作其他函數的函數】function fn (n) {}; fn( function () {} );function fn () {return function () {}}
閉包：有權訪問另外一個函數的局部變量的函數，作用：延伸變量使用范圍function fn1 () {var n = 6;return function () {console.log(n);}}
遞歸：函數調用其本身// 注意：寫遞歸要有遞歸點，出口點function fn () {fn();}fn();深拷貝和淺拷貝正則：
含義：匹配字符組合模式創建正則：var reg = new RegExp(/abc/);var reg = /abc/;
測試：testreg.test('字符串');
特殊字符：邊界符：^，$方括號：[多選一]量詞符：*，+，？，{n}，{n,}，{n,m}字符串方法：replace（替換，'字符'）修飾符：/abc/gi
。...)