JavaScript 变量详解

JavaScript 变量详解

在 JavaScript 编程中，变量是存储数据的容器。理解变量的概念、声明方式、作用域和生命周期对于编写高效、可维护的代码至关重要。本文将详细介绍 JavaScript 变量的相关知识，并通过丰富的示例帮助你更好地理解。

1. 变量的声明

在 JavaScript 中，变量可以通过三种关键字来声明：var、let 和 const。每种声明方式都有其特定的用途和行为。

1.1 var 关键字

var 是最早用于声明变量的关键字，具有函数作用域。

function exampleVar() {
    var x = 10;
    if (true) {
        var x = 20; // 这里的 x 和上面的 x 是同一个变量
        console.log(x); // 输出 20
    }
    console.log(x); // 输出 20
}
exampleVar();

1.2 let 关键字

let 是 ES6 引入的关键字，具有块级作用域。

function exampleLet() {
    let x = 10;
    if (true) {
        let x = 20; // 这里的 x 和上面的 x 是不同的变量
        console.log(x); // 输出 20
    }
    console.log(x); // 输出 10
}
exampleLet();

1.3 const 关键字

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

function exampleConst() {
    const x = 10;
    if (true) {
        const x = 20; // 这里的 x 和上面的 x 是不同的变量
        console.log(x); // 输出 20
    }
    console.log(x); // 输出 10
}
exampleConst();

2. 变量的作用域

作用域决定了变量的可访问性。JavaScript 中有两种主要的作用域：全局作用域和局部作用域。

2.1 全局作用域

在函数外部声明的变量具有全局作用域，可以在代码的任何地方访问。

var globalVar = 10;

function exampleGlobal() {
    console.log(globalVar); // 输出 10
}
exampleGlobal();
console.log(globalVar); // 输出 10

2.2 局部作用域

在函数内部声明的变量具有局部作用域，只能在函数内部访问。

function exampleLocal() {
    var localVar = 20;
    console.log(localVar); // 输出 20
}
exampleLocal();
// console.log(localVar); // 报错：localVar is not defined

3. 变量的提升

JavaScript 中存在变量提升（hoisting）现象，即变量的声明会被提升到其作用域的顶部。

3.1 var 的提升

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

3.2 let 和 const 的提升

let 和 const 也会被提升，但在声明之前访问会报错。

// console.log(hoistedLet); // 报错：Cannot access 'hoistedLet' before initialization
let hoistedLet = 20;

// console.log(hoistedConst); // 报错：Cannot access 'hoistedConst' before initialization
const hoistedConst = 30;

4. 变量的生命周期

变量的生命周期指的是变量在程序中存在的时间段。全局变量的生命周期从声明开始，直到程序结束。局部变量的生命周期从函数调用开始，到函数执行结束。

function exampleLifetime() {
    if (true) {
        var lifetimeVar = 40;
        let lifetimeLet = 50;
        const lifetimeConst = 60;
        console.log(lifetimeVar, lifetimeLet, lifetimeConst); // 输出 40 50 60
    }
    console.log(lifetimeVar); // 输出 40
    // console.log(lifetimeLet); // 报错：lifetimeLet is not defined
    // console.log(lifetimeConst); // 报错：lifetimeConst is not defined
}
exampleLifetime();

5. 变量的命名规则

变量的命名需要遵循一定的规则：

• 变量名必须以字母、下划线（_）或美元符号（$）开头。
• 变量名可以包含字母、数字、下划线或美元符号。
• 变量名区分大小写。
• 不能使用 JavaScript 的关键字和保留字作为变量名。

var validVar = 1;
var _validVar = 2;
var $validVar = 3;
// var 1invalidVar = 4; // 报错：Invalid or unexpected token
// var class = 5; // 报错：Unexpected token

6. 变量的类型

JavaScript 是动态类型语言，变量的类型在运行时确定。常见的变量类型包括：

• 数字（Number）
• 字符串（String）
• 布尔（Boolean）
• 对象（Object）
• 数组（Array）
• 函数（Function）
• 未定义（Undefined）
• 空（Null）

var num = 10; // 数字
var str = "Hello"; // 字符串
var bool = true; // 布尔
var obj = { key: "value" }; // 对象
var arr = [1, 2, 3]; // 数组
var func = function() { return "I am a function"; }; // 函数
var undef = undefined; // 未定义
var nul = null; // 空

7. 变量的赋值

变量可以通过赋值操作符（=）来赋值。

var a = 10;
a = 20; // 重新赋值

let b = "Hello";
b = "World"; // 重新赋值

const c = 3.14;
// c = 3.15; // 报错：Assignment to constant variable

8. 变量的解构赋值

ES6 引入了解构赋值，可以方便地从数组或对象中提取数据。

8.1 数组解构

let [x, y, z] = [1, 2, 3];
console.log(x, y, z); // 输出 1 2 3

8.2 对象解构

let { name, age } = { name: "Alice", age: 25 };
console.log(name, age); // 输出 Alice 25

9. 变量的默认值

在声明变量时，可以为其设置默认值。

let defaultVar = "Default Value";
console.log(defaultVar); // 输出 Default Value

let [a = 1, b = 2] = [undefined, 5];
console.log(a, b); // 输出 1 5

let { name = "Guest", age = 30 } = { age: 25 };
console.log(name, age); // 输出 Guest 25

10. 变量的类型转换

JavaScript 提供了多种方法来进行类型转换。

10.1 隐式类型转换

console.log(10 + "5"); // 输出 105
console.log("10" - 5); // 输出 5

10.2 显式类型转换

console.log(Number("10")); // 输出 10
console.log(String(10)); // 输出 "10"
console.log(Boolean(0)); // 输出 false