ES6新增命令:let

61次阅读

共计 2236 个字符,预计需要花费 6 分钟才能阅读完成。

let 的介绍
let 是 ES6 新增的命令。作用:声明变量。类似于:var。与 var 的区别:使用 let 声明的变量,只在其所在的代码块内有效。
定义回顾
声明变量:可以用 var,也可以不用 var。是否允许变量提升:允许。是否允许重复声明同一个变量:允许。变量的作用域:全局作用域、函数作用域。在全局作用域中,无论是否使用 var,定义的变量都是全局变量。在函数作用域中,使用 var 定义函数局部变量,不使用 var 定义全局变量。全局变量全局可用,函数局部变量在函数内可用。代码块:用 {} 栝起来的代码片段。
基本语法
let 声明的变量,只在其所在其所在的代码块内有效。let 不存在变量提升。let 不允许重复声明。let 不允许在函数的一级作用域内重新声明参数。let 存在的块级作用域,它声明的这个变量或“绑定”这个区域,形成“暂时性死区”,使其不再受外部影响。就是说,一个变量,无论其在外部是否声明,只要在某个块级作用域内使用 let 重新声明了,那么在这个块级作用域内该变量在声明前是不可以使用的。
使用场景
for 循环的计数器 let 声明的循环变量 i 只在本轮循环有效,每一次循环的 i 都是一个新变量。特别的 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量 i 时,是在上一轮循环的基础上进行计算。另外,for 循环设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的自作用域。
代码片段
part 1:var 声明变量回顾
<script type=”text/javascript”>
var a = 1;
console.log(a); // 1
b = 2;
console.log(b); // 2
console.log(c); //undefined
var c = 3;
var a = 4;
function showA(){
console.log(a);
d = 5;
console.log(d);
}
showA(); // 4,5
console.log(d); //5
function showB(){
console.log(b);
var e = 6;
console.log(e);
}
showB(); //2,6
console.log(e); // 报错
</script>
part 2:let 声明的变量时局部变量
<script type=”text/javascript”>
{
var a = 1;
let b = 2;
}
console.log(a); //1
console.log(b); // 报错
</script>
part 3:for 循环中使用 var 定义循环参数,该参数会变味全局参数
<script type=”text/javascript”>
var a = [];
for(var i = 0; i < 10; i++){
a[i] = function(){
console.log(i);
}
}
a[6](); //10
</script>
part 4:for 循环中使用 let 定义循环参数,改参数是块级作用域内的参数
<script type=”text/javascript”>
for(let i = 0; i < 10; i++){

}
console.log(i); // 报错
</script>
part 5:对比 part3,用 var 定义循环变量
<script type=”text/javascript”>
var a = [];
for(let i = 0; i < 10; i++){
a[i] = function(){
console.log(i);
}
}
a[6](); // 6
</script>
part 6:for 循环中,外层是一个父作用域,里面的每层循环是一个自作用域,互不影响
<script type=”text/javascript”>
for(let i = 0; i < 3; i++){
let i = ‘abc’;
console.log(i); //abc,abc,abc
}
</script>
part 7:let 声明的变量不允许变量提升
<script type=”text/javascript”>
console.log(a); // 报错
let a = 1;
</script>
part 8:块级作用域中用 let 声明的变量会形成【暂时性死区】,即使在全局声明了该变量,也不能在 let 声明前调用
<script type=”text/javascript”>
let a = 1;
console.log(a); //1
{
a = 2;
let a;
console.log(a); // 报错
}
</script>
part 9:let 声明的变量不允许重复声明
<script type=”text/javascript”>
let a = 1;
console.log(a); // 1
let a = 2;
console.log(a); // 报错
</script>
part 10:不允许在函数的一级作用域内使用 let 重新声明参数
<script type=”text/javascript”>
function showName(name){
let name = ‘sunny’;
console.log(name);
}
showName(‘lily’); // 报错
</script>
part 11:可以在函数的二级或三级等作用域内使用 let 重新声明参数,且与一级作用域中的参数互不影响
<script type=”text/javascript”>
function showName(name){
console.log(name);
{
let name = ‘sunny’;
console.log(name);
}
}
showName(‘lily’); //lily,sunny
</script>

正文完
 0