只給你5分鐘，掌握var，let和const異同

lookSomeone 發(fā)布于2019-08-23 12:03 / 1949人閱讀

摘要：用聲明的變量，其可用范圍在當前執(zhí)行上下文。在函數外聲明的變量，其作用范圍是全局。拋出語法錯誤錯誤信息未捕獲的異常標識符已經被聲明過。例如輸出照例，命名規(guī)范指出我們應該用大寫字母聲明常量。為了讓代碼長期可維護，命名規(guī)范還是值得遵守的。

轉載請注明出處：葡萄城官網，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務，賦能開發(fā)者。
原文出處：https://dzone.com/articles/ja...

這個話題對于一些老鳥來說可能根本算不上疑問，但對于新手來說也許除了最常見的var之外，let和const較少使用的機會。

所以在本文中，我將會通過一些例子來為大家介紹如何在Javascript中靈活使用var、let和const這些關鍵字來定義變量，以及這些關鍵字它們之間有什么異同。

如果你懶得看下面的代碼，那我可以先把概念結論說出：

var定義的變量可被更改，如果不初始化而直接使用也不會報錯

let定義的變量和var類似，但作用域在當前聲明的范圍內

const定義的變量只可初始化一次且作用域內不可被更改，使用前必須初始化

下面我將通過示例的形式來詳細為大家介紹它們三者之間的異同：

Var

var用以聲明一個變量，并且同時我們可以在聲明語句中初始化所聲明的變量。

例如：

var a = 10;

變量的聲明，會在代碼被執(zhí)行之前被處理。

用var聲明的JavaScript變量，其可用范圍在當前執(zhí)行上下文。

在函數外聲明的JavaScript變量，其作用范圍是全局。

考慮以下代碼片段：

function nodeSimplified() {
  var a =10;
  console.log(a);  // 輸出 10
  if(true) {
   var a=20;
   console.log(a); // 輸出 20
  }
  console.log(a);  // 輸出 20
}

在上面的代碼中，你可以發(fā)現，當變量a在if代碼段里被更新時，它的值被全局更新了，因此在經過了if代碼后，被更新的值仍然被保留著。這與其他語言中的全局變量有點類似。但是，在使用這個功能時要非常小心，因為它有可能會覆蓋一個已有的值。

let

let語句在一個塊級范圍里聲明一個局部變量。和var類似，我們可以在聲明時初始化它的值。

例如：

let a = 10;

這個語句允許你創(chuàng)建一個變量，使它的作用范圍被限制在它所在的代碼塊。
它和Java、C#等其他語言的變量類似。
考慮下面的代碼片段：

function nodeSimplified() {
  let a =10;
  console.log(a);  // output 10
  if(true) {
   let a=20;
   console.log(a); // output 20
  }
  console.log(a);  // output 10
}

它和大多數語言中我們所見的表現行為是一致的。

function nodeSimplified() {
  let a =10;
  let a =20; // 拋出語法錯誤
  console.log(a); 
}

錯誤信息:"未捕獲的異常:標識符"a"已經被聲明過。" 但如果使用var就沒事：

function nodeSimplified() { 
  var a =10;   
  var a =20;   
  console.log(a);  // 輸出 20 
}

使用let語句，可以很好的維護變量的作用范圍。當使用內部函數時，let語句讓你的代碼更整潔。

我希望上面的例子能幫你更好地理解var和 let。如果有任何疑問，請在評論區(qū)留言。

const

const語言中的變量只能被賦值一次，然后就不能在被賦值。const語句的作用范圍和let語句一樣。

例如：

const a = 10;
function nodeSimplified() {
  const MY_VARIABLE =10;
  console.log(MY_VARIABLE);  // 輸出 10 
}

照例，命名規(guī)范指出我們應該用大寫字母聲明常量。當然，const a = 10 在上面的代碼中會的起到相同的作用。為了讓代碼長期可維護，命名規(guī)范還是值得遵守的。

問題:如果給一個const變量重新賦值會發(fā)生什么？考慮下面的代碼：

