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 相关文章推荐
javascript html 静态页面传参数
Apr 10 Javascript
jquery构造器的实现代码小结
May 16 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
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
Terran建筑一览
2020/03/14 星际争霸
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
python文件及目录操作代码汇总
2020/07/08 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
德国网上花店:Valentins
2018/08/15 全球购物
软件配置管理有什么好处
2015/04/15 面试题
大学生应聘推荐信范文
2013/11/19 职场文书
会计职业生涯规划范文
2014/01/04 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
南京导游词
2015/02/03 职场文书
python xlwt模块的使用解析
2021/04/13 Python
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js