es6 初級之let

時間 2020-07-10

標籤 es6 初級 let 欄目 JavaScript 简体版

原文原文鏈接

1.在es6 中，定義變量使用 let.html

1.1 var定義變量：es6

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <script>
 8         var j = 39;
 9         var j = "aaa";
10         console.log(j);
11     </script>
12 </head>
13 <body>
14 </body>
15 </html>

運行結果：閉包

1.2 let定義變量：換成使用ES6 的 let 相同格式定義變量：異步

1         let j = 39;
2         let j = "aaa";
3         console.log(j);

輸出：輸出報錯函數

緣由：let 是塊級做用域，不能夠重複定義ui

1.3 所謂塊級做用域，能夠理解爲{}括起來的範圍，或者函數體內部的範圍，例如：this

1         let a = 10;
2         if (a) {
3             let a = 100;
4             console.log(a);        //100
5         }
6         console.log(a);            //10

1.4 var 和let的區別：spa

1.4.1 輸出var 循環後的i 值code

1         for (var i = 1; i <= 10; i++) {
2 
3         }
4         console.log(i);                               //11

結果：循環後，輸出結果爲11htm

1.4.2 輸出 let 循環後的 i 值

1    for (let i = 1; i <= 10; i++) {
2 
3         }
4    console.log(i); //外面訪問不到

結果：輸出後，結果報錯，顯示沒有定義。

1.4.3 在for循環內，i 值能夠輸出

1         for (let i = 1; i <= 10; i++) {
2             //能夠訪問的到
3             console.log(i);
4         }
5         console.log(i); //外面訪問不到

運行結果：

1.5 var 和 let 在函數中的差別

1.5.1 var

 1  function show(flag) {
 2             console.log(a);             //undefined
 3             if (flag) {
 4                 var a = 'aluoha';
 5                 return a;
 6             } else {
 7                 console.log(a);         //undefined
 8                 return null;
 9             }
10    }
11    show(false);
12    show(true);

運行結果：

1.5.2 let

 1  function show(flag) {
 2             console.log(a); //報錯了
 3             if (flag) {
 4                 let a = 'ghostwu'; //let定義的變量不會提高
 5                 return a;
 6             } else {
 7                 console.log(a);
 8                 return null;
 9             }
10         }
11  show(false);
12  show(true);

運行結果：在第11行直接報錯了，由於在第2行的console.log(a)中，a 沒有定義

報錯緣由：i 用let 進行定義，let是塊及做用與，只是在{}內起做用，{}外就不起做用了；可是，若是使用var 定義i，var 是全局做用域，會進行變量提高，將var a 提到console.log(a)以前，因此就不會報錯

2. let 應用：

獲取點擊框的索引：

下面這種方式沒法獲取：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <script>
 8         window.onload = function() {
 9             var aBtn = document.querySelectorAll("input");
10             for (var i = 0; i < aBtn.length; i++) {
11                 aBtn[i].onclick = function() {
12                     console.log(i);
13                 }
14             }
15         }
16     </script>
17 </head>
18 <body>
19     <input type="button" value="按鈕1">
20     <input type="button" value="按鈕2">
21     <input type="button" value="按鈕3">
22     <input type="button" value="按鈕4">
23 </body>
24 </html>

結果：不管點擊那個按鈕，獲得的結果都是4

緣由：i 循環後，結果是4；而點擊事件是一個異步事件，異步事件的執行老是在同步事件的執行以後，執行完循環，纔會去執行點擊事件

2.1 一般的作法，在input 元素上加上一個自定義的索引 index ，點擊的時候，獲取index 的值，而不是獲取 i 的值，這樣就能夠達到獲取索引的目的了

js代碼修正：

 1 <script>
 2         window.onload = function() {
 3             var aBtn = document.querySelectorAll("input");
 4             for (var i = 0; i < aBtn.length; i++) {
 5                 aBtn[i].index = i;
 6                 aBtn[i].onclick = function() {
 7                     console.log(this.index);
 8                 }
 9             }
10         }
11  </script>

結果：

2.2 採用閉包的方式獲取索引：

 1 window.onload = function() {
 2             var aBtn = document.querySelectorAll("input");
 3             for (var i = 0; i < aBtn.length; i++) {
 4                 aBtn[i].onclick = (function(j) {
 5                     return function() {
 6                             console.log(j);
 7                         }
 8                 }(i));
 9             }
10 }

結果：

2.3 採用es6 let 方式定義：

 1  window.onload = function() {
 2             var aBtn = document.querySelectorAll("input");
 3             /*
 4                 第一次 i = 0, i++以後 ---> 釋放
 5                 第一次 i = 1, i++以後 ---> 釋放
 6             */
 7             for (let i = 0; i < aBtn.length; i++) {
 8                 aBtn[i].onclick = function() {
 9                     console.log(i);
10                 }
11             }
12   }

運行結果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。