JavaScript:学习笔记(7)——VAR、LET、CONST三种变量声明的区别

  ES2015(ES6)带来了许多闪亮的新功能,自2017年以来,许多JavaScript开发人员已经熟悉并开始使用这些功能。虽然这种假设可能是正确的,但仍有可能其中一些功能对某些人来说仍然是一个谜。

  ES6带来的一个新特性是新增了通过使用let、const来声明变量。在本文中,我们将讨论var,let和const的范围,使用和提升。在您阅读时,请注意它们之间的差异,我会指出。

VAR

VAR的范围

  范围本质是意味着这些变量可供使用的位置。var声明的范围是全局作用于或者本地函数作用域。当一个var变量声明在函数外面时它的作用域是全局的,这意味着在整个窗口中可以使用在函数块外部使用var声明的任何变量。var变量在函数内声明时是函数作用域。这意味着它可用,只能在该函数中访问。

  我们举一个例子:

<script>var greeter = "Hello";function hello() {var hi = "Hi";}
</script>

  在这里,greeter是全局范围的,因为它存在于函数外部,而hello是函数作用域。所以我们不能在函数外部访问变量hi。所以,如果我们这样做:

  

var变量可以重新声明和更新

  这个是比较好理解的

var变量提升

  变量提升是什么意思呢?比如我们看下面这段代码

  

  当f()执行后,输出的结果是什么?可能你会说是日期,因为函数f()中,虽然想对tmp进行字符串赋值,但是被if制止了,所以还是以前的Date类型,其实是错误的。这里涉及到一个问题,就是变量提升(Hoisting),它是一种JavaScript机制,它规定变量和函数声明在代码执行之前被移动到其作用域的顶部。所以上面代码等同于下面代码:

  

  所以,结果就是undefined。

var变量带来的问题

  var有一个弱点。我将使用下面的例子来解释这一点。

  

  这段代码看起来是没有任何问题的,但是却是一个巨大的隐患,虽然如果您故意要求重新定义greeter,这不是问题,但如果您没有意识到之前已经定义过变量greeter,则会成为一个问题。如果您在代码的其他部分使用了greeter,那么您可能会对可能获得的输出感到惊讶。这可能会导致代码中出现很多错误。这就是let和const必要的原因。

  也即是说,如果定义在全局作用域的var变量,极有可能对以前定义的同名变量进行覆盖,从而引发问题,而这一切我们都茫然不知

LET

  如果要定义变量,let现在是首选。毫不奇怪,因为它是对var声明的改进。它还解决了最后一个小标题中提出的这个问题。让我们考虑为什么会这样

Let是块作用域

  块是由{}限定的代码块。一个块生活在花括号中。花括号内的任何东西都是块。因此,在带有let的块中声明的变量仅可在该块中使用。让我用一个例子解释一下。

  

  这个是上面例子的改写,if语句构成了一个块,在外面我们无法访问hello,故报错。

Let可以更新但是不能重新声明

  正如下面例子我们看到的,无法重新定义a变量。

  

  在这里很明显两个a在同一个作用域下,如果我们放在不同的块中是可以的,但是切记这不是重新声明,他们隶属于不同的块,对每个块来说都是第一次定义:

Let变量提升

  就像var一样,让声明被提升到顶部。与初始化为undefined的var不同,let关键字未初始化。因此,如果您在声明之前尝试使用let变量,则会出现参考错误。

CONST

  用const声明的变量保持常量值。 const声明与let声明共享一些相似之处。

const声明是块作用域

  与let声明一样,const声明只能在声明的块中访问

const无法更新或重新声明

  

  因此,每个const变量必须在声明时初始化。

  虽然无法更新const对象,但可以更新此对象的属性。因此,如果我们声明一个const对象

  

CONST变量提升

  就像let一样,const声明被提升到顶部但未初始化。

总结

让我们来梳理一下三者的区别

  • var声明是全局作用域或函数作用域,而let和const是块作用域。
  • var变量可以在其范围内更新和重新声明;let变量可以更新但不能重新声明; const变量既不能更新也不能重新声明。
  • 它们全部被提升到其范围的顶部,但是变量初始化为undefined时,let和const变量不会被初始化。
  • 虽然可以声明var和let而不进行初始化,但必须在声明期间初始化const。

转载于:https://www.cnblogs.com/MrSaver/p/10019493.html

