js中let和var定义变量，以及不定义直接使用变量的区别

js中let和var定义变量的区别

详细信息参见一砂世界的文章：http://blog.csdn.net/nfer_zhuang/article/details/48781671
详细信息参见annier_11的文章：https://blog.csdn.net/annier_11/article/details/82620276

1 声明后未赋值，表现相同

(function() {
      var varTest;
      let letTest;
      console.log(varTest); //输出undefined
      console.log(letTest); //输出undefined
    }());

2 使用未声明的变量，表现不同:

(function() {
  console.log(varTest); //输出undefined(注意要注释掉下面一行才能运i行)
  console.log(letTest); //IE报错：ReferenceError: letTest is not defined
                        //firefox报错：ReferenceError: can't access lexical declaration `hello' before initialization

  var varTest = 'test var OK.';
  let letTest = 'test let OK.';
}());

3 重复声明同一个变量时，表现不同：

(function() {
      "use strict";
      var varTest = 'test var OK.';
      let letTest = 'test let OK.';

      var varTest = 'varTest changed.';
      let letTest = 'letTest changed.'; //直接报错：SyntaxError: Identifier 'letTest' has already been declared

      console.log(varTest); //输出varTest changed.(注意要注释掉上面letTest变量的重复声明才能运行)
      console.log(letTest);
    }());

4 变量作用范围，表现不同：

(function() {
  var varTest = 'test var OK.';
  let letTest = 'test let OK.';

  {
    var varTest = 'varTest changed.';
    let letTest = 'letTest changed.';
    console.log(varTest);   // 输出varTest changed.
    console.log(letTest);   // 输出letTest changed.
  }

  console.log(varTest); //输出"varTest changed."，内部"{}"中声明的varTest变量覆盖外部的letTest声明
  console.log(letTest); //输出"test let OK."，内部"{}"中声明的letTest和外部的letTest不是同一个变量
}());

5 对let块级作用域的使用：

5.1 使用var来定义循环控制变量

var oLi =document.getElementById('test').getElementsByTagName('li');
for(var i = 0; i < oLi.length; i++) {            
    oLi[i].onclick =function(event) {
        console.log(i);
    }
}

如果使用var来定义循环控制变量, 那么在点击时输出的结果将会是相同的，都是li的个数。

5.2 使用let

var oLi =document.getElementById('test').getElementsByTagName('li');
for(let i = 0; i < oLi.length; i++) {            
    oLi[i].onclick =function(event) {
        console.log(i);
    }
}

如果使用let，那么最终输出的结果将会是正确的。

这是为什么呢？
因为var声明的i对应的是全局变量，也就是说i是在循环之外存在的。所以每次点击都对应同一个i，而i是全局的，所以在循环结束后，i的值就已经确定了，因此每次点击出来的都是一样的。
但是如果使用了let，那么使用的将是块级作用域，也就是说，每个点击事件都会进入一个不同的块，所以每个点击都会输出正确的序号。

6 有var定义和无定义的区别

有var定义的变量，会将变量的范围限定在var所在的范围。没有var定义的变量，会成为全局变量。

6.1 有var定义的情况。

!function(){
        var counter=1;
        counter ++;

        console.log(counter);   // 输出：2
        counter ++;
}();
console.log(counter);  // 输出： ReferenceError: counter is not defined

6.2 无定义的情况。

!function(){
        counter=1;
        counter ++;

        console.log(counter);  // 输出：2
        counter ++;
}();
console.log(counter);  // 输出：3

上面两个例子说明，js中，变量是否声明，是用var，还是let声明，都是有区别的。只有充分掌握其特性，才能在用到时信手拈来。