1. var

var 語句 用于聲明一個函數(shù)范圍或全局范圍的變量，并可將其初始化為一個值（可選）。

var是在ES5及之前的JavaScript版本中用于聲明變量的關(guān)鍵字。下面是對var的詳細(xì)解釋：

1.變量提升（Variable Hoisting）：

• 使用var聲明的變量會發(fā)生變量提升，即在代碼執(zhí)行之前就可以訪問該變量，但其值為undefined。
• 這意味著你可以在變量聲明之前使用變量，而不會報錯。

2.函數(shù)作用域（Function Scope）：

• 使用var聲明的變量具有函數(shù)作用域，即變量的可見范圍限定在聲明它的函數(shù)內(nèi)部。
• 如果在函數(shù)內(nèi)部聲明的變量在函數(shù)體外訪問，將會得到undefined或全局作用域中具有相同名稱的變量（如果存在）。

3.全局作用域（Global Scope）：

• 在全局作用域中使用var聲明的變量是全局變量，可以在代碼的任何地方訪問。
• 全局作用域中的變量會成為window對象的屬性，可以通過window.variableName的方式訪問。

4.變量重復(fù)聲明：

• 使用var關(guān)鍵字可以重復(fù)聲明同一個變量，而不會報錯。這可能會導(dǎo)致意外的錯誤和變量覆蓋。

5.沒有塊級作用域：

• 在使用var聲明的變量中，沒有塊級作用域的概念。
• 即使在if語句、for循環(huán)等代碼塊中聲明的變量，在塊外部仍然可見。

?console.log(x); // 輸出 undefined，變量提升
?var x = 10;
??
?function example() {
? ?var y = 20;
? ?if (true) {
? ? ?var z = 30;
? ? ?console.log(y); // 輸出 20，y 在函數(shù)作用域內(nèi)可見
?  }
? ?console.log(z); // 輸出 30，z 在函數(shù)作用域內(nèi)可見
?}
??
?example();
??
?console.log(x); // 輸出 10，全局作用域中的變量
?console.log(window.x); // 輸出 10，全局變量是 window 對象的屬性
?console.log(y); // 報錯，y is not defined，y 在函數(shù)作用域外不可見
?console.log(window.y); // 輸出 undefined，函數(shù)作用域中的變量不是全局變量

2. let

let是ES6（ECMAScript 2015）引入的關(guān)鍵字，用于聲明塊級作用域的變量。下面是對let的詳細(xì)解釋：

1.塊級作用域（Block Scope）：

• 使用let聲明的變量具有塊級作用域，即變量的可見范圍限定在聲明它的塊內(nèi)部（一對花括號 {}）。
• 在塊級作用域中聲明的變量在外部是不可見的，可以避免變量污染和意外的變量覆蓋。

2.不存在變量提升（No Variable Hoisting）：

• 與使用var聲明的變量不同，使用let聲明的變量不存在變量提升。
• 在聲明之前訪問let變量會導(dǎo)致ReferenceError。

3.重復(fù)聲明錯誤（Redeclaration Error）：

• 在同一作用域內(nèi)重復(fù)使用let聲明同一個變量會導(dǎo)致語法錯誤。
• 這有助于避免意外的變量重復(fù)聲明。

4.循環(huán)中的塊級作用域：

• 在for循環(huán)中使用let聲明的變量具有塊級作用域，每次循環(huán)都會創(chuàng)建一個新的變量實例。
• 這解決了使用var在循環(huán)中常見的問題，即循環(huán)迭代變量泄漏到外部作用域的情況。

以下是一個示例代碼，展示了let的特性：

?function example() {
? ?let x = 10; // 塊級作用域變量
? ?if (true) {
? ? ?let y = 20; // 塊級作用域變量
? ? ?console.log(x); // 輸出 10
? ? ?console.log(y); // 輸出 20
?  }
? ?// console.log(y); // 報錯，y is not defined，y 不在作用域內(nèi)
?}
??
?example();
??
?// console.log(x); // 報錯，x is not defined，x 不在作用域內(nèi)
??
?// 重復(fù)聲明錯誤
?// let z = 30;
?// let z = 40; // 報錯，Identifier 'z' has already been declared
??
?// 循環(huán)中的塊級作用域
?for (let i = 0; i < 3; i++) {
? ?setTimeout(function () {
? ? ?console.log(i); // 輸出 0, 1, 2
?  }, 1000);
?}
??

