深入理解ES6--块级作用域(let const)

var 声明及变量提升机制

var 的声明提升机制 —> 在函数作用域或全局作用域中通过关键字var 声明的变量,无论实际在哪里声明,都会被当成在当前作用域(ES5作用域,只有函数能起到块级作用域的目的)顶部声明的变量.
var 声明的变量会覆盖window的原有对象

var value;
if(true){
    //可以重复声明
    var value = 1;
}
//本应该只作用在if 花括号之内
console.log(value);//1;
var Math = 1; //window.Math === Math  true

ES6 的块级声明

let 声明

1.let 不能重复声明
2.只作用在当前代码块
3.声明的变量不会覆盖window 上面的变量

if(true){
    let value = 1;
}
console.log(value);//undefined;

let Math = 1; //window.Math === Math  false
/*带来的问题:
当你使用iframe去调用对象的时候.由于let 声明的变量不在window上面,
无法通过iframe调用,所以这种情况需要使用var来声明变量 */

const 声明

const表示声明的是常量,和let 一样也是块级作用域
1.const 不能重复声明
2.声明同时需要赋值
3.不能重复赋值
4.声明的是对象的话,可以修改对象的内容
5.声明的变量不会覆盖window 上面的变量

const val; // 语法错误,常量未初始化
const value = 1;
if(true){
    //作用域不同可以声明,let 可以置换为const
    let value = 1;
}
value = 2; //语法错误,不能重复赋值 

const obj = {};
obj.xx = "xx";//可以修改对象的内容
obj = 1;//错误,不能修改obj 的绑定

临时死区

用来描述let 和const 声明的变量不提升的效果

if(true){
    console.log(typeof value);//错误:value is not defined
    let value = 'val';
}

循环中的声明

    var funcs = [];
    for (var i = 0; i < 10 ; i++) {
        funcs.push(function(){
            console.log(i);
        })
    }
    funcs.forEach(function(v){
        v(); //输出 10次10,让新手很痛苦的问题,需要用闭包解决,在此就不赘述
    })

    var funcs = [];
    for (let i = 0; i < 10 ; i++) {
        funcs.push(function(){
            console.log(i);
        })
    }
    funcs.forEach(function(v){
        v(); //输出0,1,2,3,4,5,6,7,8,9
    })
    //const 的话会报错,再循环中,for(let i=0;i<10;i++)
    //相当于给 i 赋值10次,const 不能重复赋值所以报错

    for(const key in obj){
        //当const 遍历对象 ,循环迭代,不会报错
    }