详解ES6之用let声明变量以及let loop机制

在上一篇对js闭包的理解那篇文章中，我提到过ES6之前，JavaScript这门语言没有块级作用域，但是在ES6中，加入了let命令,用let声明的变量仅仅可以在其所在的块级作用域中使用。

相比用var声明，let声明的特点

1.let声明的变量仅在该变量所在的作用域有效

for(let i=0;i<5;i++){} console.log(i); //报错
for(var i=0;i<5;i++){} console.log(i); //i=5;

2.不存在变量提升

先解释下变量提升：变量提升就是变量声明语句都会被提到所在作用域开始处，就是经过变量提升后，代码的实际执行顺序会与你所写的顺序不同。

console.log(i);
var i=2;

因为变量提升，所以上述代码不会报错，只会输出undefined。

但是要注意：变量提升只是提升声明语句，而不提升赋值语句

所以上述语句经过提升之后，实际的代码执行顺序是

var i;
console.log(i);
i=2;

再来看道经典试题

var name = 'World!';
(function () {
if (typeof name === 'undefined') {
  var name = 'Jack';
  console.log('Goodbye ' + name);
}else{
  console.log('Hello ' + name);
}
})();

请问最终console的结果是什么？

如果对变量提升一无所知，会很容易的得出hello world的结果。

我对变量提升略知一二，得出的结果是hello Jack.

但是正确结果是Goodbye Jack. 做错的原因就是我没有注意到变量提升仅仅是声明提升。

3.不可以在同一作用域内重复声明

function temp(){
   let a;
   let b;
} //报错

4.暂时性死区

var tmp="123";
if(true){
 tmp="abc";
 let tmp;
}

定义(出自ES6标准入门一书):在代码块内，使用let变量声明之前，该变量是不可以用的。这在语法上称为暂时性死区。

但是如果去掉上述let tmp;这句，代码是不会错的，只是这时的tmp即外部的全局变量，但是你如果要声明一个与外部变量同名的局部变量，那么你就要放在这个同名变量使用之前，否则就会报错。

说一说(let i=0;i<5;i++)的运行机制

不好意思，我们还得拿闭包来说事。

var a=[];
for(var i=0;i<5;i++){
  a[i]=function(){
    console.log(i);
  }
}

然后，结果i并非我们想象得那样，按照0，1，2...的顺序打印，而都是打印5，在上一篇文章理解js闭包中，我们已经知道如何用闭包解决这个问题。但是呢，这还有一种更简单的解法，如下

for(let i=0;i<5;i++){
   a[i]=function(){
     console.log(i);
   }
}

对，就是这么简单，用一个let代替var,就搞定了。但是为什么呢？说实话，闭包我能想得通，但是用let真心想不通为什么可以解决这个问题。问过一些人，但是他们只是很糊弄得说，let是块级作用域。我觉得他们压根就没有搞懂，我觉得这里绝对有蹊跷，仅仅凭let是块级作用域并不能解释的通，一定有其他机制。

我的疑惑：就算let是块级作用域，可是在函数里，我们没有定义新的i,所以你访问i,其实都在访问父级作用域，对 let i=0;使得i只能在for循环的{}内使用，但是当你调用ai的时候，不管i是多少，它们都应该是访问的是同一个i,怎么会出现0，1，2，3，4呢？
百度一下，果然不出我所料，阮一峰大神给出的解释是，对每一次循环，都是产生不同的i,所以5次循环，产生了5个块级作用域，而不同的块级作用域间实现i++是通过js引擎记住上一个i值实现的。这样一来，ai调用时，就会访问到与自己对应的i,而不是同一个i.

所以，let可以得到闭包的效果是因为let具有块级作用域，与let loop特殊的机制。

起初，我对这个结果不太相信，因为和直觉不太相符，感觉5次循环，产生5个i,和自己以前的认知不大相同啊。然后我有有了新的发现

第一个发现：

for(let i=0;i<5;i++){
   let i="abc";
   console.log(i);
}

我吃惊的是竟然没有报错！说好的let不可以重复声明呢？这充分证明了let i=0;与let i="abc"不在同一个作用域。

第二个发现：可以通过babel将ES6代码转为ES5，看看上述代码是如何实现的?

先创建一个loop函数，最终在循环的时候调用loop函数并将i作为参数传入，这样便会形成5个不同的副本。这也证明了用let代替闭包，关键是形成了5个不同的块级作用域。

