1.let.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <script>
  11. // 变量声明 通过var来实现
  12. var a = 10;
  13. console.log(a);
  14. // ES6 提出两个新的创建变量的关键字 keyword
  15. // 分别为 let 和 const
  16. let age = 18;
  17. console.log(age);
  18. // 对比var : 1 var 声明变量 有提升过程(会给提升的变量初始值 = undefined) 而let没有
  19. console.log(b); // undefined
  20. var b;
  21. // let 在定义之前 去使用变量,会报错
  22. // console.log(c); // 报错 Uncaught ReferenceError: Cannot access 'c' before initialization
  23. let c;
  24. // console.log(d); //访问不存在的变量 Uncaught ReferenceError: d is not defined
  25. // 实际工作中,var定义的变量 具有提升的特性。但是实践告诉我们 这个特性并不是好的事情。因为会降低代码的可读性,错误的使用会导致一些意外不可预知的错误。
  26. // 实际开发时,代码的实现 要 A:完成特定功能 B;让人看懂你的代码(维护)
  27. // 先定义,再使用
  28. // 先赋值,再运算
  29. // 对比var : 2 var 可以重复定义同一变量;而let不可
  30. var e;
  31. var e;
  32. // 下面代码 会报错 Uncaught SyntaxError: Identifier 'f' has already been declared
  33. // let f;
  34. // let f;
  35. // 对比 var : 3 var 定义的变量只有两种作用域(全局作用域 以及 函数作用域(局部作用域))而 let 具有块级作用域
  36. // 在函数中var定义的变量具有函数作用域,只有在函数体中可以被有效的访问到,
  37. // 而不在任何函数中var定义的变量具有全局作用域,可以在任何位置被有效的访问到
  38. var g; // 全局变量
  39. function fn() {
  40. var h; // 局部变量
  41. }
  42. // let 定义的变量 具有自己的块级作用域;
  43. // 块:代码块 在js中使用 {} 代码代码块
  44. {
  45. var i; // 全局变量
  46. let j = 'j'; // 块级作用域,只有在它定义的代码块中可以被有效的访问到
  47. console.log(j);
  48. }
  49. console.log(i); // undefined
  50. // console.log(j); // 在代码块 外部使用let定义变量 会报错 Uncaught ReferenceError: j is not defined
  51. if (true) {
  52. let k = 'k';
  53. }
  54. // console.log(k);
  55. // 在循环中,通过let定义的变量 同样具有块级作用域,但是与其他的块有区别
  56. // 下面代码 会循环3次,因此会产生3个代码块,也就说是 创建3个块级作用域,里面都会定义属于自己作用域的变量l
  57. for (let l = 0; l < 3; l++) {
  58. console.log(l);
  59. }
  60. // 下面函数中代码 由于函数体 也是用{}包裹的 因此 即属于块级作用域 也是函数作用域
  61. // function foo() {
  62. // var aa;
  63. // let aa;
  64. // }
  65. // foo();
  66. // var bb;
  67. // let bb;
  68. {
  69. hh = 10; // 在let定义变量之前的区域,不准许对该变量进行任何的操作。
  70. let hh;
  71. }
  72. </script>
  73. </body>
  74. </html>