ES6新增命令:let

刺骨的言语ヽ痛彻心扉 2022-03-02 09:50 344阅读 0赞

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声明变量回顾

  1. <script type="text/javascript">
  2. var a = 1;
  3. console.log(a); // 1
  4. b = 2;
  5. console.log(b); // 2
  6. console.log(c); //undefined
  7. var c = 3;
  8. var a = 4;
  9. function showA(){
  10. console.log(a);
  11. d = 5;
  12. console.log(d);
  13. }
  14. showA(); // 4,5
  15. console.log(d); //5
  16. function showB(){
  17. console.log(b);
  18. var e = 6;
  19. console.log(e);
  20. }
  21. showB(); //2,6
  22. console.log(e); //报错
  23. </script>

part 2:let声明的变量时局部变量

  1. <script type="text/javascript">
  2. {
  3. var a = 1;
  4. let b = 2;
  5. }
  6. console.log(a); //1
  7. console.log(b); //报错
  8. </script>

part 3:for循环中使用var定义循环参数,该参数会变味全局参数

  1. <script type="text/javascript">
  2. var a = [];
  3. for(var i = 0; i < 10; i++){
  4. a[i] = function(){
  5. console.log(i);
  6. }
  7. }
  8. a[6](); //10
  9. </script>

part 4:for循环中使用let定义循环参数,改参数是块级作用域内的参数

  1. <script type="text/javascript">
  2. for(let i = 0; i < 10; i++){
  3. }
  4. console.log(i); //报错
  5. </script>

part 5:对比part3,用var定义循环变量

  1. <script type="text/javascript">
  2. var a = [];
  3. for(let i = 0; i < 10; i++){
  4. a[i] = function(){
  5. console.log(i);
  6. }
  7. }
  8. a[6](); // 6
  9. </script>

part 6:for循环中,外层是一个父作用域,里面的每层循环是一个自作用域,互不影响

  1. <script type="text/javascript">
  2. for(let i = 0; i < 3; i++){
  3. let i = 'abc';
  4. console.log(i); //abc,abc,abc
  5. }
  6. </script>

part 7:let声明的变量不允许变量提升

  1. <script type="text/javascript">
  2. console.log(a); //报错
  3. let a = 1;
  4. </script>

part 8:块级作用域中用let声明的变量会形成【暂时性死区】,即使在全局声明了该变量,也不能在let声明前调用

  1. <script type="text/javascript">
  2. let a = 1;
  3. console.log(a); //1
  4. {
  5. a = 2;
  6. let a;
  7. console.log(a); // 报错
  8. }
  9. </script>

part 9:let声明的变量不允许重复声明

  1. <script type="text/javascript">
  2. let a = 1;
  3. console.log(a); // 1
  4. let a = 2;
  5. console.log(a); //报错
  6. </script>

part 10:不允许在函数的一级作用域内使用let重新声明参数

  1. <script type="text/javascript">
  2. function showName(name){
  3. let name = 'sunny';
  4. console.log(name);
  5. }
  6. showName('lily'); // 报错
  7. </script>

part 11:可以在函数的二级或三级等作用域内使用let重新声明参数,且与一级作用域中的参数互不影响

  1. <script type="text/javascript">
  2. function showName(name){
  3. console.log(name);
  4. {
  5. let name = 'sunny';
  6. console.log(name);
  7. }
  8. }
  9. showName('lily'); //lily,sunny
  10. </script>

发表评论

表情:
评论列表 (有 0 条评论,344人围观)

还没有评论,来说两句吧...

相关阅读

    相关 浅谈ES6 let命令

               对let命令的理解 (a)基本用法介绍 ![这里写图片描述][20160413152025991]      ES6新增了let命令,用来声明变

    相关 es6 let 和 const 命令

    一.let 1.作用域 在javascript中只有全局作用域和函数作用域,并不存在块级作用域。这样,在使用时就会出现一些问题。 下面我们先来举例说明let块级作用