JavaScript:学习笔记(7)——VAR、LET、CONST三种变量声明的区别相关推荐

  1. mongo学习笔记四:Mongodb的三种集群(Replica Set)

    Replica Set    中文翻译叫做副本集,不过我并不喜欢把英文翻译成中文,总是感觉怪怪的.其实简单来说就是集群当中包含了多份数据,保证主节点挂掉了,备节点能继续提供数据服务,提供的前提就是数据 ...

  2. 计算机视觉与图像处理学习笔记之人脸识别的三种方法

    人脸检测是指在图像中完成人脸定位的过程,而人脸识别是在人脸检测的基础上进一步判断人的身份,OpenCV提供了三种人脸识别的方法:EigenFaces(特征脸).FisherFaces(人鱼脸).Loc ...

  3. JavaScript学习笔记一

    JavaScript学习笔记 1. 介绍 2. 基础语法 输入输出 变量 数据类型 简单数据类型 复杂数据类型 类型转换 3. 运算 算术运算符 递增递减运算符 比较运算符 逻辑运算符 赋值运算符 运 ...

  4. JavaScript学习笔记(三)---事件、正则表达式、ES6、运动

    JavaScript学习笔记(三)---事件.正则表达式.ES6.运动 27.insertbefore 28.滚动条及事件 29.事件及事件对象 30.鼠标事件对象的属性 31.案例:图片随鼠标移动 ...

  5. JavaScript学习笔记(三)--操作运算符

    JavaScript中的运算符有很多,主要分为算术运算符,比较运算符,逻辑运算符,三目运算符.一元运算符.位运算符等.这些运算符都有一些属于自己的运算规则,下面就为大家介绍一下JavaScript中的 ...

  6. JavaScript 学习笔记(第三天)

    JavaScript 学习笔记(第三天) 一.数组 1.1.数组的基础 1.2.数据类型分类 1.3.创建数组 1.3.1.字面量创建一个数组 1.3.2.内置构造函数创建数组 1.4.数组的基本操作 ...

  7. JavaScript学习笔记(三)——从简单模仿到创作

    JavaScript学习笔记(三)--从简单模仿到创作 目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/mixer/archiv ...

  8. 千锋JavaScript学习笔记

    千锋JavaScript学习笔记 文章目录 千锋JavaScript学习笔记 写在前面 1. JS基础 1.1 变量 1.2 数据类型 1.3 数据类型转换 1.4 运算符 1.5 条件 1.6 循环 ...

  9. JavaScript学习笔记之数组(二)

    JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

最新文章

  1. 从JavaFX 1.3迁移到JavaFX 2.0
  2. 【HDU - 6187】Destroy Walls(思维,最大生成树)
  3. 一行代码 实现集合去重
  4. 安卓总线传输协议常用关键词
  5. mac活动监视器_什么是活动监视器?
  6. rdd数据存内存 数据量_大数据开发-Spark调优常用手段
  7. python subplot_Python金融应用之图表制作(五)
  8. Android 摇一摇(二)
  9. 解决 ‘Could not fetch URL https://pypi.python.org’的问题
  10. 一米机器人解绑再绑定_安顿问答027:安顿APP里的角色绑定错了,可以更改吗?...
  11. 计算机思维在化学上的应用,【科学思维】化隐性为显性思想在化学中的应用
  12. 快速由WP8升级到WP8.1
  13. C语言 FlappyBird×马里奥
  14. 大豆技术面分析_期货分析是看技术面还是基本面?怎么进行期货分析
  15. 搭建一个自定义的工作流管理平台(二)
  16. vim的文件比较功能
  17. Unity精品专栏之序列化操作之Json
  18. 家里电脑总是显示宽带连接服务器,电脑宽带连接
  19. 一个快乐网管的经验谈,教你怎样做快乐网管(转)
  20. 物联网Lora组网方式及私有协议的应用

热门文章

  1. linux java 自启动_Linux设置开机启动脚本
  2. 多项目加载顺序修改_面试官:Java 类在 Tomcat 中是如何加载的?
  3. security center启动类型更改不了_Word 启动缓慢解决方法
  4. android banner 高度,Android Banner 的简单使用步骤
  5. 相分离相关文章阅读Cancer-Specific Retargeting of BAF Complexes by a Prion-like Domain
  6. 处理字典值是把字典放内存还是用sql处理_python基础~元祖与字典原理
  7. 2015-UNet论文翻译
  8. jquery 滚动到某个div_如何使用jQuery获取父元素
  9. C语言:求矩阵对角线元素的和
  10. android 连续调用方法是,android – SwitchPreferences多次调用onPreferenceChange()方法