let和var关键字的区别

楼主^#

更多发布于：2017-10-18 22:19

关键词：
   let : 变量只能声明一次，let 允许把变量的作用域限制在块级域中
var : 变量可以多次声明

声明后未赋值，表现相同

'use strict';

(function() {
  var varTest;
  let letTest;
  console.log(varTest); //输出undefined
  console.log(letTest); //输出undefined
}());
使用未声明的变量，表现不同:

(function() {
  console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行)
  console.log(letTest); //直接报错：ReferenceError: letTest is not defined

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

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

'use strict';

(function() {
  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);
}());

变量作用范围，表现不同

'use strict';

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

  {
   var varTest = 'varTest changed.';
   let letTest = 'letTest changed.';
  }

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

而且，我们还有意外收获，看下面的一个例子

// var
   for(var i=0;i<5;i++){
   setTimeout(function(){
   console.log("var：" + i);
   })
   }
   // let
   for(let i=0;i<5;i++){
   setTimeout(function(){
   console.log("let" + i);
   })
   }

用var我们输出的所有值都是5，但是用let我们就可以依次输出0,1,2,3,4，因为let不可以重复声明变量

那用var怎么实现呢，我们采用闭包的方法:

for(var i=0;i<5;i++){
   (function(i){
   setTimeout(function(){
   console.log("var" + i);
   })
   })(i);
既然let 有了这个功能，那我们用for循环就简单多了，下面我写一个选项卡

   <button class="active">111</button>
   <button>222</button>
   <button>333</button>
   <div class="show">div1</div>
   <div>div2</div>
   <div>div3</div>

/* css代码 */
   div{
   display: none;
   background-color: #ccc;
   width: 200px;
   height: 200px;
   border: 1px solid #999;
   }
   .show{
   display: block;
   }
   .active{
   background-color: yellow;
   }

/*js代码*/
  var tabs = document.getElementsByTagName('button');
   var divs = document.getElementsByTagName('div');

  for(let i=0;i<tabs.length;i++){

   tabs.onclick = function(){
   for(var j=0;j<tabs.length;j++){
   divs[j].className = '';
   tabs[j].className = '';
   }
   this.className = 'active';
   divs.className = 'show';
   }
   }
对比传统方式的js代码
for(var i=0;i<tabs.length;i++){
   tabs.index = i;
   tabs.onclick = function(){
   for(var j=0;j<tabs.length;j++){
   divs[j].className = '';
   tabs[j].className = '';
   }
   console.log(this.index);
   divs[this.index].className = 'show';
   this.className = 'active';

   }
   }

引用：http://blog.csdn.net/nfer_zhuang/article/details/48781671
http://www.cnblogs.com/ccguangyao/p/6061649.html
http://www.jianshu.com/p/bf548e0ee60b

喜欢1

let和var关键字的区别

最新喜欢：