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 Array.prototype.slice的使用示例
Nov 14 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
js实现内置计时器
Dec 16 Javascript
Javascript之datagrid查询详解
Sep 15 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
用PHP产生动态的影像图
2006/10/09 PHP
php生成扇形比例图实例
2013/11/06 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
php源码的使用方法讲解
2019/09/26 PHP
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Django数据统计功能count()的使用
2020/11/30 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
促销活动总结模板
2014/07/01 职场文书
安全先进班组材料
2014/12/26 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript