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