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 相关文章推荐
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
js 对象是否存在判断
Jul 15 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
vue修饰符.capture和.self的区别
Apr 22 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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
PHP 文件扩展名 获取函数
2009/06/03 PHP
PHP中的替代语法简介
2014/08/22 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
js获取div高度的代码
2008/08/09 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
浅谈Python 对象内存占用
2016/07/15 Python
python 连接sqlite及简单操作
2017/06/30 Python
python实现百度语音识别api
2018/04/10 Python
python 获取图片分辨率的方法
2019/01/08 Python
python 图像平移和旋转的实例
2019/01/10 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
几个Shell Script面试题
2014/04/18 面试题
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
特岗教师个人总结
2015/02/10 职场文书