【JavaScript】Var、Let 和 Const 有什么区别

JavaScript 中的 Var、Let 和 Const 有什么区别

ES2015(ES6)推出了许多闪亮的新功能。从 2020 年开始,我们假设许多 JavaScript 开发人员已经熟悉并开始使用这些功能。

ES6 附带的功能之一是添加了letconst,可用于变量声明。问题是,它们与var有何不同? 如果你仍然不清楚-那么读完本文你就知道了 😂。

在本文中,我们将讨论varletconst的作用域、用途和变量提升。当你阅读时,请注意我将指出的它们之间的差异。

Var

在 ES6 出现之前,必须使用 var 声明。但是,前端开发出现的一些问题与使用 var 声明的变量有关。这就是为什么必须要有新的方法来声明变量。首先,让我们在讨论这些问题之前更多地了解 var

var 的作用域

作用域本质上是指变量/函数可供访问的范围。var可以在全局范围声明或函数/局部范围内声明。

当在最外层函数的外部声明var变量时,作用域是全局的。这意味着在最外层函数的外部用var声明的任何变量都可以在windows中使用。

当在函数中声明var时,作用域是局部的。这意味着它只能在函数内访问。

要进一步了解,请查看下面的示例。

var greeter = 'hey hi';function newFunction() {var hello = 'hello';
}

这里,greeter是全局范围的,因为它存在于函数外部,而hello是函数范围的。因此,我们无法在函数外部访问变量hello。因此,如果我们这样做:

var tester = 'hey hi';
function newFunction() {var hello = 'hello';
}
console.log(hello); // error: hello is not defined

我们会收到错误消息,这是由于函数外部没有hello导致的。

var 变量可以重新声明和修改

这意味着我们可以在相同的作用域内执行下面的操作,并且不会出错

var greeter = 'hey hi';
var greeter = 'say Hello instead';

又比如

var greeter = 'hey hi';
greeter = 'say Hello instead';

var 的变量提升

变量提升是 JavaScript 的一种机制:在执行代码之前,变量和函数声明会移至其作用域的顶部。这意味着如果我们这样做:

console.log(greeter);
var greeter = 'say hello';

生面的代码会被解释为:

var greeter;
console.log(greeter); // greeter is undefined
greeter = 'say hello';

因此,将var声明的变量会被提升到其作用域的顶部,并使用 undefined 值对其进行初始化.

var 的问题

var有一个弱点。我将使用以下示例进行说明:

    var greeter = "hey hi";var times = 4;
if (times > 3) {var greeter = "say Hello instead";
}console.log(greeter) // "say Hello instead"

由于times> 3返回 true,因此将greeter重新定义为saysay Hello。如果你有是故意重新定义greeter,这段代码是问题的,但是当你不知道之前已经定义了变量greeter时,这将成为产生问题。

如果在代码的其他部分使用了greeter,这可能会导致代码中出现许多错误。这就是为什么需要letconst的原因。

Let

let现在已经成为变量声明的首选。这并不奇怪,因为它是对var声明的改进。它也解决了我们刚刚介绍的var问题。让我们考虑一下为什么会这样。

let 是块级作用域

块是由 {} 界定的代码块,大括号中有一个块。大括号内的任何内容都包含在一个块级作用域中.

因此,在带有let的块中声明的变量仅可在该块中使用。让我用一个例子解释一下

let greeting = 'say Hi';
let times = 4;if (times > 3) {let hello = 'say Hello instead';console.log(hello); // "say Hello instead"
}
console.log(hello); // hello is not defined

我们看到在其代码块(定义它的花括号)之外使用hello会返回错误。这是因为let变量是块范围的.

let 可以被修改但是不能被重新声明.

就像var一样,用let声明的变量可以在其范围内被修改。但与var不同的是,let变量无法在其作用域内被重新声明。 来看下面的栗子:

let greeting = 'say Hi';
greeting = 'say Hello instead';

上面的代码将会返回一个错误:

let greeting = 'say Hi';
let greeting = 'say Hello instead'; // error: Identifier 'greeting' has already been declared

但是,如果在不同的作用域中定义了相同的变量,则不会有错误:

let greeting = 'say Hi';
if (true) {let greeting = 'say Hello instead';console.log(greeting); // "say Hello instead"
}
console.log(greeting); // "say Hi"

为什么没有错误? 这是因为两个实例的作用域不同,因此它们会被视为不同的变量。

这个事实说明:使用let,是比var更好的选择。当使用let时,你不必费心思考 🤔 变量的名称,因为变量仅在其块级作用域内存在。

同样,由于在一个块级作用域内不能多次声明一个变量,因此不会发生前面讨论的var出现的问题。

