ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【前端大忌】不要小看 let 和 const，这里面也博大博识 [打印本页]

作者: 王國慶 时间: 2024-10-6 00:51
标题: 【前端大忌】不要小看 let 和 const，这里面也博大博识
引言：近来，“const定义的对象属性是否可以改变？” 这道面试题反复出现。这一问题让我们意识到，let 和 const 不但仅是简单的变量声明方式，此中的知识点和应用场景也值得我们深入探讨。

在这篇文章中，我们将全面剖析 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

复制代码

我们接着再从堆栈和作用域方面，深入分析下。。

[img=100%,100%]https://i-blog.csdnimg.cn/blog_migrate/772dbaeb927911b734bf134edd868ab9.png[/img]

堆栈和作用域详解

在JavaScript中，变量的声明和使用不但仅是简单的赋值和调用，而是与内存管理、作用域链以及执行上下文等多个复杂机制密切相关。为了更好地明白 let 和 const 的工作原理，我们需要深入了解堆栈内存管理、作用域和变量提升以及暂时性死区（TDZ）的概念。
堆栈内存管理

JavaScript 中的变量储存在堆（Heap）和栈（Stack）中。基本范例（比方数字和布尔值）存储在栈中，而引用范例（比方对象和数组）存储在堆中。

堆：用于存储对象（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 声明的变量不会被提升。详细内容请看文章【

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)