webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: let 和 const

Browse Source
This commit is contained in:
qianguyihao 2019-09-04 10:47:23 +08:00
parent 9021ded31e
commit 4b62e3e5d7
1 changed files with 95 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
10-ES6/04-ES6：变量、函数扩展.md
View File

@ -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,11 +111,103 @@ 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。
## 变量的解构赋值
@ -123,7 +215,6 @@ ES6允许我们，通过数组或者对象的方式，对一组变量进行赋
解构赋值在实际开发中可以大量减少我们的代码量，并且让程序结构更清晰。
### 数组的解构赋值
**举例：**