let 的变量提升

就像var一样,let声明也被提升到作用域顶部。
但不同的是:

  • var声明的变量会被提升到其作用域的顶部,并使用 undefined 值对其进行初始化。
  • let声明的变量会被提升到其作用域的顶部,不会对值进行初始化。

因此,如果你尝试在声明前使用let变量,则会收到Reference Error

Const

const声明的变量保持常量值。 const声明与let声明有一些相似之处

const 声明的变量在块级作用域内

let声明一样,const声明只能在声明它们的块级作用域中访问

const 不能被修改并且不能被重新声明

这意味着用const声明的变量的值保持不变。不能修改或重新声明。因此,如果我们使用const声明变量,那么我们将无法做到这一点:

const greeting = 'say Hi';
greeting = 'say Hello instead'; // error: Assignment to constant variable.

或者这个这样:

const greeting = 'say Hi';
const greeting = 'say Hello instead'; // error: Identifier 'greeting' has already been declared

因此,每个const声明都必须在声明时进行初始化。

当用const声明对象时,这种行为却有所不同。虽然不能更新const对象,但是可以更新该对象的属性。 因此,如果我们声明一个const对象为

const greeting = {message: 'say Hi',times: 4,
};

同样不能像下面这样做:

const greeting = {words: 'Hello',number: 'five',
}; // error:  Assignment to constant variable.

但我们可以这样做:

greeting.message = 'say Hello instead';

这将更新greeting.message的值,而不会返回错误。

const 的变量提升

就像let一样,const声明也被提升到顶部,但是没有初始化。

最后,我们总结一下它们的异同:

  • var声明是全局作用域或函数作用域,而letconst是块作用域。
  • var变量可以在其范围内更新和重新声明; let变量可以被更新但不能重新声明; const变量既不能更新也不能重新声明。
  • 它们都被提升到其作用域的顶端。但是,虽然使用变量undefined初始化了var变量,但未初始化letconst变量。
  • 尽管可以在不初始化的情况下声明varlet,但是在声明期间必须初始化const

谢谢你的阅读:)

原文:Var, Let, and Const – What’s the Difference?,作者:Sarah Chima Atuonwu

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/731860.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GitHub会员充值

GitHub是一个基于Web的代码托管平台,为开发者提供了协作、版本控制和代码管理的工具。它允许个人和团队共同协作开发软件项目,并提供了许多功能,使得代码的管理和维护更加容易 版本控制系统: GitHub使用Git作为其版本控制系统。Gi…

基于Springboot的高校宣讲会管理系统。Javaee项目,springboot项目。

演示视频: 基于Springboot的高校宣讲会管理系统。Javaee项目,springboot项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结构,通过Spring Spri…

AudioLab一个功能强大的Python音频处理库

简介 Audiolab是一个功能强大的Python库,专门用于音频数据的处理和分析。它提供了一系列丰富的工具和函数,让开发者能够轻松地处理音频数据,从而实现各种应用,如音频编辑、音频特征提取和音频分类等。 功能介绍: 首…

