•   let与var

  在js中声明一个变量除了一个var 还有一个let的声明。对于var 在前面的作用域中已经讲过,这次主要说下二者的区别:

在MDN上有这样的一个demo:

var list = document.getElementById("list");

for (var i = 1; i <= 5; i++) {
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));
  let j = i;
  item.onclick = function (ev) {
    console.log("Item " + j + " is clicked.");
  };
  list.appendChild(item);
}

上面这段代码的意图是创建5个li,点击不同的li能够打印出当前li的序号。如果不用let,而改用var的话,将总是打印出 Item 5 is Clicked,因为 j 是函数级变量,5个内部函数都指向了同一个 j ,而 j 最后一次赋值是5。

对于上面的结果如果不使用let的话,也是有办法破的。方法就是用一个闭包把j的作用域给包起来。修改如下:

<script>
var list = document.getElementById("list");
for (var i = 1; i <= 5; i++) {
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));
  var j = i;
  item.onclick = (function(j){
    return function () {
    console.log("Item " + j + " is clicked.");
  }
})(j);
  list.appendChild(item);
}
</script>

上面的是采用的闭包的方式在绑定的时候已经把j的值已经传递给对应的click事件了,所以能够实现相同的结果。如此很是精妙!但是对于程序的易性来说是一个不小的考验。

下面开始说说let为什么能够实现如此的结果:

let 允许把变量的作用域限制在块级域中。与 var 不同处是:var 申明变量要么是全局的,要么是函数级的,而无法是块级的。再看几个官方的demo.

在程序或者函数的顶层,let 的表现就象 var 一样:

function varTest() {
  var x = 31;
  if (true) {
    var x = 71;  // same variable!
    console.log(x);
  }
  console.log(x);
}

function letTest() {
  let x = 31;
  if (true) {
    let x = 71;  // different variable
    console.log(x);
  }
  console.log(x);
}

上面的结果说明了let只在{}内使用。说到这里对开篇的那个问题就容易解释了。

用了let后,j 变成块级域(也就是花括号中的块,每进入一次花括号就生成了一个块级域),所以 5 个内部函数指向了不同的 j 。如果两个定义都在最外层则效果是一样,如下:

var x = 'global';
let y = 'global';
console.log(this.x);
console.log(this.y);
  • let 的暂存死区与错误

在同一个函数或同一个作用域中用let重复定义一个变量将引起 TypeError.

if (x) {
  let foo;
  let foo; // TypeError thrown.
}

然而,在变量声明之前引用这个变量会导致一个 ReferenceError的结果, 因为let变量 在"暂存死区" (从块的开始到声明这段).

function do_something() {
  console.log(foo); // ReferenceError
  let foo = 2;
}

在 switch 申明中你可能会遇到这样的错误,因为一个switch只有一个作用块.

switch (x) {
  case 0:
    let foo;
    break;

  case 1:
    let foo; // TypeError for redeclaration.
    break;
}

循环体中是可以引用在for申明时用let定义的变量,尽管let不是出现在大括号之间.

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

let提供了一种在块的范围内获取变量的值,而不会影响块外面名字相同的变量的值的方法。

var x = 5;
var y = 0;

let (x = x+10, y = 12) {
  console.log(x+y);
}

console.log(x + y); 

总结一下,对于let来说在某些地方确实有其长处的地方,同样也弥补了的js中块作用域的空白。

