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