JS中的变量如何声明-js教程-PHP中文网

JavaScript中var、let和const的核心区别在于作用域、提升和重复声明/赋值：var是函数作用域，存在变量提升且允许重复声明；let和const为块级作用域，存在暂时性死区，不允许重复声明，其中const声明的变量不可重新赋值。

js中的变量如何声明

在JavaScript中声明变量，我们主要有三种方式：

var

登录后复制

、

let

登录后复制

和

const

登录后复制

。简单来说，

var

登录后复制

是老旧的声明方式，功能上有些“放任自流”，而

let

登录后复制

和

const

登录后复制

则是ES6之后引入的，提供了更严格、更可控的变量管理机制，它们在作用域、变量提升和重复声明方面表现截然不同。

解决方案

要声明一个JavaScript变量，你只需选择合适的关键字，然后跟上你想要的变量名，最后可以加上等号和初始值。

1. 使用

var

登录后复制

声明： 这是JavaScript最早的变量声明方式。它的特点是函数作用域（Function Scope）和变量提升（Hoisting）。这意味着用

var

登录后复制

声明的变量，在整个函数内部都是可见的，即使你在函数末尾声明，它也会被“提升”到函数顶部。

function exampleVar() {
    console.log(myVar); // 输出 undefined，而不是报错，因为声明被提升了
    var myVar = "Hello var";
    console.log(myVar); // 输出 "Hello var"

    if (true) {
        var anotherVar = "Inside if with var";
    }
    console.log(anotherVar); // 输出 "Inside if with var"，var没有块级作用域
}
exampleVar();
// console.log(myVar); // ReferenceError: myVar is not defined (函数外部不可见)

登录后复制

var

登录后复制

的一个常见问题是它允许在同一作用域内重复声明，这可能导致意外的变量覆盖。

2. 使用

let

登录后复制

声明：

let

登录后复制

是ES6（ECMAScript 2015）引入的，它解决了

var

登录后复制

的许多痛点。

let

登录后复制

声明的变量具有块级作用域（Block Scope），这意味着它们只在声明它们的代码块（如

if

登录后复制

语句、

for

登录后复制

循环或任何花括号

{}

登录后复制

内）中有效。

function exampleLet() {
    // console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization (暂时性死区 TDZ)
    let myLet = "Hello let";
    console.log(myLet); // 输出 "Hello let"

    if (true) {
        let anotherLet = "Inside if with let";
        console.log(anotherLet); // 输出 "Inside if with let"
    }
    // console.log(anotherLet); // ReferenceError: anotherLet is not defined (块级作用域外不可见)
}
exampleLet();

登录后复制

let

登录后复制

不允许在同一作用域内重复声明同一个变量，这有助于避免命名冲突和潜在的bug。

3. 使用

const

登录后复制

声明：

const

登录后复制

也是ES6引入的，它和

let

登录后复制

类似，也具有块级作用域，并且不允许在同一作用域内重复声明。

const

登录后复制

最主要的特点是它用于声明一个常量，这意味着一旦变量被赋值，它的引用就不能再被修改（re-assigned）。

function exampleConst() {
    const PI = 3.14159;
    console.log(PI); // 输出 3.14159

    // PI = 3.14; // TypeError: Assignment to constant variable. (不能重新赋值)

    const user = { name: "Alice", age: 30 };
    console.log(user); // 输出 { name: "Alice", age: 30 }

    user.age = 31; // 允许修改对象的属性，因为修改的是对象内部，而不是user变量本身的引用
    console.log(user); // 输出 { name: "Alice", age: 31 }

    // user = { name: "Bob" }; // TypeError: Assignment to constant variable. (不能重新指向另一个对象)
}
exampleConst();

登录后复制

理解

const

登录后复制

的“不变性”很重要：它保证的是变量的绑定不可变，而不是变量所指向的值本身不可变（对于对象和数组而言）。

JavaScript中var、let和const有什么核心区别？

这三者之间的差异，是理解现代JavaScript变量管理的关键。在我看来，它们最核心的区别体现在作用域（Scope）、变量提升（Hoisting）以及能否重复声明/重新赋值这三个维度上。

首先说作用域。

var

登录后复制

采用的是函数作用域，这意味着一个用

var

登录后复制

声明的变量，它的生命周期和可见性会贯穿整个函数，即便你是在一个

