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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python专栏

10个Python面试常问的问题

1735
来自专栏java技术学习之道

一张图搞定Java原型模式

1695
来自专栏python小白到大牛

零基础学习python编程不可错过的学习总结,小白福利!

通过以上可以看到我们写的很贱的程序随便保存了一个.txt结尾的格式,竟然也执行了,并没有按照统一要求的.py格式来设计, 那是不是说明后缀名可以说是任意的呢?理...

1533
来自专栏机器学习算法与Python学习

10个Python面试常问的问题

源 | segmentfault,小象学院 文 | xiaochao 概述 Python是个非常受欢迎的编程语言,随着近些年机器学习、云计算等技术的发展...

5339
来自专栏思考的代码世界

Python编程从入门到实践之函数2|第9天

向函数传递列表很有用,这种列表包含的可能是名字、数字或更复杂的对象(如字典)。将列表传递给函数后,函数就能直接访问其内容。

3727
来自专栏coolblog.xyz技术专栏

Dubbo 源码分析 - 自适应拓展原理

我在上一篇文章中分析了 Dubbo 的 SPI 机制,Dubbo SPI 是 Dubbo 框架的核心。Dubbo 中的很多拓展都是通过 SPI 机制进行加载的,...

1132
来自专栏前端下午茶

JS 利用高阶函数实现函数缓存(备忘模式)

高阶函数就是那种输入参数里面有一个或者多个函数,输出也是函数的函数,这个在js里面主要是利用闭包实现的,最简单的就是经常看到的在一个函数内部输出另一个函数,比如

6993
来自专栏小白的技术客栈

Python内置数据结构之字典

今天给大家讲解Python内置数据结构:字典。字典的内容比较多,今天只是简单地介绍一下,明天会继续补充字典相关的内容。 关于Windows的环境安装及配置,小白...

3174
来自专栏C语言及其他语言

Python程序员最常犯的十个错误

来源:编程派 ? 不管是在学习还是工作过程中,人都会犯错。虽然Python的语法简单、灵活,但也一样存在一些不小的坑,一不小心,初学者和资深Python程序...

3287
来自专栏程序员八阿哥

王老板Python面试(5):10个Python面试常问的问题

_class_方法指向了类对象,只用给他赋值类型A,然后调用方法show,但是用完了记得修改回来。

721

扫码关注云+社区

领取腾讯云代金券