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 DOM学习第八章 表单错误提示
Feb 19 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
js 幻灯片的实现
Dec 06 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 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
php强制下载类型的实现代码
2011/04/21 PHP
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
JavaScript DOM进阶方法
2015/04/13 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
vuex vue简单使用知识点总结
2019/08/29 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
朴素贝叶斯算法的python实现方法
2014/11/18 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python高斯消除矩阵
2019/01/02 Python
pymongo中group by的操作方法教程
2019/03/22 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
css3实现动画的三种方式
2020/08/24 HTML / CSS
小学教师岗位职责
2013/11/25 职场文书
司机检讨书
2014/02/13 职场文书
公务员年度个人总结
2015/02/12 职场文书
学期个人自我总结
2015/02/13 职场文书
大专护理专业自荐信
2015/03/25 职场文书
2015年化验室工作总结
2015/04/23 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python