ES6与ES5基本用法的对比理解

let 与var

ES5的变量分为:全局变量((方法function,对象object{})外面的变量,或没有加var的变量)和局部变量(反之),var去声明;ES6中的let,只在所在的代码块内有效。

示例一

{
  let yage = 10;
  var wage = 1;
}

yage // ReferenceError: a is not defined.
wage // 1

var声明的wage没有块级作用域限制,全局范围下能访问到它,所以不会报错。

示例二

var声明下的打印输出

function resultAge(type){
    var age =0;
    if(type){
        var age = 1;
    }
    //丧心病狂模式
    {
      var age = 10;
      {
       var age = 100;
      }
    } 
    return age
}
console.log(resultAge(true));
100 //

let声明下的打印输出

function resultAge(type){
    var age =0;//let  var混合方式
    if(type){
        let age = 1;
    }
    //丧心病狂模式
    {
      let age = 10;
      {
        let age = 100;
      }
    } 
    return age
}
console.log(resultAge(true));

对于var声明的resultAge函数,存在变量提升,即无论在哪里声明,浏览器解析时,都是被提升到当前作用域的顶部被声明。所以改造一下:

function resultAge(type){
    var age;
    var age;
    var age;
    var age;
    age =0;
    if(type){
        age = 1;
    }
    {
      age = 10;
      {
        age = 100;
      }
    } 
    return age
}

由以上改造,就很好理解var声明后的变量,最后运行的结果为100。
而let命令,有块级作用域,一个{}一个区块,不同区块各自声明,不会覆盖;所以resultAge函数区块中用到的变量赋值结果是0,即最后返回的结果了。

示例三(经典)

var a=[];
for(var i=0;i<10;i++){
  a[i]=function(){
      console.log(i);
  };
}
a[6](); //10
var a=[];
for(let i=0;i<10;i++){
   a[i]=function(){
       console.log(i);
   };
}
a[6]();    //6

var声明的i在全局范围内有效,每次循环i会被替换值,代码执行到a6时,for循环已经结束,i的值是停止循环时的10,所以打印结果为10;
let声明的i,块级作用域下的i每次for出来的就相当于示例二中age:0,1,10,100;不会有覆盖,相互不干扰。所以执行到a6时,i的指向即for循环在6这个值,打印结果为6。