let语句

junbaor 发布于2019-08-21 11:43 / 2123人阅读

摘要：用法描述语句允许申明一个作用域被限制在代码块内的变量语句或表达式。浅析之所以报错是因为所申明的变量只在语句所在代码块内有效和对比作用域上面这段代码可以看到，的作用域是语句所在代码块或者其子块，而的作用域则是整个封闭函数。

用法

let myName = "luoxue";
let age = 25;

描述

let 语句允许申明一个作用域被限制在代码块内的变量、语句或表达式。

浅析

{
  let myName = "luoxue";
}
console.log(myName); // myName is not defined

之所以报错 ,是因为 let 所申明的变量只在 let 语句所在代码块内有效；

和 var 对比

1、作用域

{
  let myName = "luoxue";
  var age = 25;
  console.log(myName); // luoxue
}
console.log(myName); // myName is not defined
console.log(age); // 25

上面这段代码可以看到，let 的作用域是 let 语句所在代码块或者其子块，而 var 的作用域则是整个封闭函数。

2、let 不存在变量提升

console.log(color); // color is not defined
let color = "orange";

console.log(colors); // undefined
var colors = "yellow";

3、暂时性死区

只要块级作用域内存在 let 语句，它所申明的变量就“绑定”这个区域，不受外部的影响，如下：

var love = "kk";
if(true) {
  love = "kkk"; // love is not defined
  let love = "k";
}

注：ES6明确规定，如果区块内存在 let const 语句，则这个区块对这些语句申明的变量从一开始就形成封闭作用域，只要在申明之前实用，就会报错，如下也会报错：

{
  title = "Love you"; // title is not defined
  console.log(title); // title is not defined
  
  let title;
  console.log(title); // undefined

  title = "Love kk";
  console.log(title); // Love kk
}

暂时性死区的本质：只要一进入当前作用域，所要实用的变量就已经存在，但是不可获取，只有出现申明变量的那行代码之后，才可以获取和实用该变量。

4、不允许重复申明

{
  let yourName = "kk"; // Identifier "yourName" has already been declared
  let yourName = "k";
}

下面的代码书写方式是不允许的：

let fn = (arg) => let arg = 25; // Unexpected identifier

运用

有一道题目如下，说明为什么 a[3]() 的结果是5，如何实现 a[3]() 的结果是3？

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

这里的 i 是用的 var 申明的，那么 i 的作用域则是全局，当用 a[3]() 调用时 i 的值随着循环的结束已经变为5，所以 arr[3]() 的值是5，可以使用 let 语句来重构一下，如下：

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

因为在 for 语句里面用 let 定义的 i 的作用域是 for 语句里面的代码块，所以每次循环的 i都是一个新的变量，都互不干扰，最后执行结果也就是对应的3，当然，这里也可以实用闭包的方式来实现，代码如下：

// 闭包的实现方式
var arr2 = [];
for(var i = 0; i < 5; i++) {
    arr2[i] =(function(e) {
        return function() {
            console.log(e);
        }
    })(i);
}
arr2[3]();

示例

参考：
阮一峰老师的《es6入门标准》第二章第一小节（实体书）；
MDN let语句;

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87035.html

JS变量生命周期:为什么 let 没有被提升

摘要：请注意，就变量生命周期而言，声明阶段与变量声明是不同的概念。提升在生命周期中无效的原因如上所述，提升是变量在作用域顶部的耦合声明和初始化阶段。然而，生命周期分离声明和初始化阶段。解耦消除了的提升期限。为了保证的可读性，本文采用意译而非直译。提升是将变量或函数定义移动到作用域头部的过程，通常是 var 声明的变量和函数声明function fun() {...}。当 ES6 引入l...

hoohack 2019-08-26 10:11 评论0 收藏0
JS变量生命周期:为什么 let 没有被提升

摘要：请注意，就变量生命周期而言，声明阶段与变量声明是不同的概念。提升在生命周期中无效的原因如上所述，提升是变量在作用域顶部的耦合声明和初始化阶段。然而，生命周期分离声明和初始化阶段。解耦消除了的提升期限。为了保证的可读性，本文采用意译而非直译。提升是将变量或函数定义移动到作用域头部的过程，通常是 var 声明的变量和函数声明function fun() {...}。当 ES6 引入l...

Steven 2019-08-16 18:37 评论0 收藏0
你真的懂switch吗？聊聊switch语句中的块级作用域

摘要：最近在代码中不小心不规范的，在里面定义了块级变量，导致页面在某些浏览器中出错，本文讨论以下语句中的块级作用域。而与无关每一个并不会构成一个独立的块级作用域。最近在代码中不小心不规范的，在switch里面定义了块级变量，导致页面在某些浏览器中出错，本文讨论以下switch语句中的块级作用域。 switch语句中的块级作用域 switch语句中的块级作用域可能存在的问题规范和检...

zone 2019-08-23 15:32 评论0 收藏0
你真的懂switch吗？聊聊switch语句中的块级作用域

摘要：最近在代码中不小心不规范的，在里面定义了块级变量，导致页面在某些浏览器中出错，本文讨论以下语句中的块级作用域。而与无关每一个并不会构成一个独立的块级作用域。最近在代码中不小心不规范的，在switch里面定义了块级变量，导致页面在某些浏览器中出错，本文讨论以下switch语句中的块级作用域。 switch语句中的块级作用域 switch语句中的块级作用域可能存在的问题规范和检...

pkwenda 2019-08-02 14:23 评论0 收藏0
你真的懂switch吗？聊聊switch语句中的块级作用域

摘要：最近在代码中不小心不规范的，在里面定义了块级变量，导致页面在某些浏览器中出错，本文讨论以下语句中的块级作用域。而与无关每一个并不会构成一个独立的块级作用域。最近在代码中不小心不规范的，在switch里面定义了块级变量，导致页面在某些浏览器中出错，本文讨论以下switch语句中的块级作用域。 switch语句中的块级作用域 switch语句中的块级作用域可能存在的问题规范和检...

dingding199389 2019-08-05 18:11 评论0 收藏0