es6基礎0x002：var、let、const、塊級作用域、暫存死區

scola666 發布于2019-08-23 12:53 / 1012人閱讀

摘要：但是如果使用，作用域塊級作用域內，在還沒使用聲明一個變量的時候，訪問該變量，將會獲得，從作用域開始到語句之間，就是暫存死區。

0x001 var

語法

var varname1 [= value1 [, varname2 [, varname3 ... [, varnameN]]]];

使用

var a, b=2 // 聲明多個變量，可以賦值，也可以不賦值
a=1 // 先聲明，再賦值

var變量提升
使用var聲明的變量將會被提升到函數的頂部

console.log(a) // undefined
var a =2  
console.log(a) // 2
console.log(b) //Uncaught ReferenceError: b is not defined...

以上代碼相當于

var a
console.log(a) // undefined
a=2
console.log(a) // 2
console.log(b) //Uncaught ReferenceError: b is not defined...

0x002 let

語法

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

使用

let a, b = 2 // 聲明多個變量，賦值不賦值無所謂
a = 2 // 聲明之后再賦值

不再提升

console.log(a) // Uncaught ReferenceError: a is not defined...
let a=1

注意：猜測，使用babel翻譯一下代碼發現，只是let變成了var，所以使用babel轉義之后的代碼依舊會提升

不能重復聲明

let a=1
let a=2 // Uncaught SyntaxError: Identifier "a" has already been declared

0x003 const

語言

const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];

使用

const a=1, b=2 // 不能省略的值

不能省略的值

const c // Uncaught SyntaxError: Missing initializer in const declaration

不能重復賦值

const d=4
d=5 // Uncaught TypeError: Assignment to constant variable.

可以修改的引用

const e=[]
e[0]=0
console.log(e) //[0]

0x004 塊級作用域

塊級作用域是隨著let、const而來最有用的特性了，在之前的js中，js的作用域是函數級的，由此帶來的幾個臭名昭著的問題：

意外被修改的值

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 同樣的變量!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

可以使用let避免了

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 不同的變量
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

萬惡的for循環和點擊事件

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

for (var i = 0; i < 5; i++) {
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));

  item.onclick = function (ev) {
    console.log("Item " +i + " is clicked.");
  };
  list.appendChild(item);
}
console.log(i) // 5

如果點擊上面，不管點擊哪個，顯示出來的都是Item 5 is clicked.，雖然可以使用閉包解決，但是現在有了更好的方案

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

for (let i = 0; i < 5; i++) {
  let item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));

  item.onclick = function (ev) {
    console.log("Item " +i + " is clicked.");
  };
  list.appendChild(item);
}

0x005 作用域規則很簡單

{}塊內形成一個作用域，包括if、else、while、class、do...while、{}、function

{
    const f=6
}
console.log(f) // Uncaught ReferenceError: f is not defined

for循環中用let聲明一個初始因子，該因子在每個循環內都是一個新的作用域

for (let i = 0; i < 10; i++) {
  console.log(i);
}
console.log(i) // Uncaught ReferenceError: i is not defined

switch只有一個作用域

switch (x) {
  case 0:
    let foo;
    break;
    
  case 1:
    let foo; 
    break;
}
// Uncaught SyntaxError: Identifier "foo" has already been declared

0x006 暫存死區-Temporal Dead Zone-TDZ

隨著let和const的引入，也引入了暫存死區的概念。使用var的時候，作用域內（函數作用域），在還沒使用var聲明一個變量的時候，訪問該變量，將會獲得undefined。但是如果使用let，作用域（塊級作用域）內，在還沒使用let聲明一個變量的時候，訪問該變量，將會獲得ReferenceError，從作用域開始到let語句之間，就是暫存死區。

{
 console.log(a) // Uncaught ReferenceError: a is not defined
 console.log(b) // Uncaught ReferenceError: b is not defined
 console.log(c) // undefined
 // 暫存死區
 let a =1
 const b=2
 var c=3
}

注意：猜測，使用babel翻譯一下代碼發現，只是let變成了var，所以使用babel轉義之后可能不存在暫存死區

0x007 總結

盡量使用let和const，如果希望改變該變量的值，則使用let，如果希望不再改變該變量的值或者引用，則使用const，讓var成為歷史。

GPU云服務器云服務器作用域中作用域作用域規則作用域實例

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99070.html

javascript基礎var、 let、const

摘要：全局作用域在最頂層聲明的變量成為全局變量，全局變量擁有全局作用域，它們在程序的任何地方都是能夠被訪問到。作用域的主要作用是能夠控制變量是使用范圍。程序將會被中斷，這個特性被稱為暫存死區。 1. 變量聲明、初始化 Javascript中使用一個變量之前需要先聲明，我們可以使用var、let、const來聲明一個變量。如果在給聲明的變量指定初始值，就是初始化。如: var a = 1; ...

lindroid 2019-08-22 14:59 評論0 收藏0
ES6簡單了解

摘要：報錯塊級作用域明確允許在塊級作用域中聲明函數。但其值是固定的，不可更改，只讀。一旦聲明變量，就必須立即初始化，不能留到以后賦值。調用函數會返回一個內部指針，執行它不會返回結果返回的是指針對象。 ES6初步學習 let和const let 用來聲明變量，但是所聲明的變量只在let命令所在的代碼塊內有效 let不像var那樣會發生變量提升，所以一定要先聲明后使用。 console.log...

K_B_Z 2019-08-20 15:08 評論0 收藏0
ES6語法詳解(一)

摘要：凍結對象可以使用方法。對象的解構賦值必須要屬性名相同，順序毫無影響。數組解構賦值默認值，當等號右邊的值時，默認值生效。 let變量 let聲明的變量在let命令所在的代碼塊中有效。不存在變量提升，只能先聲明后使用。暫存死區如果區塊中存在let和const命令，這個區塊對這些命令聲明的變量，從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量。 var a = 1; { ...

wendux 2019-08-26 11:53 評論0 收藏0
ES6新特性--var、let、const

摘要：不存在塊級作用域，具有變量提升機制。在同一作用域內只能聲明一次。注意其針對的是和所在的塊級作用域。在編程過程中如果需要變量提升則使用聲明變量，否則采用和聲明變量，以便更好地控制作用域，避免變量的混用不可控。 1、 var、let、const var不存在塊級作用域，具有變量提升機制。 let和const存在塊級作用域，不存在變量提升。在同一作用域內只能聲明一次。 ## var的說明 #...

qingshanli1988 2019-08-23 17:20 評論0 收藏0
ES6系列文章塊級作用域

摘要：聲明之函數作用域和全局作用域。塊級作用域不能重復聲明臨時性死區等特性用來解決變量存在的種種問題。塊級作用域終于在外面訪問不到了。一些常量聲明使用聲明的變量名全部大寫。 ES5之前javascript語言只有函數作用域和全局作用域，使用var來聲明變量，var聲明的變量還存在變量提升使人困惑不已。我們先來復習一下ES5的var聲明，再對比學習let和const 。 var var聲明之函...

趙連江 2019-08-21 16:53 評論0 收藏0