let声明

Posted 2021-11-01 evilliu

 1 <script>
 2     /**
 3      * es6 let 练习
 4      * 生效范围：块级代码代码内。
 5      */
 6     // {
 7     //     let a=2;
 8     //     var c=2;
 9     // }
10     // console.log(c);//全局变量
11     // console.log(a);//undefined
12 //    for循环内适用let 变量作用范围只在for循环体内
13 //     for(let i=0;i<2;i++){
14 //         console.log(i)
15 //     }
16 //     console.log(i);//undefined
17 //在for循环里 let变量 保存当时的值 不同于var
18     let arr=[];
19     for(let i=0;i<4;i++){
20         arr[i]= ()=>{
21             console.log(i);
22         }
23     }
24     arr[0]();//0
25     arr[1]();//1
26     let arrvar=[];
27     for(var i=0;i<4;i++){
28         arrvar[i]=()=>{
29             console.log(i)
30         }
31     }
32     arr[0]();//都是0
33     arr[1]();//1
34     /**
35      * 1、在for循环中，let声明的变量都是新的变量，都在本轮有效，在新一轮都是新的值。在每次循环中js引擎都会记录上一次的变量值，以便计算本轮的值。
36      *
37      * @type {NodeListOf<htmlElementTagNameMap[string]>}
38      */
39     let btns=document.querySelectorAll("button");
40     for(let i=0;i<btns.length;i++){
41         btns[i].addEventListener(‘click‘,ev => {//注意let声明的i是每次循环的i都是新的变量。所有在事件触发的时候i的值 是当时循环的值。而不是最后的值。
42             alert(i);
43         })
44     }
45     let divs=document.querySelectorAll("div");
46     for(var  i=0;i<divs.length;i++){
47         divs[i].addEventListener(‘click‘,ev => {//需要注意 在调用事件函数的的i已经是divs.lenth的值。因为此时i已经不满足循环条件
48             alert(i);
49         })
50     }
51     /**
52      * 1、在循环变量中是父作用域而下面的块级标签是子作用域。
53      */
54     for(let i=0;i<5;i++){
55         let i=‘cc‘;//注意此时的是重新声明i变量！
56         console.log(i);
57     }
58     /**
59      * var声明的变量都是都有变量提升的，在调用未声明（var）的变量的时候，为undefined
60      * let 不存在声明变量提升，在调用未声明的变量的时候，会报错
61      */
62     console.log(k);
63     var k;
64     console.log(m);
65     let m=2;
66 </script>