let、const和var的区别

ops/2025/3/10 17:33:23/

文章目录

  • 一、概述
  • 二、var变量的问题与限制
  • 三、letconstvar的区别
    • 3.1、作用域‌
    • 3.2、变量提升(Hoisting)‌
    • 3.3、重复声明
    • 3.4、可变性‌
    • 3.5、 全局对象属性‌
    • 3.6、初始值设置‌‌
  • 四、总结
  • 五、实践使用

一、概述

JavaScript中,letconstvar 是用于声明变量的三种关键字。

var关键字最初是在ECMAScript 1(1997年发布的ECMAScript标准)中引入的,用以支持基本的变量声明。但是由于var声明的变量存在内层变量可能覆盖外层变量的问题以及用来计数的循环变量泄露为全局变量; 为了解决var的各种问题,ES6(ECMAScript 2015)中引入了letconst 声明变量和常量。

var_6">二、var变量的问题与限制

var‌声明的变量可能会带来一些潜在问题,如变量提升和全局作用域污染等。‌

  • 全局变量污染:使用var声明的全局变量可能会覆盖已有的全局变量,导致意外的行为。
  • 函数作用域的提升:可能导致代码难以理解和维护,尤其是在复杂的函数中。
  • 块级作用域的限制:在块级作用域(如if语句、for循环等)中使用var声明的变量会提升到其函数作用域的顶部,而非其块级作用域。

letconstvar_12">三、letconstvar的区别

3.1、作用域‌

  • var‌:声明的变量作用域是全局作用域或函数作用域,不存在块级作用域,可以跨块访问,但不能跨函数访问。
  • let‌ 和 ‌const‌:声明的变量作用域是块级作用域,仅在声明它们的代码块(如if语句、for循环、函数等)内有效。

3.2、变量提升(Hoisting)‌

  • var‌:声明的变量会被提升到它们所在作用域的顶部,但初始化的值不会提升,因此在声明之前调用变量,其值为undefined。‌
  • let‌ 和 ‌const‌:声明的变量也会被提升,但它们不会被初始化,在声明之前访问它们会导致暂时性死区(Temporal Dead Zone, TDZ)错误。‌

3.3、重复声明

  • var‌:允许在同一作用域内重复声明变量,后声明的同名变量会覆盖之前声明的。
  • let‌ 和 ‌const‌:不允许在同一作用域内重复声明变量,重复声明会报错。

3.4、可变性‌

  • var‌:声明的变量可以被多次赋值。‌
  • let‌:声明的变量可以被多次赋值,但不允许重新声明。‌
  • const‌:声明的变量必须被初始化,并且不能被重新赋值。然而,如果const变量指向的是一个对象或数组,那么对象或数组的内容是可以被修改的。‌

3.5、 全局对象属性‌

  • var‌:在全局作用域下声明的变量会成为全局对象的属性(在浏览器环境中通常是window对象)。‌
  • let‌ 和 ‌const‌:声明的变量不会成为全局对象的属性,这有助于避免全局命名空间的污染。‌

3.6、初始值设置‌‌

  • var‌ 和 ‌let‌:在声明时可以不用设置初始值。‌‌
  • const‌:声明变量时必须设置初始值。

四、总结

特性varletconst
起源ES6之前ES6(ECMAScript 2015)ES6(ECMAScript 2015)
作用域函数作用域块作用域块作用域
提升是,值为 undefined是,暂时性死区是,暂时性死区
重新赋值允许允许不允许
重复声明允许不允许不允许
全局变量成为全局对象的属性不会成为全局对象的属性不会成为全局对象的属性

五、实践使用

1、使用 letconst:一般建议使用 letconst,避免使用 varconst 应该作为默认选择,除非需要在后续代码中重新赋值。

2、块作用域:利用 letconst 的块作用域来减少变量的生命周期,提高代码的可读性。

3、避免全局变量:尽量避免在全局作用域中使用 var,以减少潜在的命名冲突和污染。

4、使用 const 来声明常量:对于不会被重新赋值的变量,使用 const 来表明它的不可变性

因为letconst是es6的新特性,letconst的出现就是为了解决var的各种问题,强烈建议大家写js代码都用letconst声明变量和常量!




创作不易,欢迎打赏,你的鼓励将是我创作的最大动力。

在这里插入图片描述


http://www.ppmy.cn/ops/164716.html

相关文章

C++程序设计语言笔记——基本功能:表达式

0 优先使用标准库,然后是其他库,最后才是“手工打造的代码”。 在软件开发中,遵循“优先使用标准库 → 第三方库 → 手动实现”的原则能有效提升代码质量、开发效率和可维护性。以下是具体实践指南: 1. 优先使用标准库 为什么&a…

IDE集成开发环境MyEclipse中安装SVN

打开Myeclipse的help菜单----install from site 点击add弹出对话框 在输入框中输入对应内容 http://subclipse.tigris.org/update_1.10.x 点击OK之后,会刷新出两个选项,需要选中的 点击next,出现许可的时候选中同意,一直结束等…

Array and string offset access syntax with curly braces is deprecated

警告信息 “Array and string offset access syntax with curly braces is deprecated” 是 PHP 中的一个弃用警告(Deprecation Notice),表明在 PHP 中使用花括号 {} 来访问数组或字符串的偏移量已经被标记为过时。 背景 在 PHP 的早期版本…

Unity UGUI下实现精确点击的一种方式

比如有这样一个情况,UI的显示区域是个圆形,在点击的时候也需要精确点击到这个圆形显示区域,但是UI元素的RectTransform是个矩形 1. 使用脚本修改 2. 原理探究 此脚本继承了Image组件,但是获取了自身的Collider2D,目…

Ruoyi+uniapp+websocket点对点和广播通知消息

前端参考文章:https://zhuanlan.zhihu.com/p/677296938 后端参考文章:ruoyi-vue websocket实现聊天功能_若依聊天系统-CSDN博客

碰一碰发视频系统之写卡功能开发了,支持OEM

一、引言 在碰一碰发视频系统中,NFC(Near Field Communication,近场通信)技术扮演着关键角色。其中,写卡功能是实现用户与系统便捷交互的重要环节,通过将特定的视频相关信息写入 NFC 标签,用户…

【SpringBoot】统一功能处理

目录 一、什么是统一功能处理 二、统一用户登录权限验证 2.1 定义拦截器 2.2 制定拦截规则 2.3 创建请求 2.4 拦截器实现原理 三、统一异常处理 四、统一数据格式返回 一、什么是统一功能处理 SpringBoot 统一功能处理: 定义:指在SpringBoot应…

供应链重构:制造业如何借助数字化提升响应速度?

下面这篇文章旨在从宏观和微观层面探讨:在过去五年(约2020-2024年)中,制造业如何通过数字化(尤其是人工智能、物联网、大数据等技术)重构供应链,以显著提升对市场与客户需求的响应速度。本文将包含相对详实的行业数据、部分技术原理解析、以及具有代表性的案例分析,帮助…