ES6中var、let、const、塊級作用域以及暫存死區(qū)是什么-創(chuàng)新互聯(lián)

這篇文章將為大家詳細講解有關ES6中var、let、const、塊級作用域以及暫存死區(qū)是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

我們提供的服務有：做網(wǎng)站、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、鼎城ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的鼎城網(wǎng)站制作公司var

語法

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

使用

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

var變量提升

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

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翻譯一下代碼發(fā)現(xiàn)，只是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的作用域是函數(shù)級的，由此帶來的幾個臭名昭著的問題：

意外被修改的值

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循環(huán)和點擊事件

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.，雖然可以使用閉包解決，但是現(xiàn)在有了更好的方案

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);
}

作用域規(guī)則很簡單

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

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

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

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

暫存死區(qū)-Temporal Dead Zone-TDZ

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

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

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

關于ES6中var、let、const、塊級作用域以及暫存死區(qū)是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

名稱欄目：ES6中var、let、const、塊級作用域以及暫存死區(qū)是什么-創(chuàng)新互聯(lián)
當前路徑：http://bm7419.com/article6/dicsog.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、自適應網(wǎng)站、網(wǎng)站建設、網(wǎng)站策劃、響應式網(wǎng)站、移動網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)