雖然小編我主要工作時後端框架搭建,但空閒時候也經常搗鼓前端的東西,下面就分享一下入門基礎知識,老鳥略過,廢話也不多話,上代碼之前先上概念,先理論後再實踐是我一貫的學習之道。
var
var定義的變量可被更改,如果不初始化而直接使用也不會報錯
let
let定義的變量和var類似,但作用域在當前聲明的範圍內
const
const定義的變量只可初始化一次且作用域內不可被更改,使用前必須初始化
下面通過一些例子來爲大家介紹如何在Javascript中靈活使用var、let和const這些關鍵字來定義變量,以及這些關鍵字它們之間有什麼區別。
先來說一下var
var用以聲明一個變量,並且同時我們可以在聲明語句中初始化所聲明的變量。
例如:
var a = 10;
變量的聲明,會在代碼被執行之前被處理。
用var聲明的JavaScript變量,其可用範圍在當前執行上下文。
在函數外聲明的JavaScript變量,其作用範圍是全局。
考慮以下代碼片段:
function nodeSimplified() {
var a =10;
console.log(a); // 輸出 10
if(true) {
var a=20;
console.log(a); // 輸出 20
}
console.log(a); // 輸出 20
}
在上面的代碼中,你可以發現,當變量a在if代碼段裏被更新時,它的值被全局更新了,因此在經過了if代碼後,被更新的值仍然被保留着。這與其他語言中的全局變量有點類似。但是,在使用這個功能時要非常小心,因爲它有可能會覆蓋一個已有的值。
再來說一下let
let語句在一個塊級範圍裏聲明一個局部變量。和var類似,我們可以在聲明時初始化它的值。
例如:
let a = 10;
這個語句允許你創建一個變量,使它的作用範圍被限制在它所在的代碼塊。
它和Java、C#等其他語言的變量類似。
考慮下面的代碼片段:
function myFun() {
let a =10;
console.log(a); //輸出 10
if(true) {
let a=20;
console.log(a); //輸出 20
}
console.log(a); // 輸出 10
}
它和大多數語言中我們所見的表現行爲是一致的。
function myFun() {
let a =10;
let a =20; // 拋出語法錯誤
console.log(a);
}
錯誤信息:"未捕獲的異常:標識符'a'已經被聲明過。",這個C#這類後端編程方式非常類似。
但如果使用var就沒事:
function myFun() {
var a =10;
var a =20;
console.log(a); // 輸出 20
}
使用let語句,可以很好的維護變量的作用範圍。當使用內部函數時,let語句讓你的代碼更整潔。
上面的例子應該能好好的幫你理解var和 let的區別了吧。
最後再說const
const語言中的變量只能被賦值一次,然後就不能在被賦值。const語句的作用範圍和let語句一樣。
例如:
function myFun() {
const a =10;
console.log(a); // 輸出 10
}
問題:如果給一個const變量重新賦值會發生什麼? 考慮下面的代碼:
function myFun() {
const a =10;
console.log(a); // 輸出 10
a =20; // 拋出類型錯誤
console.log(a);
}
當我們嘗試給已有的const變量賦值時,這段代碼會拋出一個錯誤:"未捕獲的類型錯誤:給const變量賦值"。
介紹就到此結束,希望這篇文章能夠幫助到各位更好的理解在Javascript中聲明變量,時使用不同關鍵字時的區別。