3. 直接賦值

在JavaScript中，直接賦值是指將一個值直接賦給一個變量，而無需使用關(guān)鍵字進(jìn)行聲明。直接賦值可以用于創(chuàng)建新的變量或更新已存在的變量。下面是對直接賦值的詳細(xì)解釋：

1.創(chuàng)建新變量：

• 如果直接賦值語句中的變量尚未被聲明，賦值操作將創(chuàng)建一個新的變量，并將指定的值分配給該變量。
• 例如：myVariable = 10;，這將創(chuàng)建一個名為myVariable的全局變量，并將其值設(shè)置為10。

2.更新已存在的變量：

• 如果直接賦值語句中的變量已經(jīng)存在，賦值操作將更新該變量的值。
• 例如：myVariable = 20;，這將更新myVariable的值為20。

需要注意以下幾點(diǎn)：

• 全局變量：如果在任何函數(shù)內(nèi)部或代碼塊中直接進(jìn)行賦值，且未使用關(guān)鍵字聲明變量，將創(chuàng)建一個全局變量。這會將變量添加到全局對象（例如，在瀏覽器環(huán)境中，它將成為window對象的屬性）。
• 隱式聲明：直接賦值語句中未使用關(guān)鍵字聲明變量，這會導(dǎo)致變量隱式聲明。這樣的隱式聲明可能會導(dǎo)致意外的結(jié)果和難以調(diào)試的問題。建議始終使用關(guān)鍵字（如var、let或const）明確聲明變量。

以下是一些示例代碼，演示了直接賦值的用法：

?myVariable = 10; // 創(chuàng)建一個全局變量 myVariable，并賦值為 10
?console.log(myVariable); // 輸出 10
??
?myVariable = 20; // 更新 myVariable 的值為 20
?console.log(myVariable); // 輸出 20
??
?function example() {
? ?anotherVariable = 30; // 創(chuàng)建一個全局變量 anotherVariable，并賦值為 30
? ?console.log(anotherVariable); // 輸出 30
?}
??
?example();
?console.log(anotherVariable); // 輸出 30，在全局作用域內(nèi)可見
??

4. const 屬性

const是ES6（ECMAScript 2015）引入的關(guān)鍵字，用于聲明一個常量（不可變的值）。下面是對const的詳細(xì)解釋：

1.常量的賦值：

• 使用const聲明的變量必須在聲明時進(jìn)行初始化，并且不能再次賦值。
• 一旦為常量賦予了初始值，就無法再改變它的值。

2.塊級作用域：

• const聲明的常量具有塊級作用域，類似于使用let聲明的變量。
• 常量只在聲明它的塊內(nèi)部可見，嘗試在塊外部訪問常量會導(dǎo)致ReferenceError。

3.保留其值：

• const聲明的常量的值在聲明后不能被修改。
• 這意味著不能對常量進(jìn)行重新賦值操作。

4.對象和數(shù)組的注意事項：

• const聲明的常量不能被重新賦值，但如果它引用的是一個對象或數(shù)組，那么對象或數(shù)組的屬性或元素是可以被修改的。
• 這是因為const保護(hù)的是常量的綁定（引用），而不是綁定的值本身。

以下是一些示例代碼，展示了const的特性：

?const PI = 3.14159; // 聲明常量 PI，并賦值為 3.14159
?console.log(PI); // 輸出 3.14159
??
?// PI = 3.14; // 報錯，Assignment to constant variable
??
?function example() {
? ?const x = 10; // 聲明塊級作用域的常量 x，并賦值為 10
? ?console.log(x); // 輸出 10
? ?// x = 20; // 報錯，Assignment to constant variable
?}
??
?example();
??
?// console.log(x); // 報錯，x is not defined
??
?const person = {
? ?name: "John",
? ?age: 30,
?};
??
?person.age = 40; // 可以修改對象的屬性
?console.log(person); // 輸出 { name: 'John', age: 40 }
??
?const numbers = [1, 2, 3];
?numbers.push(4); // 可以修改數(shù)組的元素
?console.log(numbers); // 輸出 [1, 2, 3, 4]
??

