update: let 和 const

lguow · Sep 4, 2019 · 5c5b42f · 5c5b42f
1 parent ec9ee6d
commit 5c5b42f
Showing 1 changed file with 95 additions and 4 deletions.
diff --git a/10-ES6/04-ES6：变量、函数扩展.md b/10-ES6/04-ES6：变量、函数扩展.md
@@ -60,7 +60,7 @@ let是防止数据污染，我们来看下面这个 **for 循环**的例子，
 
 ```javascript
 for (var i = 0; i < 10; i++) {
-    console.log('循环体中:' + i);
+    console.log('循环体中:' + i); // 每循环一次，就会在 { } 所在的块级作用域中，重新定义一个新的 i
 }
 
 console.log('循环体外:' + i);
@@ -79,7 +79,7 @@ console.log('循环体外:' + i);
 
 ```
 
-上方代码的最后一行无法打印结果，也就是说打印会报错。因为用 let 定义的变量 i，只在`{ }`这个块级作用域里生效。
+上方代码的最后一行无法打印结果，也就是说打印会报错。因为用 let 定义的变量 i，只在`{ }`这个**块级作用域**里生效。
 
 **总结：**我们要习惯用 let 声明，减少var声明带来的**污染全局空间**。
 
@@ -111,19 +111,110 @@ let 和 const 的作用如下：
 
 ### for循环举例【经典案例】
 
-我们先来看看如下代码：（用 var 定义变量 i）
+**代码1**、我们先来看看如下代码：（用 var 定义变量 i）
+
+```html
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta />
+    <meta />
+    <meta />
+    <title>Document</title>
+  </head>
+  <body>
+    <input type="button" value="aa" />
+    <input type="button" value="bb" />
+    <input type="button" value="cc" />
+    <input type="button" value="dd" />
+
+    <script>
+      var myBtn = document.getElementsByTagName("input");
+
+      for (var i = 0; i < myBtn.length; i++) {
+        myBtn[i].onclick = function() {
+          alert(i);
+        };
+      }
+    </script>
+  </body>
+</html>
+```
+
+上方代码中的运行效果如下：
+
+![](http://img.smyhvae.com/20190904_1030.gif)
+
+你可能会感到诧异，为何点击任何一个按钮，弹出的内容都是4呢？这是因为，我们用 var 定义的变量 i，是在全局作用域声明的。整个代码中，自始至终只有一个变量。当我们还没点击按钮之前，变量 i 已经循环到4了。
 
+也就是说，上面的 for 循环，相当于如下代码：
 
+```javascript
+	var i = 0;
+	myBtn[0].onclick = function() {
+	alert(i);
+	};
+	i++;
 
+	myBtn[1].onclick = function() {
+	alert(i);
+	};
+	i++;
 
+	myBtn[2].onclick = function() {
+	alert(i);
+	};
+	i++;
+
+	myBtn[3].onclick = function() {
+	alert(i);
+	};
+	i++;  // 到这里，i 的值已经是4了。因此，当我们点击按钮时，i的值一直都是4
+```
+
+
+**代码2**、上面的代码中，如果我们用 let 定义变量 i：
+
+```html
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta />
+    <meta />
+    <meta />
+    <title>Document</title>
+  </head>
+  <body>
+    <input type="button" value="aa" />
+    <input type="button" value="bb" />
+    <input type="button" value="cc" />
+    <input type="button" value="dd" />
+
+    <script>
+      var myBtn = document.getElementsByTagName("input");
+
+      for (let i = 0; i < myBtn.length; i++) {
+        myBtn[i].onclick = function() {
+          alert(i);
+        };
+      }
+    </script>
+  </body>
+</html>
+```
+
+上方代码中的运行效果如下：
+
+![](http://img.smyhvae.com/20190904_1040.gif)
+
+上面这个运行结果，才是我们预期的效果。我们用 let 定义变量i，在循环的过程中，每执行一次循环体，就会诞生一个新的 i。循环体执行4次，就会有四个 i。
 
 ## 变量的解构赋值
 
 ES6允许我们，通过数组或者对象的方式，对一组变量进行赋值，这被称为解构。
 
 解构赋值在实际开发中可以大量减少我们的代码量，并且让程序结构更清晰。
 
-
 ### 数组的解构赋值
 
 **举例：**