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中声明变量时使用不同关键字上到底有何异同。

关于葡萄城

赋能开发者!葡萄城公司成立于 1980 年,是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构,面向全球市场提供软件研发服务,并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣,在全球被数十万家企业、学校和政府机构广泛应用。

原文链接:https://dzone.com/articles/javascript-difference-between-var-let-and-const-ke

原文作者:Raghuraman Kesavan

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Spark学习技巧

你真知道如何高效用mapPartitions吗?

做过一段时间spark的应用开发的小伙伴都会渐渐发现,很没趣,因为都是调API。那么,真的是没趣吗,还是说你本身没有去深入研究呢?通过本文你就会发现自己没成长是...

2392
来自专栏老马说编程

计算机程序的思维逻辑 (1)

程序大概是怎么回事 计算机就是个机器,这个机器主要由CPU、内存、硬盘和输入输出设备组成。计算机上跑着操作系统,如Windows或Linux,操作系统上运行着各...

21010
来自专栏康怀帅的专栏

Shell date 命令详解

以给定的格式显示当前时间。 %% 一个文字的 % %a 当前locale 的星期名缩写(例如: 日,代表星期日) %A 当前locale 的星...

3734
来自专栏北京马哥教育

如何写出优雅又地道的Python代码?

译序 如果说优雅也有缺点的话,那就是你需要艰巨的工作才能得到它,需要良好的教育才能欣赏它。 —— Edsger Wybe Dijkstra 在Python社...

36110
来自专栏java架构师

重构学习笔记

这里仅仅是做了个总结,相当于速查手册。 1、对集合封装 集合,比如List<XXX> ,如果做为返回值,那也就把其自身所拥有的Add,Remove等方法暴漏了...

31711
来自专栏高性能服务器开发

API设计原则 – QT官网的设计实践总结

原文链接:API Design Principles – Qt Wiki 链接:(http://wiki.qt.io/API_Design_Principles...

2942
来自专栏魂祭心

原 GetHashCode重写指南(译文)

4226
来自专栏狮乐园

多维数组取值问题

给予一个多维数组和一个描述取值路径的一维数组, 通过调用函数f返回取值路径描述的值,如 f([[1, 2], [3, 4], [5, 6]], [0, 0]) ...

1673
来自专栏青玉伏案

代码重构(一):函数重构规则

重构是项目做到一定程度后必然要做的事情。代码重构,可以改善既有的代码设计,增强既有工程的可扩充、可维护性。随着项目需求的不断迭代,需求的不断更新,我们在项目中所...

2565
来自专栏林德熙的博客

C# Find vs FirstOrDefault

需要知道,两个方法都是 Linq 的方法,使用之前需要引用 Linq 。对于 List 等都是继承可枚举Enumerable这时获取第一个元素可以使用First...

1801

扫码关注云+社区

领取腾讯云代金券