5分钟掌握var,let和const异同
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文出处:https://dzone.com/articles/javascript-difference-between-var-let-and-const-ke
这个话题对于一些老鸟来说可能根本算不上疑问,但对于新手来说也许除了最常见的var之外,let和const较少使用的机会。
所以在本文中,我将会通过一些例子来为大家介绍如何在Javascript中灵活使用var、let和const这些关键字来定义变量,以及这些关键字它们之间有什么异同。
如果你懒得看下面的代码,那我可以先把概念结论说出:
- var定义的变量可被更改,如果不初始化而直接使用也不会报错
- let定义的变量和var类似,但作用域在当前声明的范围内
- const定义的变量只可初始化一次且作用域内不可被更改,使用前必须初始化
下面我将通过示例的形式来详细为大家介绍它们三者之间的异同:
Var
var用以声明一个变量,并且同时我们可以在声明语句中初始化所声明的变量。
例如:
var a = 10;
- 变量的声明,会在代码被执行之前被处理。
- 用
var
声明的JavaScript变量,其可用范围在当前执行上下文。 - 在函数外声明的JavaScript变量,其作用范围是全局。
考虑以下代码片段:
function nodeSimplified() { var a =10; console.log(a); // 输出 10 if(true) { var a=20; console.log(a); // 输出 20 } console.log(a); // 输出 20 }
在上面的代码中,你可以发现,当变量a在if代码段里被更新时,它的值被全局更新了,因此在经过了if代码后,被更新的值仍然被保留着。这与其他语言中的全局变量有点类似。但是,在使用这个功能时要非常小心,因为它有可能会覆盖一个已有的值。
let
let语句在一个块级范围里声明一个局部变量。和var
类似,我们可以在声明时初始化它的值。
例如:
let a = 10;
- 这个语句允许你创建一个变量,使它的作用范围被限制在它所在的代码块。
- 它和Java、C#等其他语言的变量类似。
考虑下面的代码片段:
function nodeSimplified() { let a =10; console.log(a); // output 10 if(true) { let a=20; console.log(a); // output 20 } console.log(a); // output 10 }
它和大多数语言中我们所见的表现行为是一致的。
function nodeSimplified() { let a =10; let a =20; // 抛出语法错误 console.log(a); }
错误信息:"未捕获的异常:标识符'a'已经被声明过。" 但如果使用var
就没事:
function nodeSimplified() { var a =10; var a =20; console.log(a); // 输出 20 }
使用let
语句,可以很好的维护变量的作用范围。当使用内部函数时,let
语句让你的代码更整洁。
我希望上面的例子能帮你更好地理解var
和 let
。如果有任何疑问,请在评论区留言。
const
const语言中的变量只能被赋值一次,然后就不能在被赋值。const
语句的作用范围和let
语句一样。
例如:
const a = 10; function nodeSimplified() { const MY_VARIABLE =10; console.log(MY_VARIABLE); // 输出 10 }
照例,命名规范指出我们应该用大写字母声明常量。当然,const a = 10 在上面的代码中会的起到相同的作用。为了让代码长期可维护,命名规范还是值得遵守的。
问题:如果给一个const变量重新赋值会发生什么? 考虑下面的代码:
function nodeSimplified() { const MY_VARIABLE =10; console.log(MY_VARIABLE); // 输出 10 MY_VARIABLE =20; // 抛出类型错误 console.log(MY_VARIABLE); }
错误信息:"未捕获的类型错误:给const变量赋值"。
当我们尝试给已有的const变量赋值时,这段代码会抛出一个错误。
介绍就到此结束,希望这篇短小精悍的文章能够帮助到各位更好的理解在Javascript中声明变量时使用不同关键字上到底有何异同。

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
使用Nagios打造专业的业务状态监控
想必各个公司都有部署zabbix之类的监控系统来监控服务器的资源使用情况、各服务的运行状态,是否这种监控就足够了呢?有没有遇到监控系统一切正常确发现项目无法正常对外提供服务的情况呢?本篇文章聊聊我们如何简单的使用Nagios监控业务的状态 文中的业务指用户访问的网站页面,对外提供的API接口,移动端的APP等产品 监控的思考 通常我们会在项目所在的机房部署一套监控系统来监控我们服务器和MySQL之类的公共服务,制定报警策略,在出现异常情况的时候邮件或短信提醒我们及时处理。 此类监控主要的关注点有两个: 资源的占用情况,例如负载高低、内存大小、磁盘空间等 服务的状态监控,例如Nginx状态、Mysql主从状态等 同时也会存在以下两个主要问题: 缺少业务状态的监控,不能很直观的知道业务当前的状态,可能服务器、服务都正常但业务确挂了 监控服务器和业务服务器处于同一机房环境内,监控网络故障、入口网络拥堵等情况都可能会导致收不到监控系统的报警,且只能监控机房内的情况,用户到机房入口的情况无法监控 那么如何解决这两个问题呢? 业务状态监控,就是要最直观的的反映业务当前是正常还是故障,该怎么监控呢?...
- 下一篇
Vuex 快速入门 简单易懂
一、vuex介绍 (1)vuex是什么? 1. 借鉴了Flux、Redux、The Elm Architecture 2. 专为 Vue.js 设计的状态管理模式 3. 集中式存储和管理应用程序中所有组件的状态 4. Vuex 也集成到 Vue 的官方调试工具 5. 一个 Vuex 应用的核心是 store(仓库,一个容器),store包含着你的应用中大部分的状态 (state)。 (2)什么情况下我应该使用 Vuex? 1. 不适用:小型简单应用,用 Vuex 是繁琐冗余的,更适合使用简单的store 模式。 2. 适用于:中大型单页应用,你可能会考虑如何把组件的共享状态抽取出来,以一个全局单例模式管理,不管在哪个组件,都能获取状态/触发行为,解决问题如下: ① 多个视图使用于同一状态: 传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力 ② 不同视图需要变更同一状态: 采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝,通常会导致无法维护的代码 (3)Vuex 和单纯的全局对象有何不同? 1.Vuex 的状态存储是响应式的 当 Vue 组件从 s...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,CentOS8安装Elasticsearch6.8.6
- 2048小游戏-低调大师作品
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- Windows10,CentOS7,CentOS8安装Nodejs环境
- CentOS7安装Docker,走上虚拟化容器引擎之路
- SpringBoot2全家桶,快速入门学习开发网站教程