ES6中的let与const

今天学习了ES6新增语法中的let与const命令的基本用法和一些特性,这篇博客用以对这两个命令的用法的一些总结。

在写let与const之前,首先要明白JS中的块级作用域。

一、JS中的块级作用域

  • ES6之前JS不支持块级作用域
    在ES6之前,JS是没有块级作用域这个概念的,只有全局作用域和函数内的局部作用域,比如在下面的代码中,for循环内定义的变量 i 实际上处于全局作用域中,所以在循环的外部是可以调用变量 i 的,这个 i 就有可能造成变量的污染
for(var i = 0; i < 5; i++){
}
console.log(i) // 5
  • 出现
    ES6的扩展为JS带来了新的变量声明方法,其中的let从实际上为JS新增了块级作用域的功能,使用该命令声明的变量只能在let命令所在的代码块中使用。

二、let命令

  • 与var命令的对比,以及let的一些特性
    1.let声明的变量只能在let命令所在代码区块中生效
// var
for(var i = 0; i < 5; i++){
}
console.log(i) // 5
// let
for(let i = 0; i < 5; i++){      // 这个i只能在这个for循环内使用
}
console.log(i) // 报错:i is not defined

2.let不存在变量提升

console.log(a)   // undefined
console.log(b)   // 报错:b未定义
var a = 1
let b = 1

3.因为let不存在变量提升,所以会有暂时性死区
什么是暂时性死区?
暂时性死区就是在这个区块中的变量未声明之前,对该区块中的变量的一切调用都会报错

a = 1
let a = 2  
// 以上代码会报错
a = 1
{let a = 2}
// 以上代码不会报错,因为声明变量的区块不一  

4.let声明的变量不能重复进行声明

let a = 1
var a = 1 // 报错 a已经被声明
const a = 1 // 报错 a已经被声明
  • let的使用实例
    因为let命令的出现,所以JS有了块级作用域,原本因为作用域问题导致的闭包问题也可以使用let吗,清零进行解决,比如以下经典闭包代码会一次性输出5个5,但需求是输出01234
for(var i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(i)
    }, 1000)
}

1.ES6之前的解决办法,使用一个变量对 i 的值进行暂存

for(var i = 0; i < 5; i++){
    (function(e){
        setTimeout(function(){
            console.log(e)
        }, 1000)        
    })(i)
}

2.出现let后的解决办法

for(let i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(i)
    }, 1000)
}
  • 关于for循环作用域的问题
    在for循环中实际上是有两个作用域的,条件设置的圆括号()内是一个父作用域,而代码块大括号{}中是一个子作用域,比如下面代码可以进行区分
for(let i = 0; i < 5; i++){
    let i = 8
    console.log(i)
}
// 输出结果是5个8

三、const命令

与let命令的用法类似,const命令也是用来声明一个变量,同时也只能在声明的块级作用域中进行使用,但不同的是const声明变量后,这个变量就变成了一个不能进行更改的常量。

  • const命令的特性
    1.声明的时候就必须马上初始化,否则报错
    如下代码:
const a;   // 报错  未初始化
const a = 1 // 不报错

2.声明的值不能改变,不能重新进行赋值

const a = 1
a = 2         // 报错   a已经被声明过

3.与let一样不存在变量提升

console.log(a)  // 报错 a未声明
const a = 1     

4.与let一样不可重复进行声明

const a = 1
var a = 1 // 报错 a已经被声明
let a = 1 // 报错 a已经被声明
  • 注意点
    1.const声明的变量的值不能改变实质上是变量指向的内存地址不能改变,因此会有以下两种情况
    • 值为简单类型:
      值保存在变量指向的内存地址上。
    • 值为复杂类型:
      例如对象:值也保存在变量指向的内存地址上,但是不同的是,这个内存地址实际上是一个指针,指向这个对象,那么在实际上是可以对这个对象内的属性进行赋值的,如下代码:
    const a = {b:1}
    console.log(a.b)  // 1
    a.b = 2
    console.log(a.b)  // 2

2.针对上面的问题,如果想让对象的属性和值绝对不变,可以使用Object.freeze方法

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

推荐阅读更多精彩内容