专栏首页网站建设、网站制作专栏javascrip基础:var,let和const区别在哪里
原创

javascrip基础:var,let和const区别在哪里

虽然小编我主要工作时后端框架搭建,但空闲时候也经常捣鼓前端的东西,下面就分享一下入门基础知识,老鸟略过,废话也不多话,上代码之前先上概念,先理论后再实践是我一贯的学习之道。

var

var定义的变量可被更改,如果不初始化而直接使用也不会报错

let

let定义的变量和var类似,但作用域在当前声明的范围内

const

const定义的变量只可初始化一次且作用域内不可被更改,使用前必须初始化

下面通过一些例子来为大家介绍如何在Javascript中灵活使用var、let和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 myFun() {
 let a =10;
 console.log(a); //输出 10
 if(true) {
 let a=20;
 console.log(a); //输出 20
 }
 console.log(a); // 输出 10
}

它和大多数语言中我们所见的表现行为是一致的。

function myFun() {
 let a =10;
 let a =20; // 抛出语法错误
 console.log(a); 
}

错误信息:"未捕获的异常:标识符'a'已经被声明过。",这个C#这类后端编程方式非常类似。

但如果使用var就没事:

function myFun() { 
 var a =10; 
 var a =20; 
 console.log(a); // 输出 20 
}

使用let语句,可以很好的维护变量的作用范围。当使用内部函数时,let语句让你的代码更整洁。

上面的例子应该能好好的帮你理解var和 let的区别了吧。

最后再说const

const语言中的变量只能被赋值一次,然后就不能在被赋值。const语句的作用范围和let语句一样。

例如:
function myFun() {
 const a =10;
 console.log(a); // 输出 10 
}

问题:如果给一个const变量重新赋值会发生什么? 考虑下面的代码:

function myFun() {
 const a =10;
 console.log(a); // 输出 10
 a =20; // 抛出类型错误
 console.log(a); 
}

当我们尝试给已有的const变量赋值时,这段代码会抛出一个错误:"未捕获的类型错误:给const变量赋值"。

介绍就到此结束,希望这篇文章能够帮助到各位更好的理解在Javascript中声明变量,时使用不同关键字时的区别。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java网络编程--Netty中的责任链

    责任链模式(Chain of Responsibility Pattern)是一种是行为型设计模式,它为请求创建了一个处理对象的链。其链中每一个节点都看作是一个...

    CodingDiray
  • Java网络编程--Netty中的ByteBuf

    由于JDK中提供的ByteBuffer无法动态扩容,并且API使用复杂等原因,Netty中提供了ByteBuf。

    CodingDiray
  • JDK容器类List,Set,Queue源码解读

    List,Set,Queue都是继承Collection接口的单列集合接口。List常用的实现主要有ArrayList,LinkedList,List中的数据是...

    CodingDiray
  • 一行代码引发的恐惧

    我工作的前5年,都是从事基础系统研发相关的工作。做过后台的接入层,后台的存储系统,RPC框架。说来不怕你笑话,那个时期里面,我对代码一直有一种恐惧感。这种恐惧是...

    CSDN技术头条
  • java异常分类和处理

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    chenchenchen
  • (String)强制转换、toString()和String.valueOf()的区别

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    chenchenchen
  • Java网络编程--BIO阻塞式网络编程

    阻塞(blocking)IO :阻塞是指结果返回之前,线程会被挂起,函数只有在得到结果之后(或超时)才会返回

    CodingDiray
  • Java网络编程--NIO非阻塞网络编程

    从Java1.4开始,为了替代Java IO和网络相关的API,提高程序的运行速度,Java提供了新的IO操作非阻塞的API即Java NIO。NIO中有三大核...

    CodingDiray
  • Reactor模式

    Reactor模式是一种设计模式,它是基于事件驱动的,可以并发的处理多个服务请求,当请求抵达后,依据多路复用策略,同步的派发这些请求至相关的请求处理程序。

    CodingDiray
  • Java网络编程--Netty入门

    Netty是一个高性能,高可扩展性的异步事件驱动的网络应用程序框架,它极大的简化了TCP和UDP客户端和服务器端网络开发。它是一个NIO框架,对Java NIO...

    CodingDiray

扫码关注云+社区

领取腾讯云代金券