JavaScript let 和 const关键字

本文详细介绍了ES6之前的JavaScript变量作用域概念,包括全局变量与局部变量的区别,以及ES6引入的let关键字如何实现块级作用域,避免变量污染。同时,文章还讲解了const关键字用于声明不可变常量的用法。

在 ES6 之前,JavaScript 只有两种作用域: 全局变量 与 函数内的局部变量。

全局变量

在函数外声明的变量作用域是全局的,全局变量在 JavaScript 程序的任何地方都可以访问。

局部变量

在函数内声明的变量作用域是局部的(函数内),函数内使用 var 声明的变量只能在函数内容访问,如果不使用 var 则是全局变量。

使用 var 关键字声明的变量不具备块级作用域的特性,它在 {} 外依然能被访问到。

在 ES6 之前,是没有块级作用域的概念的。
ES6 可以使用 let 关键字来实现块级作用域。

let 关键字

let 声明的变量只在 let 命令所在的代码块 {} 内有效,在 {} 之外不能访问。
在相同的作用域或块级作用域中,不能使用 let 关键字来重置 var 关键字声明的变量;
在相同的作用域或块级作用域中,不能使用 let 关键字来重置 let 关键字声明的变量;
在相同的作用域或块级作用域中,不能使用 var 关键字来重置 let 关键字声明的变量;
let 关键字在不同作用域,或不同块级作用域中是可以重新声明赋值的。

let 关键字定义的变量不可以在使用后声明,也就是变量需要先声明再使用。

<script>
var i = 5;
for (let i = 0; i < 10; i++) {
    // 一些代码...
}
document.getElementById("demo").innerHTML = i;
</script>

5

const 关键字

const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改:

<script>
try {
    const PI = 3.141592653589793;
    PI = 3.14;
}
catch (err) {
    document.getElementById("demo").innerHTML = err;
}
</script>

TypeError: Assignment to constant variable.

<think>好的,用户想了解JavaScriptconstlet的区别。首先,我需要回忆这两个关键字的特性。根据引用[1][2],constlet都是ES6引入的块级作用域变量声明方式,与var不同。最大的区别是const声明的变量一旦赋值就不能重新分配,而let可以。我得先确认这一点是否正确。 接下来,应该详细说明块级作用域的概念,可能用户不太清楚。比如,在if语句或循环中使用constlet,它们的作用域仅限于代码块内,而var会有变量提升的问题。这里需要举例子说明,比如在循环中使用letvar的不同表现。 然后,需要提到const的不可变性限制。虽然const变量不能重新赋值,但如果变量是对象或数组,其属性或元素是可以修改的。这一点容易让人误解,所以必须澄清。例如,用const声明一个对象,然后修改其属性是否可行,这样的例子可以帮助用户理解。 还要注意初始化要求,const必须在声明时初始化,而let可以稍后赋值。这也是一个关键点,需要明确说明。比如,写const a;会导致语法错误,而let a;是允许的,之后可以赋值。 此外,用户可能想知道何时使用constlet。一般来说,推荐优先使用const,除非需要重新赋值,这样可以避免意外的变量修改,提高代码的可维护性。这也是社区常见的实践,可以引用一些资料或规范说明。 可能还需要对比一下var,虽然用户的问题主要集中在constlet,但简单提及var的作用域提升问题有助于全面理解。不过要避免偏离主题,重点还是放在constlet的区别上。 最后,检查是否有遗漏的细节,比如暂时性死区(TDZ)的问题,虽然可能稍微高级,但对于深入理解也是有帮助的。不过考虑到用户的问题比较基础,可能不需要深入到这里,但可以简要提及。 总结下来,回答的结构应该是:1. 作用域;2. 重新赋值;3. 初始化要求;4. 使用场景;5. 对象数组的特殊情况。每个部分用例子说明,并引用提供的资料支持观点。</think>### JavaScript中`const`与`let`的区别 #### 1. **作用域** - **共同点**: `const``let`都遵循**块级作用域**规则,即变量仅在定义它们的代码块(如`{}`内部)内有效。例如: ```javascript if (true) { let x = 10; const y = 20; } console.log(x); // 报错:x未定义 console.log(y); // 报错:y未定义 ``` 这与`var`的函数作用域不同[^1][^2]。 #### 2. **变量重新赋值** - **核心区别**: - `let`允许变量**重新赋值**: ```javascript let a = 5; a = 10; // 合法 ``` - `const`声明的变量**不可重新赋值**: ```javascript const b = 5; b = 10; // 报错:TypeError ``` 这也是`const`(常量)名称的由来[^1]。 #### 3. **初始化要求** - `const`必须在**声明时初始化**: ```javascript const c; // 报错:Missing initializer ``` - `let`允许**先声明后赋值**: ```javascript let d; d = 5; // 合法 ``` #### 4. **对象数组的特殊情况** - `const`声明的**引用类型变量**(如对象、数组)虽然**变量本身不可重新赋值**,但**内部属性或元素可修改**: ```javascript const obj = { name: "Alice" }; obj.name = "Bob"; // 合法 obj = {}; // 报错:重新赋值 const arr = [1, 2]; arr.push(3); // 合法 arr = [4, 5]; // 报错 ``` #### 5. **使用场景建议** - **优先使用`const`**:当变量无需重新赋值时(如配置项、函数表达式),使用`const`可增强代码可读性并减少意外修改。 - **需要时用`let`**:在循环计数、需要动态更新的变量时使用`let`。 #### 示例对比 ```javascript // let 示例 let count = 0; count += 1; // 合法 // const 示例 const PI = 3.1415; PI = 3; // 报错 ``` ### 相关延展问题 1. **为什么`const`对象属性可以修改?** 因为`const`仅限制变量指向的内存地址不变,对象内容仍可变。 2. **如何实现完全不可变的对象?** 需使用`Object.freeze()`或不可变库(如Immutable.js)。 3. **`const`在循环中的表现?** `for...of`循环中每次迭代会创建新作用域,允许使用`const`: ```javascript for (const item of [1, 2, 3]) { console.log(item); // 合法,每次循环新建item } ``` ### 总结 `const``let`均提供块级作用域,但`const`通过禁止重新赋值强化数据稳定性,而`let`适用于需要动态更新的场景。理解它们的差异有助于编写更健壮的JavaScript代码[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值