第28篇 js中let和var的更多相关文章

  1. JS中let和var的区别

    js中let和var定义变量的区别   let变量之前没见过,刚遇到,探探究竟. 以下转自:http://blog.csdn.net/nfer_zhuang/article/details/48781 ...

  2. js中 慎用for(var o in arrays) 遍历数组,for(var i,i< objects.length;i++)与for(var i,n = objects.length;i<n;i++) 的性能区别

    原文:js中 慎用for(var o in arrays) 遍历数组,for(var i,i< objects.length;i++)与for(var i,n = objects.length; ...

  3. JS中const、var 和let的区别

    今天第一次遇到const定义的变量,查阅了相关资料整理了这篇文章.主要内容是:js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 ...

  4. 第22篇 js中的this指针的用法

    前面把js的相关知识总结了下,今天把js中的上下文的this,对于强类型语言,this的用法非常的单一,因为他们没有js特有的动态绑定. 首先看下面代码: function funcA() { thi ...

  5. js中let和var的区别 不懂得加QQ 2270312758

    js中使用let定义变量的时候,是需要使用严格模式的,我看到网上有的博客说:如果在不使用严格模式的情况下,使用let会报错,但是在实验的过程中,我直接定义了let变量而且也没有使用严格模式,并没有报任 ...

  6. js中的let\var\const

    在JavaScript中有三种声明变量的方式:var.let.const.下文给大家介绍js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始 ...

  7. 如何HTML标签和JS中设置CSS3 var变量

    一.HTML标签中设置CSS变量 如下: <div style="--color: #cd0000;"> <img src="mm.jpg" ...

  8. 关于js中的for(var in)遍历属性报错问题

    之前遇到过这个问题,但是没找到问题的所在,将for(var i in  array){} 改成了for(var i ;i<array.length;i++)循环,但是今天又遇到了,mark一下错 ...

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

    let变量之前没见过,刚遇到,探探究竟. 以下转自:http://blog.csdn.net/nfer_zhuang/article/details/48781671 声明后未赋值,表现相同 (fun ...

随机推荐

  1. django的HTTPREQUEST对象

    Django使用request和response对象 当请求一张页面时,Django把请求的metadata数据包装成一个HttpRequest对象,然后Django加载合适的view方法,把这个Ht ...

  2. 如何使用php session

    学会php session可以在很多地方使用,比如做一个后台登录的功能,要让程序记住用户的session,其实很简单,看了下面的文章你就明白了.   PHP session用法其实很简单它可以把用户提 ...

  3. Android4.0新增的网格布局

    网格布局由GridLayout代表,它是Android 4.0新增的布局管理器,因此需要在Android 4.0 之后的版本中才能使用该布局管理器.如果希望在更早的Android平台上使用该布局管理器 ...

  4. SQL server 定时自动执行SQL存储过程

    当一个存储过程是为了生成报表,并且是周期性的,则不需要人工干预,由SQL作业定时自动执行些SQL存储过程即可. 本示例,假设已需要定时执行的存储过程为:Pr_test 工具/原料 SQL Server ...

  5. Javaweb阶段知识回顾一

    java基础增强 一.jdk1.5的新特性 自动封箱拆箱 封箱:Java自动将原始类型值转换成对应的对象,如将int的变量转换成Integer对象 拆箱:自动将对应的对象转换成原始类型值,将Integ ...

  6. Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

    由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...

  7. java实现解析二进制文件(字符串、图片)

    1.需求说明,实现细节要求: 解析二进制文件 files\case10\binary,其中包含一个字符串和一张图片,数据文件格式为字符串数据长度(2字节)+字符串内容+图片数据长度(4字节)+图片数据 ...

  8. 基于机器学习的web异常检测

    基于机器学习的web异常检测 Web防火墙是信息安全的第一道防线.随着网络技术的快速更新,新的黑客技术也层出不穷,为传统规则防火墙带来了挑战.传统web入侵检测技术通过维护规则集对入侵访问进行拦截.一 ...

  9. git命令实战之血泪记录

    注意: 本文章所写所有命令均在Git命令行窗口执行!非cmd窗口! 打开git命令行窗口步骤为:到项目根目录下执行bash命令行操作:右键点击Git Bash Here菜单,打开git命令窗口,不是c ...

  10. iOS8中 UITableView section 分区头部视图不显示

    最近自己使用了UITableView写了一个通讯录,但是在编写过程还算顺利,但是后来测试的时候,发现在iOS8中TableView的分区头不能正常显示,使用 - (NSString *)tableVi ...