JavaScript中,var、let和const的区别

ES6建议不再使用var定义变量,而使用let定义变量,const定义常量。

无论是let还是const,它们均解决了JS中长久以来的变量定义的问题。

咱们先聊聊varlet的区别。

一、变量具有块级作用域,在代码块之外不可使用

使用var定义变量时,无论其实际声明位置在何处,都会被视为声明于所在函数的顶部 (如果声明不在任意函数内,则视为在全局作用域的顶部),使用if或者for等循环定义的变量,变量同样会被提升到if或for所在的函数顶部。

var关键字在if中定义变量

使用let定义变量时,该变量只能在当前块级作用域里使用,在外部访问会显示未定义

块级作用域(又被称为词法作用域)会在以下两种情况被创建:

  1. 在一个函数内部
  2. 在一个代码块(由一对花括号包裹,比如if、for、switch、while)内部
let关键字在if中定义变量

接下来我们看看在循环中使用的情况

如果我们在for循环中用var定义变量,在延迟后输出i,可以看到全部输出的都是3,这是由于i变量的定义被提升出去了,左边的代码等价于右边的代码

var关键字在for中定义变量

而在过去我们要解决这个问题只能通过 IIFE 来强制改变作用域去解决这个问题

通过IIFE解决循环中的变量问题

如果在for循环中使用let定义变量,变量所在的作用域是在循环体这个代码块内,因此在循环外就不能使用了。另外,for循环会对该变量做特殊处理,让每次循环使用的都是一个独立的循环变量。

let关键字在for中定义变量

二、变量的提升问题

var定义的变量先赋值再声明是没有任何问题的,因为里面会有变量提升的情况。

而用let定义的变量不会被提升,这里有个暂时性死区的概念

暂时性死区

使用 letconst 声明的变量,在到达声明处之前都是无法访问的,会被放置在JS社区称为暂时性死区( temporal dead zone ,TDZ )的区域内,试图访问会导致一个引用错误

虽然该名称并未在 ECMAScript 规范中被明确命名,但经常被用于描述 letconst 声明的变量为何在声明处之前无法被访问。

下面放一个先赋值再声明会直接报 Cannot access 'a' before initialization 的错误的例子

三、全局定义的变量不再作为属性添加到全局对象中

在全局使用var定义的变量会被挂载到全局也就是window对象中

而使用let定义的变量并不会被挂载到全局对象中

四、不可重复定义同名变量

var在重复定义同名变量的时候并不会报错,最终打印会是最后一个所赋的值

let重复定义同名变量会直接报 Identifier 'a' has already been declared 的错误


下面来聊聊const的使用

  1. constlet同样具有块级作用域,且声明不会被提升的特点。
  2. 使用const定义变量时,必须初始化

在过去只有var一个关键字,没有办法清晰的表明这个变量是否需要修改,而新增了letconst关键字后,可以使用let来声明可以被修改的变量,使用const来声明不会被修改的变量,而使用const声明的变量会被认为是常量( constant ),这样语义上会更加清晰。

如果我们尝试修改const定义的变量,会报Assignment to constant variable错误。

由于不可以被更改的特性,那么我们用const定义变量的时候就必须初始化,不然会报Missing initializer in const declaration的错误,而使用varlet的话,可以先声明后面需要的时候再赋值。


这对与开发有什么影响呢?

其实这里对我们的开发并没有什么影响,在后续的开发中我们均使用const来定义变量即可,当发现有变量需要修改的时候,再改为let
但我们还是得了解letvar的区别是什么,毕竟面试题就爱考这些。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容