ES6中var、let、const、區塊級作用域以及暫存死區的介紹

這篇文章帶給大家的內容是關於ES6中var、let、const、塊級作用域以及暫存死區的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

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

 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]

 區塊層級作用域

區塊級作用域是隨著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);
}

作用域規則很簡單

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

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

for循環中以let##」宣告一個初始因子，該因子在每個循環內都是一個新的作用域<pre class="brush:php;toolbar:false">for (let i = 0; i &lt; 10; i++) {   console.log(i); } console.log(i) // Uncaught ReferenceError: i is not defined</pre>

switch

只有一個作用域<pre class="brush:php;toolbar:false">switch (x) {   case 0:     let foo;     break;        case 1:     let foo;      break; } // Uncaught SyntaxError: Identifier 'foo' has already been declared</pre>暫存死區-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轉義之後可能不存在暫存死區

以上是ES6中var、let、const、區塊級作用域以及暫存死區的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！