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