以前无论声明变量还是常量,总是使用var一勺端,知道接触了es6之后,发现原来变量、常量的声明其实是很讲究的。

  这里简单来谈谈var、const与let。

  1、var。var声明的变量没有块级作用域,而且存在变量名提升的情况。这里举例说明。

<script>
var num = 123;
function foo(){
console.log(num); // undefined
var num = 46;
console.log(num) //
}
foo()
</script>

  为什么第一个输出值会是undefined,而不是123呢?因为这里存在着变量名的提升,其实上述语句相当于:

<script>
var num = 123;
function foo(){
var num;
console.log(num); // undefined
num = 46;
console.log(num) //
}
foo()
</script>

  上面主要体现了var存在着变量名的提升,那么它没有块级作用域又是怎么体现的呢?最常见的是在条件语句里面,如if语句、for语句。这里以if语句为例。

<script>
var num = 123;
if(true){
console.log(num) //
   var num = 456;
console.log(num) //
}
console.log(num) //
</script>

  这里为什么第一个输出值不是undefined,第三个输出值不是123呢?原因是这样的,因为var不存在块级作用域,且变量名会提升,所以上述代码其实相当于:

<script>
var num;
num = 123
if(true){
  console.log(num) //
  num = 456;
  console.log(num) //
}
console.log(num) //
</script>

  所以在我看来,var其实是有利有弊的,利就是不用去管什么常量与变量的,直接使用var就行,弊就是不存在块级作用域且变量名会提升,这会在无形之中给我们带来许多意想不到的问题

  2、const(es6中用来定义常量的一个关键字(当然了,其他语言里也存在着const,这里仅指在js中)。常用来声明常量,且常量不可修改,必须初始化,存在着块级作用域。

  (1)、不存在名称提升问题。以代码说事儿。

<script>
function foo(){
console.log(num);
const num = 456;
console.log(num)
}
foo()
</script>

  运行上述代码会发现会报错 Uncaught ReferenceError: num is not defined 。这里说明,使用const来定义的常量名并没有提升。

  

  (2)、声明时必须初始化。假如用const声明的常量并没有初始化呢?会有问题吗?直接上代码

<script>
const num;
console.log(num)
</script>

  这里运行后发现会报错。 Uncaught SyntaxError: Missing initializer in const declaration 意思是:语法错误,在const声明中没有初始化。

  同样的代码,只是const声明初始化,结果会不会有变化呢?答案是不言而喻的了。

  

  (3)、存在着块级作用域。什么叫块级作用域呢?上代码: 

<script>
const num = 456
if(true){
const num = 789;
console.log(num); //
}
console.log(num) //
</script>

  可见在if语句内声明的常量在if语句外并不能访问到,这里与var不同。这里是以if语句为例的,当然在for语句亦或是函数内都是这样的,存在着块级作用域

  

  3、let(es6中用来定义变量的一个关键字)。let定义的变量存在着块级作用域,在函数内定义的变量,对函数外部无影响。

  (1)、在函数内部定义的变量,对函数外部无影响,即存在着块级作用域。  

<script>
let num = 789;
function foo(){
let num = 46;
console.log(num) //
}
foo()
console.log(num) //
</script>

  (2)、不存在着变量名的提升。

<script>
function foo(){
console.log(num); // Uncaught ReferenceError: num is not defined
let num = 46;
console.log(num)
}
foo()
</script>

  运行后发现会报错,可见使用let声明的变量,并不像var那样存在着变量名的提升问题。

浅析const、let与var的更多相关文章

  1. c# 把一个匿名对象赋值给一个Object类型的变量后,怎么取这个变量? c# dynamic动态类型和匿名类 详解C# 匿名对象(匿名类型)、var、动态类型 dynamic 深入浅析C#中的var和dynamic

    比如有一个匿名对象,var  result =......Select( a=>new {  id=a.id, name=a.name});然后Object  obj =  result ;我怎 ...

  2. ES6之用let,const和用var来声明变量的区别

    var(掌握) 不区分变量和常量   用var声明的变量都是变量,都是可变的,我们可以随便对它进行运算操作.这样当多个人进行同一个项目时,区分变量和常量会越来越难,一不小心就会把设计为常量的数据更改了 ...

  3. 浅析const标识符在C++函数的功能

    范例: class matrix { public: matrix(){}; const double getvalue(const unsigned row, const unsigned colu ...

  4. var和dynamic的应用 var、动态类型 dynamic 深入浅析C#中的var和dynamic ----demo

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. ES6中的var let const应如何选择

    javascript世界里面的每个人都在说有关ECMAScript 6 (ES6,也称作ES 2015)的话题,对象的巨大变化 ( 类 , super() , 等), 函数 (默认参数等), 以及模块 ...

  6. var与let、const的区别

    var与let.const 一.var声明的变量会挂载在window上,而let和const声明的变量不会: var a = 100;console.log(a,window.a); // 100 1 ...

  7. JS中的块级作用域,var、let、const三者的区别

    1. 块作用域{ } <script type="text/javascript"> { var a = 1; console.log(a); // 1 } conso ...

  8. javascript---lat const var 的区别

    首先,ECMAScript和JavaScript关系:      ECMAScript是一个国际通过的标准化脚本语言.JavaScript由ECMAScript和DOM.BOM三者组成.可以简单理解为 ...

  9. var let const

    你真的永远都不用var了吗? javascript的一些争论已经浮现出了一些经典的案例,因此,es6的拥护者你们应该讲var遗忘吗?这篇博客将带你走进被遗忘的角落 首先举例反对者的几个观点: 1.如果 ...

随机推荐

  1. MVCC的一些理解

    link 一.MVCC简介 MVCC (Multiversion Concurrency Control),即多版本并发控制技术,它使得大部分支持行锁的事务引擎,不再单纯的使用行锁来进行数据库的并发控 ...

  2. 解决NTPD漏洞,升级Ntpd版本

    关于解决漏洞的问题我就不详说了,主要就是升级版本.这里我们就直接简单记录下步骤: 1.升级 使用root用户登录系统进入到/home/guankong ,上传ntp-4.2.8p9-1.el6.x86 ...

  3. Visual studio code离线安装插件

    Visual studio code离线安装插件 公司研发区不能连接公网,使用Visual studio code(vsc)写Golang代码需要安装Go插件,下面介绍下,vsc离线安装插件的步骤.以 ...

  4. QT中几个函数的使用方法

    一.把字符串转换成整形demo1:QString str = "FF";bool ok;int hex = str.toInt(&ok, 16); // hex == 25 ...

  5. Tomcat在windows系统中的防火墙设置

    在Win7下安装Tomcat后,其他机器无法访问到Tomcat服务,需要修改防火墙设置. 控制面板->window防火墙->允许程序通过Windows防火墙通信 将Tomcat目录下\bi ...

  6. python利用pysvn发布lib的小程序

    背景: 本人在公司的平台部门工作,我们部门写出的代码都是编译成.a文件,定期发布版本到各个产品,现在老大要求我负责每周向公司的某个产品发布lib.发布lib的步骤大概就是自动化的兄弟给我提供一个归档的 ...

  7. Scrapy1.4爬取笑话网站数据,Python3.5+Django2.0构建笑话应用

    Part1:需求简要描述 1.抓取http://www.jokeji.cn网站的笑话 2.以瀑布流方式显示 Part2:安装爬虫框架Scrapy1.4 1. 安装Scrapy1.4 E:\django ...

  8. 第十六章:Python の Web开发基础(三) jQuery与Ajax

    本課主題 jQuery 介绍 Ajax 介绍 jQuery 介绍 选择器 jQuery 的选择器分不同的种类,主要目的是用来查找目标的 HTML 标签,方便对目标标签进行操作,比如找到 <li& ...

  9. 内核,配置WinDbg,调试操作系统(双机调试)

    配置WinDbg,调试操作系统(双机调试) PS: 设置双机调试之前,请先安装虚拟机,并且安装好XP系统.这里不做演示.直接设置. 一丶WinDbg的设置 1) 配置WinDbg的环境,在path变量 ...

  10. Java学习笔记16---抽象类与接口的浅显理解

    抽象类是由abstract修饰的类,定义方式如public abstract class A{...}. 接口由interface修饰,定义方式如public interface B{...}. 抽象 ...