es6中var、let、const深入将解和对比-案例

var有预解析，alert(a);var a=5;先使用，后定义也仍然不会报错，只是获取不到后面赋的值。因为变量提升（只要在同个作用域有定义就能预解析）。相当于 var a；alert(a); a=5;//undefined;因此如果先使用，后面赋值与否没有意义。

var a=12;
function fn() {
    alert(a);
    var a=5;
}
fn();//undefined,即a有定义了但后面才赋值

等同于

function fn() {
    var a; 
    alert(a);
    a=5;
}

let没有预解析，alert(b);let b;//b is not defined 先使用后定义会报错。另外在函数作用域外定义过同样的变量，在内部执行如上代码仍然无法获取值。var同样。

var b=12;
function fn() {
    alert(b);//TDZ 暂时性死区
    let b;
}
fn();b is not defined，没有变量提升，因此报错提示b没有定义

在同个作用域，var 重复定义下一个的值会覆盖上一个，let会报错，提示已经定义过。

var 定义的变量只有在全局和函数内有作用域，在块级作用域内定义仍然是全局变量。

for(var i=0;i<10;i++){
}
console.log(i);//10

一般{}即是快级作用域，如if(){}; for(){} ;while(){};

for(let i=0;i<10;i++){
    let i=abc;
    console.log(i);//abc abc 10个
}
console.log(i);//is not defined报错

for循环相当于父级作用域，里面的{}是子作用域，作用域可以无限嵌套，所以{}里的i不算重复定义。和函数一样若使用变量会向上寻找定义的地方，子作用域找不到定义会一层层去找父级作用域。若当前作用域定义了但未赋值，则提示undefined，而不会再去找父级作用域。若在当前作用域使用之后定义了，则会报is not defined的错，也不会再去父级找。

let j="888";
for(let i=0;i<10;i++){
    //let j;//定义在此输出undefined 10次
    console.log(j);//
    let j;//定义在此报is not defined，无法继续
}

let相较于var的优势体现，类似选项卡功能，应用数个按钮切换。for循环若换成var则因为i是全局变量循环结果为按钮的数量而无法实现。

window.onload=function(){
    var myBtn=document.querySelectorAll("input");
    for(let i=0;i<myBtn.length;i++){
        myBtn[i].onclick=function () {
            console.log(i);//点击输出按钮的index，如0，1，2
        }
    }
}

const特性和let一样，定义的是常量，不能修改。定义的时候必须赋值。即不能光定义不赋值，也不能先定义后赋值。并不是变量的值不能修改，而是指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，不管它指向的数据结构是否可变。因此，将一个对象声明为常量必须非常小心。

const d;
d=12;
console.log(d);//Missing initializer in const declaration 报错
const dblink = 5;
dblink=12;//Assignment to constant variable.报错

示例

const arrB=['apple','banana'];
//arrB=[];//会报错
arrB.push('orange');//可以添加，因为是对arrB对象的引用，不是修改对象的本身
arrB[0]='strawberry';//可以修改
//配置文件演示
const config={
    host:'',
    username:'',
    password:'',
    version:''
}
config.username="vivi";//可以
config=false;//报错

//彻底无法修改的方法
const arrC=Object.freeze(['apple','banana']);
arrC.push('orange');
console.log(arrC);//Cannot add property 2, object is not extensible冻结引用后也无法修改

立即执行匿名函数。自执行函数

(function(){
//TODO
})()
//等同于
{
//TODO
}