ES6的变量

ES6学习笔记

变量let和常量const

在此首先感谢石川老师，本笔记内容均是基于老师的视频教程，如果有照搬老师原话的，请恕本人水平不够。

var的问题们

在之前的版本中我们怎么来定义一个变量呢？
作为一个弱类型的语言，没有什么是一个var解决不了的，于是问题来了。我们先看几个之前ES5版本会有的几个问题：

1. 可以重复声明
   

   在一个项目中，如果在版本迭代中或者多人协作中，使用了相同的变量名，就可能造成错误。

//可以重复声明var a = 12;var a = 100;console.log(a);     //控制台打印100

1. 无法限制修改

// 有很多约定俗成的量是不可变的var PI = 3.1415926;PI = 4;// 这是不合理的

1. 没有块级作用域
   在C++。Java这些严谨的语言中，块级作用域是很重要的，但是js在这方面并不明显

if(true){    var a = 13;}//在if外面也可以访问console.log(a);

let和const

1. let和const不能重复声明

let a = 10;let a = 100;

下面是报错信息

Uncaught SyntaxError: Identifier ‘a’ has already been declared

const b = 10;const b = 100;

下面是报错信息

Uncaught SyntaxError: Identifier ‘b’ has already been declared

1. let可以修改，const不可修改

let a= 10;a = 100;console.log(a);const b = 10;b = 100;console.log(b);

下面是错误信息

Uncaught TypeError: Assignment to constant variable.

1. 块级作用域问题

    {        let a = 13;    }    //在if外面不可以访问    console.log(a);

错误信息

Uncaught ReferenceError: a is not defined

块级作用域的一个重要作用

这个是我没有想到的点，石川老师讲了这个例子

“就这一个例子过来，保准你服服帖帖的，一辈子都喜欢块级作用域。”

先看看旧版本的问题

<input type="button" value="Btn1"><input type="button" value="Btn2"><input type="button" value="Btn3"><script type = "text/javascript">window.onload = function(){    var btns = document.getElementsByTagName("input");    console.log(btns);    for(var i = 0;i < btns.length;i++){        btns[i].addEventListener("click",function(){            alert(i);        });    }}</script>

经过尝试之后，我们发现，不会像预想的一样分别alert出0，1，2，而都是alert出了3.
我们往往要用匿名函数来解决问题

<script type = "text/javascript">window.onload = function(){    var btns = document.getElementsByTagName("input");    console.log(btns);    for(var i = 0;i < btns.length;i++){        (function(i){            btns[i].addEventListener("click",function(){                alert(i);            });        })(i);    }}</script>

这样很繁琐，而且有其他语言使用习惯的，往往不习惯使用函数作用域。
只要把for循环中的var改为let就可以完美的解决这个问题，不妨试试下面的代码：

window.onload = function(){    var btns = document.getElementsByTagName("input");    console.log(btns);    for(let i = 0;i < btns.length;i++){        btns[i].addEventListener("click",function(){            alert(i);        });    }}

本文完