站長(zhǎng)資訊網(wǎng)本篇文章給大家?guī)砹岁P(guān)于es6的相關(guān)知識(shí)，其中包括嚴(yán)格模式、高階函數(shù)以及閉包和遞歸等相關(guān)問題，希望對(duì)大家有幫助。
目錄總覽
1、嚴(yán)格模式
- JavaScript 除了提供正常模式外，還提供了嚴(yán)格模式
- ES5 的嚴(yán)格模式是采用具有限制性 JavaScript 變體的一種方式，即在嚴(yán)格的條件下運(yùn)行 JS 代碼
- 嚴(yán)格模式在IE10 以上版本的瀏覽器才會(huì)被支持，舊版本瀏覽器會(huì)被忽略
- 嚴(yán)格模式對(duì)正常的JavaScript語義做了一些更改：
- 消除了Javascript 語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少了一些怪異行為
- 消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全
- 提高編譯器效率，增加運(yùn)行速度
- 禁用了在 ECMAScript 的未來版本中可能會(huì)定義的一些語法，為未來新版本的 Javascript 做好鋪墊。比如一些保留字如：class, enum, export, extends, import, super 不能做變量名
1.1、開啟嚴(yán)格模式
- 嚴(yán)格模式可以應(yīng)用到整個(gè)腳本或個(gè)別函數(shù)中。
- 因此在使用時(shí)，我們可以將嚴(yán)格模式分為為腳本開啟嚴(yán)格模式和為函數(shù)開啟嚴(yán)格模式兩種情況
1.1.2、為腳本開啟嚴(yán)格模式
-
為整個(gè)腳本文件開啟嚴(yán)格模式，需要在所有語句之前放一個(gè)特定語句
-
"use strict"或'use strict'
<script> 'user strict'; console.log("這是嚴(yán)格模式。");</script>
因?yàn)?code>"use strict"加了引號(hào)，所以老版本的瀏覽器會(huì)把它當(dāng)作一行普通字符串而忽略。
有的 script 基本是嚴(yán)格模式，有的 script 腳本是正常模式，這樣不利于文件合并，所以可以將整個(gè)腳本文件放在一個(gè)立即執(zhí)行的匿名函數(shù)之中。這樣獨(dú)立創(chuàng)建一個(gè)作用域而不影響其他 script 腳本文件。
<script> (function (){ 'use strict'; var num = 10; function fn() {} })(); </script>
1.1.2、為函數(shù)開啟嚴(yán)格模式
- 若要給某個(gè)函數(shù)開啟嚴(yán)格模式，需要把
"use strict"或'use strict'聲明放在函數(shù)體所有語句之前
<body> <!-- 為整個(gè)腳本(script標(biāo)簽)開啟嚴(yán)格模式 --> <script> 'use strict'; // 下面的js 代碼就會(huì)按照嚴(yán)格模式執(zhí)行代碼 </script> <script> (function() { 'use strict'; })(); </script> <!-- 為某個(gè)函數(shù)開啟嚴(yán)格模式 --> <script> // 此時(shí)只是給fn函數(shù)開啟嚴(yán)格模式 function fn() { 'use strict'; // 下面的代碼按照嚴(yán)格模式執(zhí)行 } function fun() { // 里面的還是按照普通模式執(zhí)行 } </script></body>
- 將
"use strict"放在函數(shù)體的第一行，則整個(gè)函數(shù)以 "嚴(yán)格模式"運(yùn)行。
2、嚴(yán)格模式中的變化
- 嚴(yán)格模式對(duì)JavaScript的語法和行為，都做了一些改變
2.1、變量規(guī)定
- 在正常模式中，如果一個(gè)變量沒有聲明就賦值，默認(rèn)是全局變量
- 嚴(yán)格模式禁止這種用法，變量都必須先用var 命令聲明，然后再使用
- 嚴(yán)禁刪除已經(jīng)聲明變量，例如，“delete x` 語法是錯(cuò)誤的
<body> <script> 'use strict'; // 1. 我們的變量名必須先聲明再使用 // num = 10; // console.log(num); var num = 10; console.log(num); // 2.我們不能隨意刪除已經(jīng)聲明好的變量 // delete num; </script></body>
2.2、嚴(yán)格模式下this指向問題
- 以前在全局作用域函數(shù)中的
this指向window對(duì)象 - 嚴(yán)格模式下全局作用域中函數(shù)中的
this是undefined - 以前構(gòu)造函數(shù)時(shí)不加
new也可以調(diào)用，當(dāng)普通函數(shù)，this指向全局對(duì)象 - 嚴(yán)格模式下，如果構(gòu)造函數(shù)不加
new調(diào)用，this指向的是undefined，如果給它賦值，會(huì)報(bào)錯(cuò) new實(shí)例化的構(gòu)造函數(shù)指向創(chuàng)建的對(duì)象實(shí)例- 定時(shí)器
this還是指向window - 事件、對(duì)象還是指向調(diào)用者
<body> <script> 'use strict'; //3. 嚴(yán)格模式下全局作用域中函數(shù)中的 this 是 undefined。 function fn() { console.log(this); // undefined。 } fn(); //4. 嚴(yán)格模式下,如果 構(gòu)造函數(shù)不加new調(diào)用, this 指向的是undefined 如果給他賦值則 會(huì)報(bào)錯(cuò). function Star() { this.sex = '男'; } // Star(); var ldh = new Star(); console.log(ldh.sex); //5. 定時(shí)器 this 還是指向 window setTimeout(function() { console.log(this); }, 2000); </script></body>
2.3、函數(shù)變化
- 函數(shù)不能有重名的參數(shù)
- 函數(shù)必須聲明在頂層，新版本的JavaScript會(huì)引入“塊級(jí)作用域”（ES6中已引入）。為了與新版本接軌，不允許在非函數(shù)的代碼塊內(nèi)聲明函數(shù)
<body> <script> 'use strict'; // 6. 嚴(yán)格模式下函數(shù)里面的參數(shù)不允許有重名 function fn(a, a) { console.log(a + a); }; // fn(1, 2); function fn() {} </script></body>
3、高階函數(shù)
- 高階函數(shù)是對(duì)其他函數(shù)進(jìn)行操作的函數(shù)，它接收函數(shù)作為參數(shù)或將函數(shù)作為返回值輸出
接收函數(shù)作為參數(shù)
<body> <p></p> <script> // 高階函數(shù)- 函數(shù)可以作為參數(shù)傳遞 function fn(a, b, callback) { console.log(a + b); callback && callback(); } fn(1, 2, function() { console.log('我是最后調(diào)用的'); }); </script></body>
將函數(shù)作為返回值
<script> function fn(){ return function() {} }</script>
- 此時(shí) fn 就是一個(gè)高階函數(shù)
- 函數(shù)也是一種數(shù)據(jù)類型，同樣可以作為參數(shù)，傳遞給另外一個(gè)參數(shù)使用。最典型的就是作為回調(diào)函數(shù)
- 同理函數(shù)也可以作為返回值傳遞回來
4、閉包
4.1、變量作用域
變量根據(jù)作用域的不同分為兩種：全局變量和局部變量
- 函數(shù)內(nèi)部可以使用全局變量
- 函數(shù)外部不可以使用局部變量
- 當(dāng)函數(shù)執(zhí)行完畢，本作用域內(nèi)的局部變量會(huì)銷毀。
4.2、什么是閉包
閉包指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)
簡(jiǎn)單理解：一個(gè)作用域可以訪問另外一個(gè)函數(shù)內(nèi)部的局部變量
<body> <script> // 閉包（closure）指有權(quán)訪問另一個(gè)函數(shù)作用域中變量的函數(shù)。 // 閉包: 我們fn2 這個(gè)函數(shù)作用域 訪問了另外一個(gè)函數(shù) fn1 里面的局部變量 num function fn1() { // fn1就是閉包函數(shù) var num = 10; function fn2() { console.log(num); //10 } fn2(); } fn1(); </script></body>
4.3、在chrome中調(diào)試閉包
-
打開瀏覽器，按 F12 鍵啟動(dòng) chrome 調(diào)試工具。
-
設(shè)置斷點(diǎn)。
-
找到 Scope 選項(xiàng)（Scope 作用域的意思）。
-
當(dāng)我們重新刷新頁面，會(huì)進(jìn)入斷點(diǎn)調(diào)試，Scope 里面會(huì)有兩個(gè)參數(shù)（global 全局作用域、local 局部作用域）。
-
當(dāng)執(zhí)行到 fn2() 時(shí)，Scope 里面會(huì)多一個(gè) Closure 參數(shù) ，這就表明產(chǎn)生了閉包。
4.4、閉包的作用
- 延伸變量的作用范圍
<body> <script> // 閉包（closure）指有權(quán)訪問另一個(gè)函數(shù)作用域中變量的函數(shù)。 // 一個(gè)作用域可以訪問另外一個(gè)函數(shù)的局部變量 // 我們fn 外面的作用域可以訪問fn 內(nèi)部的局部變量 // 閉包的主要作用: 延伸了變量的作用范圍 function fn() { var num = 10; return function() { console.log(num); } } var f = fn(); f(); </script></body>
4.5、閉包練習(xí)
4.5.1、點(diǎn)擊li輸出索引號(hào)
<body> <ul class="nav"> <li>榴蓮</li> <li>臭豆腐</li> <li>鯡魚罐頭</li> <li>大豬蹄子</li> </ul> <script> // 閉包應(yīng)用-點(diǎn)擊li輸出當(dāng)前l(fā)i的索引號(hào) // 1. 我們可以利用動(dòng)態(tài)添加屬性的方式 var lis = document.querySelector('.nav').querySelectorAll('li'); for (var i = 0; i < lis.length; i++) { lis[i].index = i; lis[i].onclick = function() { // console.log(i); console.log(this.index); } } // 2. 利用閉包的方式得到當(dāng)前小li 的索引號(hào) for (var i = 0; i < lis.length; i++) { // 利用for循環(huán)創(chuàng)建了4個(gè)立即執(zhí)行函數(shù) // 立即執(zhí)行函數(shù)也成為小閉包因?yàn)榱⒓磮?zhí)行函數(shù)里面的任何一個(gè)函數(shù)都可以使用它的i這變量 (function(i) { // console.log(i); lis[i].onclick = function() { console.log(i); } })(i); } </script></body>
4.5.2、定時(shí)器中的閉包
<body> <ul class="nav"> <li>榴蓮</li> <li>臭豆腐</li> <li>鯡魚罐頭</li> <li>大豬蹄子</li> </ul> <script> // 閉包應(yīng)用-3秒鐘之后,打印所有l(wèi)i元素的內(nèi)容 var lis = document.querySelector('.nav').querySelectorAll('li'); for (var i = 0; i < lis.length; i++) { (function(i) { setTimeout(function() { console.log(lis[i].innerHTML); }, 3000) })(i); } </script></body>
5、遞歸
如果一個(gè)函數(shù)在內(nèi)部可以調(diào)用其本身，那么這個(gè)函數(shù)就是遞歸函數(shù)
簡(jiǎn)單理解： 函數(shù)內(nèi)部自己調(diào)用自己，這個(gè)函數(shù)就是遞歸函數(shù)
由于遞歸很容易發(fā)生"棧溢出"錯(cuò)誤，所以必須要加退出條件 return
<body> <script> // 遞歸函數(shù) : 函數(shù)內(nèi)部自己調(diào)用自己, 這個(gè)函數(shù)就是遞歸函數(shù) var num = 1; function fn() { console.log('我要打印6句話'); if (num == 6) { return; // 遞歸里面必須加退出條件 } num++; fn(); } fn(); </script></body>
6、淺拷貝和深拷貝
- 淺拷貝只是拷貝一層，更深層次對(duì)象級(jí)別的只拷貝引用
- 深拷貝拷貝多層，每一級(jí)別的數(shù)據(jù)都會(huì)拷貝
Object.assign(target,....sources)ES6新增方法可以淺拷貝
6.1、淺拷貝
// 淺拷貝只是拷貝一層，更深層次對(duì)象級(jí)別的只拷貝引用var obj = { id: 1, name: 'andy', msg: { age: 18 }};var o = {}for(var k in obj){ // k是屬性名，obj[k]是屬性值 o[k] = obj.[k];}console.log(o);// 淺拷貝語法糖Object.assign(o,obj);
6.2、深拷貝
// 深拷貝拷貝多層，每一級(jí)別的數(shù)據(jù)都會(huì)拷貝var obj = { id: 1, name: 'andy', msg: { age: 18 } color: ['pink','red']};var o = {};// 封裝函數(shù)function deepCopy(newobj,oldobj){ for(var k in oldobj){ // 判斷屬性值屬于簡(jiǎn)單數(shù)據(jù)類型還是復(fù)雜數(shù)據(jù)類型 // 1.獲取屬性值 oldobj[k] var item = obldobj[k]; // 2.判斷這個(gè)值是否是數(shù)組 if(item instanceof Array){ newobj[k] = []; deepCopy(newobj[k],item) }else if (item instanceof Object){ // 3.判斷這個(gè)值是否是對(duì)象 newobj[k] = {}; deepCopy(newobj[k],item) }else { // 4.屬于簡(jiǎn)單數(shù)據(jù)類型 newobj[k] = item; } }}deepCopy(o,obj);
7、 正則表達(dá)式
正則表達(dá)式是用于匹配字符串中字符組合的模式。在JavaScript中，正則表達(dá)式也是對(duì)象。
正則表通常被用來檢索、替換那些符合某個(gè)模式（規(guī)則）的文本，例如驗(yàn)證表單：用戶名表單只能輸入英文字母、數(shù)字或者下劃線， 昵稱輸入框中可以輸入中文(匹配)。此外，正則表達(dá)式還常用于過濾掉頁面內(nèi)容中的一些敏感詞(替換)，或從字符串中獲取我們想要的特定部分(提取)等 。
7.1、特點(diǎn)
- 實(shí)際開發(fā)，一般都是直接復(fù)制寫好的正則表達(dá)式
- 但是要求會(huì)使用正則表達(dá)式并且根據(jù)自身實(shí)際情況修改正則表達(dá)式
7.2、創(chuàng)建正則表達(dá)式
在JavaScript中，可以通過兩種方式創(chuàng)建正則表達(dá)式
-
通過調(diào)用 RegExp 對(duì)象的構(gòu)造函數(shù)創(chuàng)建
-
通過字面量創(chuàng)建
7.2.1、通過調(diào)用 RegExp 對(duì)象的構(gòu)造函數(shù)創(chuàng)建
通過調(diào)用 RegExp 對(duì)象的構(gòu)造函數(shù)創(chuàng)建
var 變量名 = new RegExp(/表達(dá)式/);
7.2.2、通過字面量創(chuàng)建
通過字面量創(chuàng)建
var 變量名 = /表達(dá)式/;
注釋中間放表達(dá)式就是正則字面量
7.2.3、測(cè)試正則表達(dá)式 test
test()正則對(duì)象方法，用于檢測(cè)字符串是否符合該規(guī)則，該對(duì)象會(huì)返回true或false,其參數(shù)是測(cè)試字符串
regexObj.test(str)
regexObj寫的是正則表達(dá)式str我們要測(cè)試的文本- 就是檢測(cè)
str文本是否符合我們寫的正則表達(dá)式規(guī)范
示例
<body> <script> // 正則表達(dá)式在js中的使用 // 1. 利用 RegExp對(duì)象來創(chuàng)建 正則表達(dá)式 var regexp = new RegExp(/123/); console.log(regexp); // 2. 利用字面量創(chuàng)建 正則表達(dá)式 var rg = /123/; // 3.test 方法用來檢測(cè)字符串是否符合正則表達(dá)式要求的規(guī)范 console.log(rg.test(123)); console.log(rg.test('abc')); </script></body>
7.3、正則表達(dá)式中的特殊在字符
7.3.1、邊界符
正則表達(dá)式中的邊界符(位置符)用來提示字符所處的位置，主要有兩個(gè)字符
| 邊界符 | 說明 |
|---|---|
| ^ | 表示匹配行首的文本(以誰開始) |
| $ | 表示匹配行尾的文本(以誰結(jié)束) |
如果^ 和 $ 在一起，表示必須是精確匹配
// 邊界符 ^ $ 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')); var reg = /^abc/; console.log(reg.test('abc')); //true console.log(reg.test('abcd')); // true console.log(reg.test('aabcd')); // false var reg1 = /^abc$/ // 以abc開頭，以abc結(jié)尾，必須是abc
7.3.2、字符類
- 字符類表示有一系列字符可供選擇，只要匹配其中一個(gè)就可以了
- 所有可供選擇的字符都放在方括號(hào)內(nèi)
①[] 方括號(hào)
/[abc]/.test('andy'); // true
后面的字符串只要包含 abc 中任意一個(gè)字符,都返回true
②[-]方括號(hào)內(nèi)部 范圍符
/^[a-z]$/.test()
方括號(hào)內(nèi)部加上–表示范圍，這里表示a – z26個(gè)英文字母都可以
③[^] 方括號(hào)內(nèi)部 取反符 ^
/[^abc]/.test('andy') // false
方括號(hào)內(nèi)部加上^表示取反，只要包含方括號(hào)內(nèi)的字符，都返回 false
注意和邊界符 ^ 區(qū)別，邊界符寫到方括號(hào)外面
④字符組合
/[a-z1-9]/.test('andy') // true
方括號(hào)內(nèi)部可以使用字符組合，這里表示包含a 到 z的26個(gè)英文字母和1到9的數(shù)字都可以
<body> <script> //var rg = /abc/; 只要包含abc就可以 // 字符類: [] 表示有一系列字符可供選擇，只要匹配其中一個(gè)就可以了 var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回為true console.log(rg.test('andy')); console.log(rg.test('baby')); console.log(rg.test('color')); console.log(rg.test('red')); var rg1 = /^[abc]$/; // 三選一 只有是a 或者是 b 或者是c 這三個(gè)字母才返回 true console.log(rg1.test('aa')); console.log(rg1.test('a')); console.log(rg1.test('b')); console.log(rg1.test('c')); console.log(rg1.test('abc')); console.log('------------------'); var reg = /^[a-z]$/; // 26個(gè)英文字母任何一個(gè)字母返回 true - 表示的是a 到z 的范圍 console.log(reg.test('a')); console.log(reg.test('z')); console.log(reg.test(1)); console.log(reg.test('A')); // 字符組合 var reg1 = /^[a-zA-Z0-9_-]$/; // 26個(gè)英文字母(大寫和小寫都可以)任何一個(gè)字母返回 true console.log(reg1.test('a')); console.log(reg1.test('B')); console.log(reg1.test(8)); console.log(reg1.test('-')); console.log(reg1.test('_')); console.log(reg1.test('!')); console.log('----------------'); // 如果中括號(hào)里面有^ 表示取反的意思 千萬和 我們邊界符 ^ 別混淆 var reg2 = /^[^a-zA-Z0-9_-]$/; console.log(reg2.test('a')); console.log(reg2.test('B')); console.log(reg2.test(8)); console.log(reg2.test('-')); console.log(reg2.test('_')); console.log(reg2.test('!')); </script></body>
7.3.3、量詞符
量詞符用來設(shè)定某個(gè)模式出現(xiàn)的次數(shù)