最后，ES6只是一种规范，比如说let的规范，但实现该规范的是JS引擎，如babel对上述代码的转换便体现出了babel对let loop的实现。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 深入浅出ES6之let和const命令

    let和const声明的变量只在代码块内有效 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 不存在变量提升 变量一定要在声明后使用,否则报错 var tmp = 123; if (true) { tmp = 'abc'; // ReferenceError let tmp; } 不允许重复声明 // 报错 function () { let a = 10; var a = 1; } 块级作用域 f

  • JS变量中有var定义和无var定义的区别以及es6中let命令和const命令

    JS变量中有var定义和无var定义的区别以及es6中let命令和const命令

    之前我们在写js代码的时候都知道可以用var定义全局变量和局部变量,也可以省略var,而且在非严格模式下不会报错,但是并不知道两者的区别... var x = 1; y = 4; console.log(x);//1 console.log(y);//4 console.log(window.x);//1 console.log(window.y);//4 简单测试下可以知道定义的x和y都被挂载在window对象上,变为window下的属性,这并不能说明什么... delete x; delet

  • ES6入门教程之let和const命令详解

    前言 在javascript中,我们都知道使用var来声明变量.javascript是函数级作用域,函数内可以访问函数外的变量,函数外不能访问函数内的变量. 函数级作用域会导致一些问题就是某些代码块内的变量会在全局范围内有效,这我们是非常熟悉的: for (var i = 0; i < 10; i++) { console.log(i); // 0,1,2...,9 } console.log(i); //10 if(true){ var s = 20; } console.log(s); //

  • javascript ES6 新增了let命令使用介绍

    let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 上面代码在代码块之中,分别用let和var声明了两个变量.然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值.这表明,let声明的变量只在它所在的代码块有效. for循环的计数器,

  • JavaScript ES6中const、let与var的对比详解

    ECMAScript 6 新增 const 和 let 命令,用来声明变量. 声明方式 变量提升 作用域 初始值 重复定义 const 否 块级 需要 不允许 let 否 块级 不需要 不允许 var 是 函数级 不需要 允许 变量提升:const 和 let 必须先声明再使用,不支持变量提升 console.log(c1, l1, v1); // 报错 // Uncaught ReferenceError: c1 is not defined const c1 = 'c1'; let l1 =

  • ES6使用let命令更简单的实现块级作用域实例分析

    本文实例讲述了ES6使用let命令更简单的实现块级作用域.分享给大家供大家参考,具体如下: let 带来了更简单的块级作用域 1. ES6新增了let命令,用于声明变量.其与var的不同在于,用let声明的变量只在 { } 内有效.这使得我们可以很方便的实现块级作用域,不再使用立即实行函数. { let a=1; var b=2; } console.log(a); //undefined console.log(b); //2 在for循环中使用let可以有效避免全局变量污染. 2. let不

  • ES6新特性一： let和const命令详解

    本文实例讲述了ES6新特性中的let和const命令.分享给大家供大家参考,具体如下: 1. let 命令 ① 在js中是没有块级作用域的,var 声明的变量作用域是整个函数体,而let可以起到这一作用 { let a = 1; var b = 2; } console.log(b); // 2 console.log(a); // a is not defind ② 而let可以起到这一作用啊在js中变量和函数的声明会提升到当前作用域最顶部执行.这样就会出现问题. var a = []; //

  • ES6深入理解之“let”能替代”var“吗?

    前言 我已经使用ES2015(ES6)的语法编写JavaScript程序很久了,并且喜欢上它提供的新特性带来的优雅和简洁.我最习惯的就是不再使用var,而是let/const.我想当然的以为let仅仅是var的替代者,而事实上let还为我们提供了更加精细的作用域. 我大多数时候使用的变量都是用const来声明,因为如果尝试对使用const声明的变量进行修改,将会报错.这可以避免不小心将一个不该修改的常量值修改.但是,我们还是需要可以声明可以被修改的变量,比如在循环里面的计数器,我们需要不断地对改

  • 详解ES6中的let命令

    let是ES6里面新的复制命令,let赋值命令只可以在{}代码块中被调用.下面通过实例给大家讲解es6中的let命令,具体内容如下所示: 1.let命令的用法和var命令类似,但let命令声明的变量只在let所在的代码块内有效 { let a=10; var b=1; } console.log(a);//Uncaught ReferenceError: a is not defined console.log(b); 2.let命令不存"声明提前"现象,因此变量一定要先声明,后使用

  • 详解ES6之用let声明变量以及let loop机制

    详解ES6之用let声明变量以及let loop机制

    在上一篇对js闭包的理解那篇文章中,我提到过ES6之前,JavaScript这门语言没有块级作用域,但是在ES6中,加入了let命令,用let声明的变量仅仅可以在其所在的块级作用域中使用. 相比用var声明,let声明的特点 1.let声明的变量仅在该变量所在的作用域有效 for(let i=0;i<5;i++){} console.log(i); //报错 for(var i=0;i<5;i++){} console.log(i); //i=5; 2.不存在变量提升 先解释下变量提升:变量提

  • 详解ES6实现类的私有变量的几种写法

    详解ES6实现类的私有变量的几种写法

    闭包实现类的私有变量方式 私有变量不共享 通过 new 关键字 person 的构造函数内部的 this 将会指向 Tom,开辟新空间,再次全部执行一遍, class Person{ constructor(name){ let _num = 100; this.name = name; this.getNum = function(){ return _num; } this.addNum = function(){ return ++_num } } } const tom = new Pe

  • 详解ES6语法之可迭代协议和迭代器协议

    ECMAScript 2015的几个补充,并不是新的内置或语法,而是协议.这些协议可以被任何遵循某些约定的对象来实现. 有两个协议:可迭代协议和迭代器协议. 可迭代协议 可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如(定义)在一个 for..of 结构中什么值可以被循环(得到).一些内置类型都是内置的可迭代对象并且有默认的迭代行为, 比如 Array or Map, 另一些类型则不是 (比如Object) . Iterator 接口的目的,就是为所有数据结构,提供了

  • 详解ES6 扩展运算符的使用与注意事项

    扩展运算符 spread syntax 又叫展开语法,写法是 ...,顾名思义,其实是用来展开字符串,数组和对象的一种语法,可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开:还可以在构造字面量对象时, 将对象表达式按 key-value 的方式展开.常用的语法如下: //函数调用: myFunction(...iterableObj); //字面量数组构造或字符串: [...iterableObj, '4', ...'hello', 6]; // 构造字面量对象时,进

  • 详解ES6 中的迭代器和生成器

    目录 1.迭代器 2.生成器 1.迭代器 Iterator是 ES6 引入的一种新的遍历机制.两个核心 迭代器是一个统一的接口,它的作用是使各种数据结构可以被便捷的访问,它是通过一个键为Symbol.iterator的方法来实现. 迭代器是用于遍历数据结构元素的指针(如数据库中的游标). // 使用迭代 // 1.使用Symbol.iterator创建一个迭代器 const items = ['one','a','b']; const it = items[Symbol.iterator]();

  • 详解 MAC/Linux Vi配置环境变量及Java环境变量配置

    详解 MAC/Linux Vi配置环境变量及Java环境变量配置 vi基础 1.vi的基本概念 (1)基本上vi可以分为三种状态,分别是命令模式(command mode).插入模式(Insert mode)和底行模式(last line mode),各模式的功能区分如下: 1) 命令行模式command mode) 控制屏幕光标的移动,字符.字或行的删除,移动复制某区段及进入Insert mode下,或者到 last line mode. 2) 插入模式(Insert mode) 只有在Ins

  • 详解ES6 CLASS在微信小程序中的应用实例

    ES6 CLASS基本用法 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } 1.1 constructor方法 constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法.一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加.

  • 详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()

    当有人问到用来确定一个字符串是否包含在另一个字符串中有哪些方法时,我们会不假思索回答道:indexOf方法.其实,ES6 又提供了三种新方法includes().startsWith().endsWith(),也是比较好用的. indexOf方法在这里就不多说了,大家都比较熟悉,意思就是:返回给定元素在数组中第一次出现的位置,返回结果是匹配开始的位置,如果没有出现则返回-1. 下面详细介绍ES6新增的这三种方法: ①includes():返回布尔值,表示是否找到了参数字符串. 如下所示: let

  • JVM详解之汇编角度理解本地变量的生命周期

    简介 java方法中定义的变量,它的生命周期是什么样的呢?是不是一定要等到方法结束,这个创建的对象才会被回收呢? 带着这个问题我们来看一下今天的这篇文章. 本地变量的生命周期 在类中,变量类型有类变量,成员变量和本地变量. 本地变量指的是定义在方法中的变量,如果我们在方法中定义了一个变量,那么这个变量的生命周期是怎么样的呢? 举个例子: public void test(){ Object object = new Object(); doSomeThingElse(){ ... } } 在上面

  • 详解ES6中class的实现原理

    一.在ES6以前实现类和继承 实现类的代码如下: function Person(name, age) { this.name = name; this.age = age; } Person.prototype.speakSomething = function () { console.log("I can speek chinese"); }; 实现继承的代码如下:一般使用原型链继承和call继承混合的形式 function Person(name) { this.name =

随机推荐