基于Java的开放实验室管理系统(Vue.js+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 实验室类型模块2.2 实验室模块2.3 实验管理模块2.4 实验设备模块2.5 实验订单模块 三、系统设计3.1 用例设计3.2 数据库设计 四、系统展示五、样例代码5.1 查询实验室设备5.2 实验放号5.3 实验预定 六、免责说明 一、摘…

Charles抓包工具使用

Charles简介 Charles是一款基于HTTP协议的代理服务器和HTTP监视器,通过将自己设置为电脑或浏览器的网络访问代理,能够截取请求和请求结果,从而达到分析抓包的目的。它允许开发者查看所有连接互联网的HTTP通信,包括请求、响应和HTT…

人工智能|机器学习——Canopy聚类算法(密度聚类)

1.简介 Canopy聚类算法是一个将对象分组到类的简单、快速、精确地方法。每个对象用多维特征空间里的一个点来表示。这个算法使用一个快速近似距离度量和两个距离阈值T1 > T2 处理。 Canopy聚类很少单独使用, 一般是作为k-means前不知道要指定k为何值的时候&#…

专题一 - 双指针 - leetcode 202. 快乐数 | 简单难度

leetcode 202. 快乐数 leetcode 202. 快乐数 | 简单难度1. 题目详情1. 原题链接2. 基础框架 2. 解题思路1. 题目分析2. 算法原理3. 时间复杂度 3. 代码实现4. 知识与收获 leetcode 202. 快乐数 | 简单难度 1. 题目详情 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」…

简单BFF架构设计

又到周五了有了一个小时的闲暇时间简单写点东西,介绍一个简单的BFF的架构。BFF:Backends For Frontends,其实现在是个比较常见的前端架构设计的方案,其最大的优势便在于前端可以高度自由的在Node层做一些server端才可以做的东西,比如SSR、登录…

SSH安全协议介绍

知识改变命运,技术就是要分享,有问题随时联系,免费答疑,欢迎联系! SSH(Secure Shell,安全外壳)是一种网络安全协议,通过加密和认证机制实现安全的访问和文件传输等业…

气象数据免费下载(超级好用)

你是不是做实验经常性的需要一些气象数据,例如PM2.5、相对湿度、月均温度等等…… 但是当你开始寻找数据时就遇到困难了,由于权限、数据网站之类的麻烦你会花费大量无用时间,甚至有时候一无所获得不偿失,这就很头疼了!…

服务器配置禁止IP直接访问,只允许域名访问

联网信息系统需设置只允许通过域名访问,禁止使用IP地址直接访问,建议同时采用云防护技术隐藏系统真实IP地址且只允许云防护节点IP访问服务器,提升网络安全防护能力。 一、Nginx 修改配置文件nginx.conf,在server段里插入正则表达式…

智昊电气推出RCL-0923U型光伏并网点电压自动控制装置/分布式光伏并网点电压自动控制设备/电压控制器

一:行业背景分析 在新型电网的发展的业态下,随着以光伏,风电等可再生能源为代表的新型能源的大量并网接入,配电网从单向电网走向双向电网,从无源电网走向有源电网的演进。但新能源在并网过程对大电网带来诸多影响&…

2024甘肃事业单位报名流程,注意,超全超详细!

✔️报名时间:3月8日9:00-3月12日18:00 ✔️资格审查:3月8日9:00-3月13日18:00 ✔️报名缴费:3月8日9:30-3月14日18:00 ✔️打印准考证:4月16日9:00-4月21日9:00 ✔️笔试时间:2024年4月21日上午 8:30-10:00 职业能力倾…

RT-DETR优化改进:特征融合篇 | GELAN(广义高效层聚合网络)结构来自YOLOv9

🚀🚀🚀本文改进:使用GELAN改进架构引入到RT-DETR 🚀🚀🚀RT-DETR改进创新专栏:http://t.csdnimg.cn/vuQTz 🚀🚀🚀学姐带你学习YOLOv8,从入门到创新,轻轻松松搞定科研; 🚀🚀🚀RT-DETR模型创新优化,涨点技巧分享,科研小助手; 1.YOLOv9介绍 论…

【vue.js】文档解读【day 3】 | 列表渲染

如果阅读有疑问的话,欢迎评论或私信!! 文章目录 列表渲染v-forv-for 与对象在 v-for 里使用范围值template 上的 v-forv-for与v-if通过key管理状态组件上使用v-for数组变化侦测 列表渲染 v-for 在我们想要渲染出一个数组中的元素时&#xf…

C# 中 Math.Round 数学函数

在 C# 中,Math.Round 是一个数学函数,用于对一个浮点数进行四舍五入操作。它接受一个浮点数作为输入,并返回一个最接近输入值的整数或指定小数位数的浮点数。 Math.Round 方法有多个重载,其中最常用的重载有以下两种形式&#xf…

C语言数据结构之二叉堆

愿你千山暮雪 海棠依旧 不为岁月惊扰平添忧愁 🎥前期回顾-二叉树 🔥数据结构专栏 期待小伙伴们的支持与关注!!! 目录 前期回顾 二叉堆的概念及结构 二叉堆的创建 顺序表的结构声明 顺序表的创建与销毁 二叉堆的插入 …

qtCreator可以全局包含。VSqt中千万不能全局包含,你的控件头文件会自己变成<>括号,编译就报错

qtCreator可以全局包含。 VSqt中千万不能全局包含,你的控件头文件会自己变成<>括号,编译就报错

【fastllm】学习框架,本地运行,速度还可以,可以成功运行chatglm2模型,估计chatglm3模型应该也可以运行,但是并没有现成的模型文件

1,关于 fastllm 项目 https://github.com/ztxz16/fastllm 🚀 纯c实现,便于跨平台移植,可以在安卓上直接编译 🚀 ARM平台支持NEON指令集加速,X86平台支持AVX指令集加速,NVIDIA平台支持CUDA加速…

【前端】处理一次性十万条数据渲染方案(不考虑后端分页)

文章目录 一、定时渲染二、触底加载 一、定时渲染 思路:定时加载,分堆处理 1. 例如,前端请求到十五条数据以后,先不直接渲染,而是将这些数据分堆分批次渲染 2. 比如,一堆放10条数据,十万条数据…