【前端大忌】不要小看 let 和 const，这里面也博大博识
引言：近来，“const定义的对象属性是否可以改变？” 这道面试题反复出现。这一问题让我们意识到，let 和 const 不但仅是简单的变量声明方式，此中的知识点和应用场景也值得我们深入探讨。https://i-blog.csdnimg.cn/blog_migrate/3e23dfdcfc4bb03c9b3b288a9a13ba78.png
在这篇文章中，我们将全面剖析 let 和 const 的差别应用场景、堆栈和作用域详解、优缺点对比、技巧应用等。渴望通过本文，你能对这两个关键字有更深入的明白，并可以或许在实际开发中机动运用它们。
----借助目录阅读，结果更好。
基础概念与用法
在ES6（ECMAScript 2015）中，引入了 let 和 const 来替代传统的 var 进行变量声明。这两个关键字具有块级作用域，并且避免了 var 声明带来的许多问题。
[*]let：用于声明可变的变量。
[*]const：用于声明不可变的变量，但要留意的是，这里的“不变”是指变量绑定的值的引用不变，而不是值本身不变。
// 使用 let 声明变量
let a = 10;
a = 20; // 允许重新赋值
// 使用 const 声明变量
const b = 10;
// b = 20; // 不允许重新赋值，会报错
// const 声明对象
const obj = { key: 'value' };
obj.key = 'newValue'; // 允许修改对象属性
console.log(obj.key); // 输出 'newValue'
差别应用场景的深入分析
let 实用于需要在代码块内部重复赋值的变量声明，比方循环计数器、暂时变量等。如下，let 确保了 i 的作用域仅限于循环内部，避免了 var 大概导致的全局变量污染问题。
// 循环中的应用
for (let i = 0; i < 10; i++) {
console.log(i);
}
// 条件语句中的应用
let flag = true;
if (flag) {
let message = 'Hello, world!';
console.log(message); // 输出 'Hello, world!'
}
// console.log(message); // 报错，message 不在作用域内
const 实用于声明那些在初始化后不会再被重新赋值的变量，比方常量、函数和对象。
// 1. 声明常量
const PI = 3.14159;
// PI = 3.14; // 报错，不允许重新赋值
// 2. 声明函数
const greet = function() {
console.log('Hello, world!');
}
greet();
// 3. 声明对象
const user = {
name: 'Alice',
age: 25
};
user.age = 26; // 允许修改对象属性
console.log(user.age); // 输出 26
我们接着再从堆栈和作用域方面，深入分析下。。
https://i-blog.csdnimg.cn/blog_migrate/772dbaeb927911b734bf134edd868ab9.png
堆栈和作用域详解
在JavaScript中，变量的声明和使用不但仅是简单的赋值和调用，而是与内存管理、作用域链以及执行上下文等多个复杂机制密切相关。为了更好地明白 let 和 const 的工作原理，我们需要深入了解堆栈内存管理、作用域和变量提升以及暂时性死区（TDZ）的概念。
堆栈内存管理
JavaScript 中的变量储存在堆（Heap）和栈（Stack）中。基本范例（比方数字和布尔值）存储在栈中，而引用范例（比方对象和数组）存储在堆中。
https://i-blog.csdnimg.cn/blog_migrate/381a4de7144c4b8e6de91b40e362092c.png
[*]堆：用于存储对象（Object）和大块的数据。
[*]栈：用于存储基本数据范例（如字符串、数字等）和执行上下文（Execution Context）。
const x = 10; // 基本类型，存储在栈中
const y = { value: 20 }; // 引用类型，y存储在栈中，实际对象存储在堆中
在 JavaScript 中，每当调用函数时，都会创建一个新的执行上下文并被压入栈顶。当函数执行完毕时，执行上下文从栈顶弹出，释放其所占用的内存空间。让我们通过一个示例来明白这一过程：
function foo() {
let a = 20;
const b = 30;
console.log(a + b);
}
foo();
在上述代码中，当调用 foo 函数时：
[*]JavaScript 引擎创建一个新的执行上下文，此中包含 foo 函数的局部变量 a 和 b。
[*]该执行上下文被压入栈中。
[*]函数执行完毕后，执行上下文从栈中弹出，内存被释放。
这个过程确保了变量在其作用域范围内可访问，并在函数执行完毕后释放内存，避免内存泄漏。
作用域
作用域决定了变量的可访问性。在 JavaScript 中，作用域有三种范例：全局作用域、函数作用域和块级作用域。
[*]全局作用域：在代码任何地方都可以访问的变量被称为全局变量。
[*]函数作用域：使用 var 声明的变量具有函数作用域，意味着它们只在声明它们的函数内部可见。
[*]块级作用域：使用 let 和 const 声明的变量具有块级作用域，意味着它们只在声明它们的块或子块内可见。
// 1. 全局作用域
var globalVar = "全局作用域";
function globalScopeExample() {
console.log(globalVar); // 输出 "全局作用域"
}
globalScopeExample();
// 2. 函数作用域
function functionScopeExample() {
var functionVar = "函数作用域";
console.log(functionVar); // 输出 "函数作用域"
}
functionScopeExample();
// console.log(functionVar); // 报错，functionVar 不在作用域内
// 3. 块级作用域
if (true) {
let blockLet = "块级作用域 let";
const blockConst = "块级作用域 const";
console.log(blockLet); // 输出 "块级作用域 let"
console.log(blockConst); // 输出 "块级作用域 const"
}
// console.log(blockLet); // 报错，ReferenceError: blockLet is not defined
// console.log(blockConst); // 报错，ReferenceError: blockConst is not defined
变量提升（Hoisting）
变量提升是指 JavaScript 在执行代码时会将变量声明提升到作用域的顶部。使用 var 声明的变量会被提升，而 let 和 const 声明的变量不会被提升。详细内容请看文章【
页:
[1]