4.ECMAScript6（ES6）- let和const的特征
2019-05-03 本文已影响0人
挤时间学习的阿龙
timg (1).jpg
变量提升问题
不允许重复声明
块级作用域
1、变量提升问题
（1）变量在提升之前就可以使用
<script type="text/javascript">
//变量在提升之前就可以使用
console.log(a)
var a=1
</script>
image.png
（2）变量在提升之前不可以使用
<script type="text/javascript">
//变量在提升之前不可以使用
console.log(b)
let b=2
</script>
image.png
2、不允许重复声明
（1）ES5变量可以重复声明
<script type="text/javascript">
//允许重复声明
function ceshi(){
var a=1
var a=5
console.log(a)
}
ceshi()
</script>
image.png
（2）ES6变量不可以重复声明
<script type="text/javascript">
//不允许重复声明
function ceshi(){
var a=1
let a=5 //注意这里,let是ES6的定义变量的操作方法
console.log(a)
}
ceshi()
</script>
<script type="text/javascript">
//不允许重复声明
function ceshi(){
var a=1
const a=5 //注意这里,const是ES6的定义变量的操作方法
console.log(a)
}
ceshi()
</script>
image.png
3、块级作用域
（1）ES6不允许函数内部声明参数
<script type="text/javascript">
function ceshi3(c){ //ceshi3函数内部声明一个参数c
let c //再函数中重新声明参数
console.log(c)
}
ceshi3()
</script>
image.png
（2）改成ES5 var就可以了
<script type="text/javascript">
function ceshi3(c){ //ceshi3函数内部声明一个参数c
var c //用var函数内重新声明参数
console.log(c)
}
ceshi3()
</script>
image.png
（3）声明块级作用域，就可以了（用{ }把let包起来，添加一个块级作用域）
<script type="text/javascript">
function ceshi3(c){ //ceshi3函数内部声明一个参数c
{let c //再函数中重新声明参数
console.log(c)}
}
ceshi3()
</script>
image.png
（4）ES6中有一个暂时性死区，只要块级作用域内部存在let命令，它声明的变量就会绑定当前区域，不再会受外部区域的影响
①ES5 函数外声明的变量，函数内部可以修改
<script type="text/javascript">
var a='beijing'
function ceshi4(){
var a='shanghai'
console.log(a)
}
ceshi4()
</script>
image.png
②ES6 函数外如果有该变量了，函数内部重新赋值，再使用let就会报错
<script type="text/javascript">
//暂时性死区
var a='beijing'
function ceshi4(){
a='shanghai'
let a
console.log(a)
}
ceshi4()
</script>
image.png
③ES6 函数外如果有该变量了， 函数内部let会绑定当前函数内部区域，不受外部影响
<script type="text/javascript">
//暂时性死区
var a='beijing'
function ceshi4(){
let a='shanghai'
console.log(a)
}
ceshi4()
</script>
image.png