需要注意以下幾點(diǎn)：

• const聲明的常量必須在聲明時進(jìn)行初始化，并且不能再次賦值。
• 盡管const聲明的常量的值不可變，但對于引用類型（對象和數(shù)組），其屬性或元素是可以修改的。
• 使用const可以提高代碼的可讀性和維護(hù)性，并避免無意間修改常量的錯誤。
• 如果需要聲明一個不可修改的變量，且不需要引用類型的特性，可以使用const來明確表達(dá)意圖。

總結(jié)：const關(guān)鍵字用于聲明常量，它的值在聲明后不可修改。常量具有塊級作用域，并且保留其綁定（引用）。對于引用類型的常量，其屬性或元素是可以修改的。使用const可以提高代碼的可讀性、減少錯誤，并明確表達(dá)變量的不可變性。

const關(guān)鍵字確實保護(hù)的是常量的綁定（引用），而不是綁定的值本身。這是由于JavaScript中的對象和數(shù)組是引用類型。

當(dāng)使用const聲明一個對象或數(shù)組時，實際上創(chuàng)建的是一個指向該對象或數(shù)組的引用。這個引用是不可變的，也就是說不能將它指向另一個對象或數(shù)組。但是，通過這個引用，仍然可以訪問和修改對象或數(shù)組的屬性或元素。

這是因為對象和數(shù)組本身是可變的數(shù)據(jù)結(jié)構(gòu)。const只限制了對變量的重新賦值，但并不限制對對象或數(shù)組內(nèi)部的屬性或元素進(jìn)行修改。因此，可以通過const聲明的常量引用對象或數(shù)組，并在引用上進(jìn)行屬性或元素的修改。

這種設(shè)計是為了在保護(hù)常量的引用不被修改的同時，允許對對象或數(shù)組進(jìn)行更改，以便在程序的不同部分共享和修改數(shù)據(jù)。

5. 變量提升

變量提升是JavaScript中的一種行為，它使得可以在變量聲明之前訪問這些變量。這意味著無論變量聲明在哪個作用域內(nèi)，它們都會在代碼執(zhí)行之前被“提升”到作用域的頂部。

在JavaScript中，變量提升只適用于使用var關(guān)鍵字聲明的變量，而不適用于使用let和const聲明的變量。下面是關(guān)于變量提升的一些重要概念和規(guī)則：

• 變量聲明的提升：在一個作用域內(nèi)，使用var聲明的變量會在代碼執(zhí)行前被提升到該作用域的頂部。這意味著你可以在變量聲明之前訪問這些變量。
• 變量初始化的位置：盡管變量聲明會被提升，但變量的賦值操作并不會提升。變量的初始化（賦值）仍然會在代碼中的實際位置執(zhí)行。
• 變量提升的作用域：變量提升適用于包含變量聲明的整個作用域。如果變量在某個作用域內(nèi)聲明，它會被提升到該作用域的頂部，并且在該作用域內(nèi)的任何位置都可以訪問。

下面是一個示例，演示了變量提升的行為：

?console.log(x); // 輸出 undefined，變量聲明被提升，但未初始化
?var x = 10;
??
?console.log(y); // 報錯，y is not defined，let聲明的變量不會提升
?let y = 20;

在上述示例中，使用var聲明的變量x會被提升到作用域的頂部，因此在變量聲明之前就可以訪問它。但是，由于變量初始化的位置在聲明之后，所以在第一個console.log語句中，變量x的值為undefined。

另一方面，使用let聲明的變量y不會被提升，因此在第二個console.log語句中，嘗試訪問y會導(dǎo)致ReferenceError。

需要注意的是，盡管變量提升使得在變量聲明之前可以訪問變量，但最佳實踐是在使用變量之前顯式地聲明和初始化它們，以提高代碼的可讀性和可維護(hù)性。

總結(jié)：變量提升是JavaScript中的一種行為，使得使用var聲明的變量在作用域的頂部被提升，可以在聲明之前訪問。但是變量的賦值操作不會被提升，變量的初始化仍然發(fā)生在代碼中的實際位置。變量提升不適用于使用let和const聲明的變量。

到此這篇關(guān)于JavaScript常用變量聲明方式總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript變量聲明內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論