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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
vue调用语音播放的方法
Sep 27 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中ADODB类详解
2008/03/25 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
js 操作select相关方法函数
2009/12/06 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
对于Python中线程问题的简单讲解
2015/04/03 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
python处理csv中的空值方法
2018/06/22 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
Python定义函数实现累计求和操作
2020/05/03 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
Python中的面向接口编程示例详解
2021/01/17 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
公务员职业生涯规划书范文  
2014/01/19 职场文书
我的动漫时代的创业计划书范文
2014/01/27 职场文书
写求职信有什么意义
2014/02/17 职场文书
安全责任书范本
2014/04/15 职场文书
建筑工地质量标语
2014/06/12 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
Flink 侧流输出源码示例解析
2022/09/23 Servers