function nodeSimplified() {
  const MY_VARIABLE =10;
  console.log(MY_VARIABLE);  // 輸出 10
  MY_VARIABLE =20;           // 拋出類型錯誤
  console.log(MY_VARIABLE); 
}

錯誤信息:"未捕獲的類型錯誤:給const變量賦值"。

當我們嘗試給已有的const變量賦值時，這段代碼會拋出一個錯誤。

介紹就到此結束，希望這篇短小精悍的文章能夠幫助到各位更好的理解在Javascript中聲明變量時使用不同關鍵字上到底有何異同。

本文是由葡萄城技術開發(fā)團隊發(fā)布，轉載請注明出處：葡萄城官網

了解更多

靈活高效的前端開發(fā)工具包，可快速搭建企業(yè) Web 應用程序

可嵌入您系統(tǒng)的在線 Excel，SpreadJS純前端表格控件

云服務器 GPU云服務器每隔5分鐘 5分鐘打造webrtc 每天5分鐘玩轉kubernetes 給你個

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/97912.html

30分鐘掌握ES6/ES2015核心內容（上）

摘要：以下簡稱是語言的下一代標準。的繼承機制，實質是先創(chuàng)造父類的實例對象所以必須先調用方法，然后再用子類的構造函數修改?？偨Y以上就是最常用的一些語法，可以說這的語法，在的日常使用中占了追加十分鐘好的嗎分鐘掌握核心內容下 ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標準。因為當前版本的ES6是在2015年發(fā)布的，所以又稱ECMAScript 2015。也就是說...

YPHP 2019-08-19 17:30 評論0 收藏0
對比let、const、var的異同

摘要：和的區(qū)別作用域是函數體的全部聲明變量提升循環(huán)內變量過度共享循環(huán)本身及三次回調均共享唯一的變量。 let、const和var的區(qū)別 var : 作用域是函數體的全部,聲明變量提升 console.log(num);//undefined var num = 2 //循環(huán)內變量過度共享 for (var i = 0; i < 4; i++) { alert(i);...

Andrman 2019-08-23 12:03 評論0 收藏0
5 分鐘即可掌握的 JavaScript 裝飾者模式與 AOP

摘要：下裝飾者的實現了解了裝飾者模式和的概念之后，我們寫一段能夠兼容的代碼來實現裝飾者模式原函數拍照片定義函數裝飾函數加濾鏡用裝飾函數裝飾原函數這樣我們就實現了抽離拍照與濾鏡邏輯，如果以后需要自動上傳功能，也可以通過函數來添加。 showImg(https://segmentfault.com/img/bVbueyz?w=852&h=356); 什么是裝飾者模式當我們拍了一張照片準備發(fā)朋友...

chunquedong 2019-08-23 18:16 評論0 收藏0
30分鐘掌握ES6/ES2015核心內容

摘要：以下簡稱是語言的下一代標準。因為當前版本的是在年發(fā)布的，所以又稱。用它所聲明的變量，只在命令所在的代碼塊內有效。的繼承機制，實質是先創(chuàng)造父類的實例對象所以必須先調用方法，然后再用子類的構造函數修改。 ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標準。因為當前版本的ES6是在2015年發(fā)布的，所以又稱ECMAScript 2015。也就是說，ES6就是E...

LucasTwilight 2019-08-20 17:03 評論0 收藏0
[原創(chuàng)][連載]nim與python的異同3

摘要：變量常量綁定無特定關鍵字直接設值將一個文字列放到名為的變量里的類型由文字列上面定義的正則表達式變成了整數這里就帶來一個在大工程里很容易帶來困擾的問題理解代碼不得不受制于類型極易變的變量要理解代碼所必需的工作量極大可變變量前綴將變量與變量(常量)綁定 python無特定關鍵字,直接設值a = r^s*(d{4}-d{2}-d{2})s{1,2}(.+)$ # 將一個文字列放到名為a的...

GraphQuery 2019-07-31 11:13 評論0 收藏0