饥人谷技术博客

ES6中的let与const

2017-03-18  本文已影响0人  大春春

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

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

一、JS中的块级作用域

for(var i = 0; i < 5; i++){
}
console.log(i) // 5

二、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已经被声明
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(let i = 0; i < 5; i++){
    let i = 8
    console.log(i)
}
// 输出结果是5个8

三、const命令

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

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已经被声明
    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
上一篇下一篇

猜你喜欢

热点阅读