let語句

junbaor 發布于2019-08-21 11:43 / 2277人閱讀

摘要：用法描述語句允許申明一個作用域被限制在代碼塊內的變量語句或表達式。淺析之所以報錯是因為所申明的變量只在語句所在代碼塊內有效和對比作用域上面這段代碼可以看到，的作用域是語句所在代碼塊或者其子塊，而的作用域則是整個封閉函數。

用法

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語句;

GPU云服務器云服務器 Lets Let js 中 let let新語法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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