if

登录后复制

语句或者

for

登录后复制

循环里声明的，它在这些块的外部（只要还在同一个函数内）依然是可见的。这在很多情况下容易导致变量污染，或者说，变量的“作用范围”比你预想的要大。比如，你在一个循环里声明了一个

var i

登录后复制

，这个

登录后复制

在循环结束后依然存在，并且可能与外部的同名变量冲突。

而

let

登录后复制

和

const

登录后复制

则引入了块级作用域。任何被花括号

{}

登录后复制

包裹的代码块，比如

if

登录后复制

语句、

for

登录后复制

循环、甚至是一个独立的空块，都会为

let

登录后复制

和

const

登录后复制

声明的变量创建一个独立的作用域。这意味着变量只在它被声明的那个块内有效。一旦离开了那个块，变量就“消失”了。这种设计极大地减少了变量污染的可能性，让代码的逻辑更加清晰和可控。这是我个人非常喜欢

let

登录后复制

和

const

登录后复制

的一个原因，它让局部变量真正地“局部”起来。

其次是变量提升（Hoisting）。

var

登录后复制

声明的变量存在“声明提升”的特性。这意味着在代码执行前，JavaScript引擎会将所有

var

登录后复制

声明的变量的声明部分“提升”到当前作用域的顶部。所以你可以在声明变量之前就访问它，只不过此时它的值是

undefined

登录后复制

。这种行为有时会让人感到困惑，尤其是在复杂的代码中，可能导致一些难以追踪的bug。

let

登录后复制

和

const

登录后复制

也有提升，但它们表现不同。它们也会被提升到块级作用域的顶部，但它们在被实际声明之前是不可访问的，处于一个被称为“暂时性死区（Temporal Dead Zone, TDZ）”的状态。如果你在TDZ期间尝试访问

let

登录后复制

或

const

登录后复制

变量，JavaScript会抛出一个

ReferenceError

登录后复制

。这种机制强制开发者在变量声明之后再使用它，使得代码的行为更加可预测，也更容易调试。我经常会建议初学者，把

let

登录后复制

和

const

登录后复制

理解为“不提升”或者“严格提升”，这样更容易避免TDZ带来的错误。

最后是能否重复声明/重新赋值。

var

登录后复制

允许你在同一作用域内重复声明同一个变量，并且不会报错，而是直接覆盖之前的值。这在大型项目中尤其危险，因为你可能无意中覆盖了其他地方定义的变量。

let

登录后复制

不允许在同一作用域内重复声明同一个变量。如果你尝试这样做，会得到一个

SyntaxError

登录后复制

。但

let

登录后复制

声明的变量可以被重新赋值。

const

登录后复制

则更为严格。它同样不允许在同一作用域内重复声明，而且一旦被赋值，它的引用就不能再被重新赋值。这意味着你不能让

const

登录后复制

变量指向另一个不同的值。但这里有个小细节，对于对象和数组这类引用类型，

const

登录后复制

保证的是变量的引用地址不变，而不是其内部数据不变。所以，你可以修改

const

登录后复制

声明的对象的属性，或者向

const

登录后复制

声明的数组中添加或删除元素。这一点，很多人初学时会在这里犯迷糊。

总的来说，

let

登录后复制

和

const

登录后复制

提供了更严谨、更安全的变量管理方式，它们是现代JavaScript开发的首选。

什么时候应该使用let，什么时候应该使用const？

这是一个非常实用的问题，也是我个人在编写JavaScript代码时，会第一时间考虑的。我遵循的原则很简单：优先使用

const

登录后复制

，只有当确定变量需要被重新赋值时，才使用
let
登录后复制
。

为什么是

const

登录后复制

优先呢？

人声去除

用强大的AI算法将声音从音乐中分离出来

查看详情

首先，使用

const

登录后复制

能够清晰地向阅读代码的人（包括未来的自己）表明，这个变量的值在声明后就不会改变。这大大提升了代码的可读性和可维护性。当你看到一个

const

登录后复制

变量时，你立刻知道它的值是固定的，不需要担心它在后续代码中被意外修改，这减少了认知负担。

其次，

const

登录后复制

有助于防止意外的副作用和bug。在大型复杂的应用中，变量的重新赋值往往是导致错误的一个常见原因。通过默认使用

const

