5分钟快速掌握JS中var、let和const的异同


Posted in Javascript onSeptember 19, 2018

前言

首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?

ECMAScript是一个国际通过的标准化脚本语言。JavaScript由ECMAScript和DOM、BOM三者组成。可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展。

2011 年,ECMAScript 5.1 版发布。之前我们大部分人用的也就是ES5

2015 年 6 月,ECMAScript 6 正式通过,成为国际标准。

好了,回归我们的正题。

本文说的这个话题对于一些老鸟来说可能根本算不上疑问,但对于新手来说也许除了最常见的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中声明变量时使用不同关键字上到底有何异同。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 #Javascript
node.js环境搭建图文详解
Sep 19 #Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 #Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 #Javascript
Vue瀑布流插件的使用示例
Sep 19 #Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 #Javascript
解决vuecli3.0热更新失效的问题
Sep 19 #Javascript
You might like
改变Apache端口等配置修改方法
2008/06/05 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
PHP缓冲区用法总结
2016/02/14 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
python如何调用php文件中的函数详解
2020/12/29 Python
pandas针对excel处理的实现
2021/01/15 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
饮料业务员岗位职责
2013/12/15 职场文书
综合办公室主任职责
2013/12/16 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
感谢信的格式
2015/01/21 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
单位政审意见范文
2015/06/04 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis