ES6系统学习----对比var，let

朱雀 2022-03-21 15:14 154阅读 0赞

对于`ES6`，虽然之前也有过学习，但总的来说还是不够系统的，知识点非常的零碎。现在结合之前遇到的问题把`ES6`中的知识点总结一下。  
最初接触`ES6`时，明白`ES5`中声明变量的方式是使用`var`，在`ES6`中他是使用`let`的方式进行声明的。  
`JavaScript`是一个弱类型的语言。他无法在编译时就提示一些语法错误，只能在运行时期才能够发现错误。因此`ES6`包括以`ES6`为基础产生的`TypeScript`语法糖在逐渐的趋近于强类型的语言。  
进入正题，结合问题看一下`var`和`let`的区别

## 一：富二代和富一代 ##

**1：我们来看第一段代码（从前两篇博客中摘过来的）：**

var divArr = document.getElementsByTagName("div");
        for (var i = 0;i < divArr.length;i++){
            divArr[i].onclick = function(){
                console.log(i);
            }
        }

运行结果为：  
![在这里插入图片描述][20190202221744787.png]  
**分析：**  
首先声明一下：  
**ES5中只有全局作用域和函数作用域没有块级作用域**  
因此在这段使用`var`声明的i变量，`i`在全局范围内都有效，因此在全局范围内只有一个变量`i`。因此很清晰的就是只要循环一次，变量`i`的值都是需要发生变化的。他是覆盖而不是创建，因此我把它称之为富二代，啃老族  
**在代码1中增加一段代码：**

var divArr = document.getElementsByTagName("div");
        for (var i = 0;i < divArr.length;i++){
            divArr[i].onclick = function(){
                console.log(i);
            }
        }
         console.log(i);  //输出3

上述代码就可以证明了 在使用`var`声明了变量i之后，他的作用域是全局的。而不是在块级作用域中，所以他才可以在最后一行输出`i`的值。这样也验证了使用`var`声明的变量是不具备块级作用域的。

**2：来看第二段代码：**

var divArr = document.getElementsByTagName("div");
        for (let i = 0;i < divArr.length;i++){
                divArr[i].onclick = function(){
                    console.log(i);
                }
            };

运行结果为：  
![在这里插入图片描述][20190202221954517.png]  
从前面的博客中使用的是闭包进行处理代码1中的问题，现在使用的是`ES6`中的`let`进行处理。当使用`let`进行声明变量时，当前变量`i`只在本轮循环中有效，因此每一个循环中的`i`其实都是一个新的变量`i`，初始化本轮的变量`i`的值其实是上一轮循环的值（`js`引擎内部原理）。因此在编译后的执行阶段，每一个`i`都是不一样的变量。`let`是创建，而不是`var`的覆盖。因而称之为富一代。  
既然上边谈到作用域的问题，就不得不说了`ES6`中的作用域的问题：  
**ES6中新增了块级作用域，在作用域中声明的变量只在当前作用域中有效**

var divArr = document.getElementsByTagName("div");
        for (let i = 0;i < divArr.length;i++){
                divArr[i].onclick = function(){
                    console.log(i);
                }
            };
    console.log(i);

最后一行的输出结果和前面的很不一样  
![在这里插入图片描述][20190202230442850.png]  
很显然，在`for`循环外部，是获取不到变量i的，而这种变化正是`ES6`中的`let`赋予的。

## 二：总结 ##

1：由于变量作用域的问题会导致两者声明的变量的适用范围有着极大的不同；  
2：使用`var`声明的变量是一个覆盖，顶替的过程，而使用`let`声明变量是一个创建，并在原有基础上开拓的过程。  
3：所以`js`语法标准的更新将对良好编程习惯有着极大的利好。

[20190202221744787.png]: /images/20220321/471fc5eff3504d4abaf20b75ea7b1826.png
[20190202221954517.png]: /images/20220321/7b69439ab14642e8abf1cebeb97b0e1c.png
[20190202230442850.png]: /images/20220321/9f6dad53ccc5454b9bfa07de90df7878.png