登录后复制

，我们强制自己思考变量的生命周期和它的不变性。如果一个变量在声明后确实不应该改变，那么

const

登录后复制

就能在编译阶段（或运行时早期）捕获到任何尝试修改它的行为，从而避免潜在的bug。这就像给变量加了一层保护膜。

那么，什么时候才轮到

let

登录后复制

登场呢？

很简单，当你知道你的变量在声明之后，它的值需要被改变时，就用

let

登录后复制

。最典型的场景就是循环计数器（比如

for

登录后复制

循环中的

登录后复制

）、需要根据条件动态更新的变量，或者某个状态量需要在不同阶段进行修改。

// 示例1: 循环计数器 (需要重新赋值)
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// 示例2: 动态更新的变量 (需要重新赋值)
let message = "Hello";
if (someCondition) {
    message = "Goodbye"; // message的值被重新赋值
}
console.log(message);

// 示例3: 某个状态量
let isActive = false;
function toggleStatus() {
    isActive = !isActive; // isActive的值会改变
}

登录后复制

你看，这些场景下

let

登录后复制

就是最合适的选择。如果你尝试用

const

登录后复制

去声明

登录后复制

或者

message

登录后复制

，代码会直接报错，因为它们的值确实需要变。

所以，我的建议是：

默认使用
const
登录后复制
声明所有变量。
只有当你明确知道这个变量在后续逻辑中需要被重新赋值时，才将其改为
```
let
```
登录后复制
。这个习惯能让你的代码更健壮，也更容易理解。它强迫你思考变量的“意图”，是它一个固定不变的引用，还是一个会随着程序运行而改变的状态。

理解JavaScript变量声明中的“提升”（Hoisting）机制

“提升”（Hoisting）是JavaScript中一个非常独特的机制，也是很多初学者容易感到困惑的地方。简单来说，它指的是在JavaScript代码执行之前，变量和函数声明会被“移动”到其所在作用域的顶部。但这个“移动”并不是字面意义上的代码挪动，而是一种概念上的行为，涉及到JavaScript引擎在解析代码时的处理方式。

我们来分别看看

var

登录后复制

、

let

登录后复制

和

const

登录后复制

在提升方面的表现。

var

登录后复制

的提升：声明被提升，初始化留在原地

当使用

var

登录后复制

声明一个变量时，它的声明部分会被提升到当前函数作用域的顶部，而赋值（初始化）部分则留在原地。这意味着你可以在

var

登录后复制

变量声明之前就访问它，但此时它的值是

undefined

登录后复制

。

console.log(myOldVar); // 输出: undefined
var myOldVar = "我被声明了";
console.log(myOldVar); // 输出: "我被声明了"

// 引擎实际处理过程类似这样：
// var myOldVar; // 声明被提升到顶部，并默认初始化为 undefined
// console.log(myOldVar);
// myOldVar = "我被声明了"; // 赋值操作留在原地
// console.log(myOldVar);

登录后复制

这种行为在某些情况下可能导致逻辑上的混乱，因为变量看起来在被赋值之前就已经存在了。比如，在循环中不小心重复声明

var

登录后复制

变量，或者在条件语句块中声明的

var

登录后复制

变量泄漏到外部作用域，都可能与提升机制有关。

let

登录后复制

和
const
登录后复制
的提升：进入“暂时性死区”（Temporal Dead Zone, TDZ）

let

登录后复制

和

const

登录后复制

声明的变量也存在提升行为，但它们与

var

登录后复制

不同。它们会被提升到其块级作用域的顶部，但在变量声明语句执行之前，它们是不可访问的。从块的开始到变量声明语句之间的区域，就是所谓的“暂时性死区”（TDZ）。在TDZ内访问

let

登录后复制

或

const

登录后复制

变量会抛出

ReferenceError

登录后复制

。

function showTDZ() {
    // console.log(myLetVar); // ReferenceError: Cannot access 'myLetVar' before initialization
    let myLetVar = "我是一个let变量";
    console.log(myLetVar); // 输出: "我是一个let变量"

    if (true) {
        // console.log(myConstVar); // ReferenceError: Cannot access 'myConstVar' before initialization
        const myConstVar = "我是一个const变量";
        console.log(myConstVar); // 输出: "我是一个const变量"
    }
}
showTDZ();

登录后复制

为什么