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 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
动态加载js、css的实例代码
May 26 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 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
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python实现合并字典的方法
2015/07/07 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
NumPy 数组使用大全
2019/04/25 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
聚美优品的广告词
2014/03/14 职场文书
保护黄河倡议书
2014/05/16 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
领导干部考核评语
2015/01/04 职场文书
同事离别感言
2015/08/04 职场文书
关爱空巢老人感想
2015/08/11 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
JS Object构造函数之Object.freeze
2021/04/28 Javascript
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python