var、let、const的使用区别

let 、var 、const 的使用

var 的使用

var 定义的变量没有作用域，往往在使用 if 和 for 语句的时候因为 var 定义的变量没有块级作用域，一般会使用 function 的作用域来解决引用外部变量的问题。

1. 变量作用域：指变量在什么范围内是起作用的。
   代码示例：

     function aa() {
                var name = 'xiaoming';
                console.log(name)
            }
            aa();// ---> 打印结果：xiaoming
            console.log(name); // 没有打印出任何东西，因为全局作用域中么有name变量
   

2. 没有块级作用域引起的问题：if的块级

    var func;
        // var name1 = ' xiaozhang';
        if(true) {
            var  name1 = 'xiaohong'; // if 是没有块级作用域的，所以在里面定义的name1是可以在外面其中用的
            func = function() {
                console.log(name1);
            }
            func();//打印结果是 xiaohong, if 没有作用域，里面的name1可以直接使用。
        }
        func();//打印结果是 xiaohong ，if 没有作用域，里面的name1可以直接使用。
        name1 = ' xiaozhang'; //相当于重新给name1赋值
        func();// 此时打印结果就是 xiaozhang ,
   

3. 没有块级作用域引起的问题：for的块级
   html部分:

   <div id="app">
   	        <button>按钮</button>
   	        <button>按钮</button>
   	        <button>按钮</button>
   	        <button>按钮</button>
   	        <button>按钮</button>
       	</div>
   

   js部分：

   var btn = document.getElementsByTagName('button');
           // for(var i = 0; i < btn.length; i ++){
               //因为for没有块级作用域，所以这里执行的代码 i = 0; i = 1; i = 2; i = 3; i = 4;
               // btn[i]相当于接收的 i 就是已经循环完的 i
               btn[i].addEventListener('click',function () {
               console.log('第' + (i + 1) + '个按钮被点击');/*点击后打印的结果都是第6个按钮被点击，为什么呢？
               //                 因为for是没有块级作用域的，给后面传递来的 i 是已经循环结束的 i ，而不是循环一次就传入事件监听函数里面了。
               //                 */
               // })
           // }
   

   正常思路一般会是像上面的代码那样去实现点击第几个按钮，控制台显示 第几个按钮被点击了
   首先先看看运行的结果：
   
   运行的结果并不是如想象中的那样，而是全部显示的是第6个按钮被点击。
   产生的原因：因为 for 循环没有块级作用域，变量是用 var 进行定义的，所以在for循环中遍历时，后面 btn[i] 所拿到的值是 for 循环循环结束后的值。
   解决办法：
   1. 使用立即执行函数，for 循环每循环一次，就执行一次事件监听，控制台打印

    (function (i) {
                   btn[i].addEventListener('click',function () {
                       console.log('第' + (i + 1) + '个按钮被点击')
                   })     
                })(i)
   

   运行结果：
   
   2. 将 let 代替 var， let 声明的变量有作用域。

    for(let i = 0; i < btn.length; i ++){
               btn[i].addEventListener('click',function(){
                   console.log('第' + (i + 1) + '个按钮被点击')
               })
           }
   

   运行结果：
   

let 的使用

上面解决方法2 中已经提到了 let 的一种使用场景
为了让 if 和 for 语句有块级作用域，使用 let 进行变量声明。
具体代码演示和var 的大致相同，只是改了声明变量的关键字。

const 的使用

什么时候使用const : 当修饰的标识符不会被再次赋值的时候，就可以使用const来保证数据的安全性。
const 定义的变量是永恒的，不能改变的。
建议：在ES6开发中，优先使用 const ,只有需要改变某个标识符的时候才使用 let 。

注意1： 一旦给const修饰的标识符被赋值之后，不能改变；

const name = 'xiaoming'
    //name = 'xiaogong';//不能再修改name了，这里会报错

运行结果：

注意2: 在使用const定义标识符的时候必须赋值。否则就会报错

const sex; //这里const定义sex的时候就要赋值，不赋值就会报错
const sex = 'male'

运行结果：

注意3：常量的含义是指向的对象不能修改，但是可以修改对象内部的属性。

const obj = {
    name : 'diandian',
    age : 23,
    height : 170
    }
console.log(obj);
obj.name = 'sunhao-wife'
obj.age = '22',
obj.height = '166'
console.log(obj);

运行结果：