”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > JavaScript 中 let、const、var 的区别?

JavaScript 中 let、const、var 的区别?

发布于2024-08-21
浏览:583

let, const , var difference in Javascript?

在 JavaScript 中,let、const 和 var 用于声明变量,但它们在三个方面有所不同:

1.范围
2.重新分配
3.吊装

一、适用范围:

var 是一个函数作用域,意味着我们在函数内的任何位置访问 var 变量,如果我们尝试在函数外部访问它,它将显示错误 undefined
例子:-

function demo(){
  if(true){
    var n = 3;
  }
  console.log(n)
}
console.log(n) //ReferenceError: n is not defined
demo();

let & const 是块意味着我们只能在范围内访问它们,否则会显示未定义的错误
例子:-

function demo(){
  if(true){
    let n = 3;
    const m = 5;
     console.log(n) // 3
     console.log(m) // 5
  }
  console.log(n) //ReferenceError: n is not defined
  console.log(m) //ReferenceError: n is not defined
}
console.log(n) //ReferenceError: n is not defined
console.log(m) //ReferenceError: n is not defined
demo();

2.重新分配

  • var:可以在其作用域内重新赋值和重新声明。
  • let:可以重新赋值,但不能在其作用域内重新声明。
  • const:不能重新分配或重新声明。变量本身是不可变的,但分配给 const 的对象和数组仍然可以修改 .

3.吊装

  • var 被提升,这意味着它在声明之前就可以访问,但在代码到达初始化变量的行之前,它的值将是未定义的。
  • let 也被提升,但与 var 不同的是,由于“临时死区”,在声明之前无法访问它。
  • const 声明的变量也会被提升,但必须在声明时初始化,并且不能重新赋值。但是,如果变量是对象或数组,则可以修改其内容(例如,在数组中添加或删除项目)。
// var example
console.log(a); // undefined (due to hoisting)
var a = 10;
console.log(a); // 10

// let example
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
console.log(b); // 20

