在 JavaScript 中，变量用于存储数据值。你可以将不同类型的数据存储在变量中，如数字、字符串、布尔值、对象等。变量通过标识符（名字）进行访问和操作。

1. 声明变量

JavaScript 提供了三种关键字来声明变量：var、let 和 const。

a. var 声明（传统方式）

var 是 JavaScript 中最早的变量声明方式，但它存在一些问题（例如作用域不够精确）。从 ES6 起，var 不再推荐使用，建议使用 let 和 const。

var name = "Alice";  // 声明变量并初始化
console.log(name);  // 输出：Alice

b. let 声明（块级作用域）

let 是 ES6 引入的用于声明变量的关键字。它有块级作用域（即只在所在的代码块中有效），解决了 var 的一些作用域问题。

let age = 25;  // 声明一个变量 age
age = 30;  // 更新变量值
console.log(age);  // 输出：30

c. const 声明（常量）

const 也是 ES6 引入的关键字，用于声明常量。常量一旦声明并初始化后，其值不能再改变。const 也具有块级作用域。

const pi = 3.14159;  // 声明常量
// pi = 3.14;  // 会报错：Assignment to constant variable.
console.log(pi);  // 输出：3.14159

注意：const 只能在声明时初始化，且不能重新赋值。但是，如果变量是对象或数组，对象的属性或数组的元素是可以修改的。

const person = { name: "Alice", age: 25 };
person.age = 26;  // 可以修改对象的属性
console.log(person);  // 输出：{ name: "Alice", age: 26 }

---

2. 变量命名规则

• 变量名可以包含字母、数字、下划线 (_) 和美元符号 ($)。
• 变量名不能以数字开头。
• 变量名区分大小写，即 age 和 Age 被认为是不同的变量。
• 不能使用 JavaScript 的保留字或关键字（如 let、if、for 等）作为变量名。

合法的变量名：

let name = "Alice";
let _score = 95;
let $price = 100;
let userAge = 30;

不合法的变量名：

let 1stName = "John";  // 错误，不能以数字开头
let let = 10;  // 错误，"let" 是 JavaScript 的关键字

---

3. 变量类型

JavaScript 变量可以存储不同类型的数据，常见的数据类型包括：

• 基本类型：数字（number）、字符串（string）、布尔值（boolean）、undefined、null、符号（symbol）、大整数（bigint）。
• 引用类型：对象（object）、数组（array）、函数（function）。

示例：

let num = 100;  // 数字类型
let str = "Hello, World!";  // 字符串类型
let isActive = true;  // 布尔类型
let person = { name: "Alice", age: 25 };  // 对象类型
let colors = ["red", "green", "blue"];  // 数组类型

---

4. 变量作用域

变量的作用域决定了它在程序中的可见性和生命周期。JavaScript 变量的作用域可以分为以下几种：

a. 全局作用域

当一个变量在函数之外声明时，它就拥有了全局作用域，可以在程序的任何地方访问。

let globalVar = "I am global";  // 全局变量
function display() {
    console.log(globalVar);  // 访问全局变量
}
display();  // 输出：I am global

b. 函数作用域

当一个变量在函数内部声明时，它仅在该函数内有效。

function greet() {
    let localVar = "I am local";  // 局部变量
    console.log(localVar);  // 可以访问局部变量
}
greet();  // 输出：I am local
// console.log(localVar);  // 错误，localVar 在函数外不可访问

c. 块级作用域

let 和 const 声明的变量具有块级作用域，即它们只在所声明的代码块中有效。

if (true) {
    let blockVar = "I am inside block";  // 块级变量
    console.log(blockVar);  // 可以访问块级变量
}
// console.log(blockVar);  // 错误，blockVar 在块外不可访问

---

5. 变量提升（Hoisting）

在 JavaScript 中，变量声明会被提升到函数或代码块的顶部。然而，只有声明会被提升，而赋值则不会。

示例：

console.log(x);  // 输出：undefined
var x = 10;
console.log(x);  // 输出：10

在上面的代码中，变量 x 的声明被提升到了顶部，但是它的赋值 10 保持在原位置，因此第一次输出时是 undefined。

对于 let 和 const 声明的变量，虽然它们也会被提升，但在声明之前无法访问，导致“暂时性死区”（Temporal Dead Zone，TDZ）错误。

console.log(y);  // 错误，ReferenceError: Cannot access 'y' before initialization
let y = 20;

---

小结

• var、let 和 const 都可以用于声明变量，其中 let 和 const 是现代 JavaScript 中推荐使用的声明方式，const 用于常量，let 用于可变的变量。
• 变量作用域：var 是函数作用域，let 和 const 是块级作用域。
• 变量提升：JavaScript 会将变量声明提升到代码顶部，但赋值不会提升。

更多详细内容请关注其他相关文章！