var和let的区别 

 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>let和var的区别</title>
 8 </head>
 9 <body>
10     <script>
11         /** 全局作用域
12          *
13          *  1. var 和 let 声明的变量在全局作用域中被定义时，两者非常相似
14          *  2. 但是，被let声明的变量不会作为全局对象window的属性，而被var声明的变量却可以
15         */
16         let bar = 'hehe';
17         var baz = 'lala';
18         console.log(window.bar);    // undefined
19         console.log(window.baz);    // 'able'
20 
21 
22         /** 函数作用域
23          *
24          *  1. var 和 let 在函数作用域中声明一个变量，两个变量的意义是相同的
25          *
26         */
27         function  aFun(){
28         let bar = 'hehe'; // 函数作用域中的变量
29         var baz = 'lala'; // 函数作用域中的变量
30     }
31 
32 
33         /** 块作用域
34          *
35          *  1. 在块作用域中两者的区别较为明显， let只在for()循环中可用，而 var是对于包围for循环的整个函数可用
36          *
37         */
38         function  aFun1(){
39         // i 对于for循环外的范围是不可见的(i is not defined)
40         for(let i = 1; i<5; i++){
41             //  i只有在这里是可见的
42         }
43         // i 对于for循环外的范围是不可见的(i is not defined)
44     }
45     function aFun2(){
46         // i 对于for循环外的范围是可见的
47         for(var i = 1;i<5; i++){
48             // i 在for 在整个函数体内都是可见的
49         }
50         // i 对于for循环外的范围是可见的
51     }
52 
53    
54     /** let 和var 重新声明
55      *
56      *  1. var允许在同一作用域中声明同名的变量，而let不可以
57      *  2. es6中还有一个声明变量的命令const，const和let都是在声明的块作用域中有效，
58      *     但是let声明的变量可变，值和类型都可以改变，没有限制。const声明额变量不能改变，所以，const一旦声明一个变量，就必须马上初始化，不能留到以后赋值
59      *
60     */
61     let me  = 'foo';
62     let me  = 'bar'; //SyntaxError: Identifier 'me' has already been declared
63 
64     var me = 'foo';
65     var me = 'bar'; //这里me被替代了，是可以重复声明的
66 
67 
68     const hehe; //报错，Missing initializer in const declaration
69     const a = 3;
70     a = 5;      //报错，Uncaught TypeError: Assignment to constant variable.
71    
72     </script>
73 </body>
74 </html>

 

posted @ 2021-10-27 15:03  TM_cc  阅读(193)  评论(0)    收藏  举报