// const example
const c = 30;
c = 40; // TypeError: Assignment to constant variable
版本声明 本文转载于:https://dev.to/sagar7170/let-const-var-difference-in-javascript-2d82?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • JavaScript 中的 require 与 import
    JavaScript 中的 require 与 import
    我记得当我开始编码时,我会看到一些js文件使用require()来导入模块和其他文件使用import。这总是让我感到困惑,因为我并不真正理解其中的区别是什么,或者为什么项目之间存在不一致。如果您想知道同样的事情,请继续阅读! 什么是 CommonJS? CommonJS 是一组用于在...
    编程 发布于2024-11-07
  • 使用镜像部署 Vite/React 应用程序:完整指南
    使用镜像部署 Vite/React 应用程序:完整指南
    在 GitHub Pages 上部署 Vite/React 应用程序是一个令人兴奋的里程碑,但这个过程有时会带来意想不到的挑战,特别是在处理图像和资产时。这篇博文将引导您完成整个过程,从最初的部署到解决常见问题并找到有效的解决方案。 无论您是初学者还是有经验的人,本指南都将帮助您避免常见的陷阱,并...
    编程 发布于2024-11-07
  • 我如何在我的 React 应用程序中优化 API 调用
    我如何在我的 React 应用程序中优化 API 调用
    作为 React 开发者,我们经常面临需要通过 API 同步多个快速状态变化的场景。对每一个微小的变化进行 API 调用可能效率低下,并且会给客户端和服务器带来负担。这就是去抖和巧妙的状态管理发挥作用的地方。在本文中,我们将构建一个自定义 React 钩子,通过合并有效负载和去抖 API 调用来捕获...
    编程 发布于2024-11-07
  • 我们走吧!
    我们走吧!
    为什么你需要尝试 GO Go 是一种快速、轻量级、静态类型的编译语言,非常适合构建高效、可靠的应用程序。它的简单性和简洁的语法使其易于学习和使用,特别是对于新手来说。 Go 的突出功能包括内置的 goroutine 并发性、强大的标准库以及用于代码格式化、测试和依赖管理的强大工具。...
    编程 发布于2024-11-06
  • 如何将 PNG 图像编码为 CSS 数据 URI 的 Base64?
    如何将 PNG 图像编码为 CSS 数据 URI 的 Base64?
    在 CSS 数据 URI 中对 PNG 图像使用 Base64 编码为了使用数据 URI 将 PNG 图像嵌入到 CSS 样式表中,PNG 数据必须首先编码为 Base64 格式。此技术允许将外部图像文件直接包含在样式表中。Unix 命令行解决方案:base64 -i /path/to/image....
    编程 发布于2024-11-06
  • API 每小时数据的响应式 JavaScript 轮播
    API 每小时数据的响应式 JavaScript 轮播
    I almost mistook an incomplete solution for a finished one and moved on to work on other parts of my weather app! While working on the carousel that w...
    编程 发布于2024-11-06
  • 用于 Web 开发的 PHP 和 JavaScript 之间的主要区别是什么?
    用于 Web 开发的 PHP 和 JavaScript 之间的主要区别是什么?
    PHP 与 JavaScript:服务器端与客户端 PHP 的作用与 JavaScript 不同。 PHP 运行在服务器端。服务器运行应用程序。除其他外,它还处理表单。当您提交表单时,PHP 会对其进行处理。另一方面,JavaScript 是客户端的。它在浏览器中运行。它处理页面交...
    编程 发布于2024-11-06
  • 如何在 C++ 中迭代结构和类成员以在运行时访问它们的名称和值?
    如何在 C++ 中迭代结构和类成员以在运行时访问它们的名称和值?
    迭代结构体和类成员在 C 中,可以迭代结构体或类的成员来检索它们的名称和价值观。以下是实现此目的的几种方法:使用宏REFLECTABLE 宏可用于定义允许自省的结构。该宏将结构体的成员定义为以逗号分隔的类型名称对列表。例如:struct A { REFLECTABLE ( ...
    编程 发布于2024-11-06
  • 如果需要准确答案,请避免浮动和双精度
    如果需要准确答案,请避免浮动和双精度
    float 和 double 问题: 专为科学和数学计算而设计,执行二进制浮点运算。 不适合货币计算或需要精确答案的情况。 无法准确表示10的负次方,例如0.1,从而导致错误。 示例1: 减去美元金额时计算错误: System.out.println(1.03 - 0.42); // Result...
    编程 发布于2024-11-06
  • 在 Go 中使用 WebSocket 进行实时通信
    在 Go 中使用 WebSocket 进行实时通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    编程 发布于2024-11-06
  • 如何在 Python 中使用代理运行 Selenium Webdriver?
    如何在 Python 中使用代理运行 Selenium Webdriver?
    使用 Python 中的代理运行 Selenium Webdriver当您尝试将 Selenium Webdriver 脚本导出为 Python 脚本并从命令行执行时,可能会遇到在使用代理的情况下出现错误。本文旨在解决此问题,提供一种使用代理有效运行脚本的解决方案。代理集成要使用代理运行 Selen...
    编程 发布于2024-11-06
  • || 什么时候运算符充当 JavaScript 中的默认运算符?
    || 什么时候运算符充当 JavaScript 中的默认运算符?
    理解 || 的目的JavaScript 中非布尔操作数的运算符在 JavaScript 中,||运算符通常称为逻辑 OR 运算符,通常用于计算布尔表达式。但是,您可能会遇到 || 的情况。运算符与非布尔值一起使用。在这种情况下,||运算符的行为类似于“默认”运算符。它不返回布尔值,而是根据某些规则返...
    编程 发布于2024-11-06
  • 探索 Java 23 的新特性
    探索 Java 23 的新特性
    亲爱的开发者、编程爱好者和学习者, Java 开发工具包 (JDK) 23 已正式发布(2024/09/17 正式发布),标志着 Java 编程语言发展的又一个重要里程碑。此最新更新引入了大量令人兴奋的功能和增强功能,旨在改善开发人员体验、性能和模块化。 在本文中,我将分享 JDK 23 的一些主要...
    编程 发布于2024-11-06
  • ES6 数组解构:为什么它没有按预期工作?
    ES6 数组解构:为什么它没有按预期工作?
    ES6 数组解构:不可预见的行为在 ES6 中,数组的解构赋值可能会导致意外的结果,让程序员感到困惑。下面的代码说明了一个这样的实例:let a, b, c [a, b] = ['A', 'B'] [b, c] = ['BB', 'C'] console.log(`a=${a} b=${b} c=$...
    编程 发布于2024-11-06
  • 如何调整图像大小以适合浏览器窗口而不变形?
    如何调整图像大小以适合浏览器窗口而不变形?
    调整图像大小以适应浏览器窗口而不失真调整图像大小以适应浏览器窗口是一项看似简单的解决方案的常见任务。然而,遵守特定要求(例如保留比例和避免裁剪)可能会带来挑战。没有滚动条和 Javascript 的解决方案(仅限 CSS)<html> <head> <style&g...
    编程 发布于2024-11-06

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3