ES6折腾记- let/const块级变量及块作用域

前言

话说ES6之前有局部变量，全局变量，唯独木有块级变量;也没有常量之说...

---

块级变量let及常量const

var

ES5及之前是木有块级变量这个说法的，常规性是用闭包来防止变量泄露;
我来列出下ES5 var声明的一些特点

1. 函数内的变量若是带var声明，则会覆盖外部的全局变量优先使用；若是函数内部声明变量不带var，则直接覆盖同名的全局变量
2. 函数内存在变量提升的情况，可以先使用后声明
3. for循环中的var会污染全局【不局限于循环内】

// 1.        var test1 = 5;        function f(){            var test1 = 3;            console.log(test1);        }        f(); //打印出的结果是3//2.        var test1 = 5;        function f2(){            console.log(test1);            var test1 = 3;        }        f2(); //打印结果是undefined, JS允许不存在的变量先使用,默认会初始化为一个undefined//3.         for(var i = 0 ; i < 9 ; i++){            console.log("循环内部"+i);        }        console.log(i); //打印值为 9         console.log(i * 5); // 打印值为 45

let

而ES6中出了一个新变量，不在于取代var,而在于解决ES5中var声明中的一些痛点；这货就是let了
我来说说这货的特点

1. let是块级变量，不存在于window下[非全局属性]，window.变量名是找不到这货的，它的生活空间就那么一小块
2. let不允许重新声明同名变量，会抛出异常，具有唯一性；
3. let不允许没声明就使用，会抛出异常，只有执行该声明的时候才能使用；
4. let有自己特色的闭包特性，比如在for循环的应用中

//1.   let tt = '哟哟切克闹！';    console.log(tt); //打印出'哟哟切克闹！'    console.log(window.tt); //打印出undefined//2.    function test2(){        var abc = 99;        let abc = 88;        console.log(abc);    }    test2()//打印值：Uncaught SyntaxError: Identifier 'abc' has already been declared//3.    function test3(){        console.log(test3);        let test3 = '恭喜发财！！';    }    test3();//打印值：Uncaught ReferenceError: test3 is not defined//4. 每一次for循环都重新绑定一次作用域且脱离失效，就是let自身的特色    for(let i= 0 ; i < 9 ; i++){        console.log("循环内的值是： "+i);    }    console.log(i); //打印值看下面/*循环内的值是： 0test.html:10 循环内的值是： 1test.html:10 循环内的值是： 2test.html:10 循环内的值是： 3test.html:10 循环内的值是： 4test.html:10 循环内的值是： 5test.html:10 循环内的值是： 6test.html:10 循环内的值是： 7test.html:10 循环内的值是： 8test.html:12 Uncaught ReferenceError: i is not defined*/

const

const的也有一些自身特点：

1. 与let一样，具有唯一性，不可重复声明；
2. 可以理解为只读变量，但是并非一成不变 — 值得一提哦

//1.    var qwe = 22;    const qwe = 11;// Uncaught SyntaxError: Identifier 'qwe' has already been declared(…)//2.    const N = 99; //现在状态我是只读变量么，答案是的。。更改抛出异常;    const N1 = [1,'2'];    const N2 = {a:'b'}; //数组和对象这状态是只读不可变的么。。。答案不是的，还能操作数组内的数据及对象数据的变动~~~~~记得么！！！！/* 不信瞅瞅声明：const N1 = [1,'2'];数组操作：N1.push(6)输出结果：[1, "2", 6]声明：const N2 = {a:'b'};对象操作：N2.add = [1,2,3]输出结果：Object {a: "b", add: Array[3]}*/

显式作用域

这货和let是好基友；为了让我们代码更加清晰，不至于越来越混乱，为了更美好的明天，我们有必要引入显式块级作用域；

• 写法： {} — 对象！！！！ , 不，这货就是显式块级作用域

var idea = "playGame";if(idea){    {        let gameName = 'LOL';        //我就是显式块级作用域        //玩游戏肯定要专心啊，但是脱离游戏状态就要果断点额;        //do somethins .... LOL ,Dota2..    }    console.log('I hope play'+gameName); //玩你妹，学习去}

温馨提示：let最好结合显式块级作用域一起用，或者在闭包中，在全局中使用【没把握好，容易一堆报错；】

---

总结

本来想扯扯作用域这块，，，但。。。。心有余而力不足。因为说到作用域，就不得不提闭包，说到闭包就不得不提this;那么说到this,又能扯到ES5的call,apply,bind,IIFE,try..catch这些，ES6的箭头函数。。。让我捋捋头绪再总结一下吧。知识面涉及比较广