• ES6-let-难点

    输出3个10 ：

    1. html>
    2. <html lang="en">
    3. <head>
    4. 	<meta charset="UTF-8">
    5. 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 	<title>let-vartitle>
    7. head>
    8. <body>
    9.  
    10. 	<script>
    11.  
    12. 		var a = [];
    13. 		for (var i = 0; i < 10; i++) {
    14. 			a[i] = function () {
    15. 				console.log(i);
    16. 			};
    17. 		}
    18. 		a[1](); // 10
    19. 		a[2](); // 10
    20. 				
    21. 		a[9](); // 10
    22. 	script>
    23. body>
    24. html>

    原因：var是全局的

    1.

    上述的等价于：var变量提升

    1. 	<script>
    2.  
    3. 		var a = [];
    4. 		var i = 0
    5. 			a[i] = function () {
    6. 				console.log(i);
    7. 			};
    8. 		var i = 1
    9. 			a[i] = function () {
    10. 				console.log(i);
    11. 			};
    12. 		var i = 2
    13. 			a[i] = function () {
    14. 				console.log(i);
    15. 			};
    16. 		var i = 3
    17. 			a[i] = function () {
    18. 				console.log(i);
    19. 			};
    20. 		var i = 4
    21. 			a[i] = function () {
    22. 				console.log(i);
    23. 			};
    24. 		var i = 5
    25. 			a[i] = function () {
    26. 				console.log(i);
    27. 			};
    28. 		var i = 6
    29. 			a[i] = function () {
    30. 				console.log(i);
    31. 			};
    32. 		var i = 7
    33. 			a[i] = function () {
    34. 				console.log(i);
    35. 			};
    36. 		var i = 8
    37. 			a[i] = function () {
    38. 				console.log(i);
    39. 			};
    40. 		var i = 9
    41. 			a[i] = function () {
    42. 				console.log(i);//i是全局的i
    43. 			};
    44. 		var i = 10
    45. 			a[i] = function () {
    46. 				console.log(i);
    47. 			};
    48. 		
    49. 			console.log(i);//10
    50.  
    51. 		
    52. 		a[1](); // 10
    53. 		a[2](); // 10
    54. 				
    55. 		a[9](); // 10
    56. 	script>

    let-声明的变量仅在块级作用域内有效

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

    等价于：

    1. 	<script>
    2. 		var a = [];
    3. 		{let i = 0 
    4. 			{
    5. 				a[i] = function () {
    6. 					console.log(i);//只是当前的i
    7. 				};
    8. 			}
    9. 		}
    10. 		{let i = 1 
    11. 			{
    12. 				a[i] = function () {
    13. 					console.log(i);
    14. 				};
    15. 			}
    16. 		}
    17. 		{let i = 2
    18. 			{
    19. 				a[i] = function () {
    20. 					console.log(i);
    21. 				};
    22. 			}
    23. 		}
    24. 		a[1]()//1
    25. 		a[2](); // 2
    26. 	script>

    for循环有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域

    1.  
    2. <script>
    3.     for (let i = 0; i < 3; i++) {
    4.  	 	let i = '33';
    5.   		console.log(i);
    6. 	}
    7. 	 33
    8. 	// 33
    9. 	// 33	
    10. script>

    在代码块内，使用let命令声明变量之前，该变量都是不可用的{}内前面就算使用了var声明该变量也是不可以使用的。这在语法上，称为“暂时性死区”temporal dead zone，简称 TDZ）——前面不可以使用该变量作为全局变量。变量使用let命令声明，所以在声明之前，都属于x的“死区”，只要用到该变量就会报错。

    1. 	<script>
    2. 		var i=1
    3. 	{	console.log(i)
    4. 		let i=12}
    5. 		
    6. 	script>

     变量使用let命令声明，所以在声明之前，都属于变量的“死区”，只要用到该变量就会报错。但是变量不使用let声明，反而不会报错

    1. 	<script>		
    2.  
    3. 		if (true) {//代码块
    4. 					// TDZ开始——使用变量前且在代码块内就会出现TDZ暂时性死区
    5. 				tmp = 'abc'; // ReferenceError
    6. 				console.log(tmp); // ReferenceError
    7.                 let tmp; // TDZ结束
    8. 			
    9. 		}
    10. 		
    11. 	script>
    1. <script>
    2. 		
    3. 		if (true) {//代码块	
    4.                 let tmp; // TDZ结束
    5. 				console.log(tmp); // undefined--没有赋值
    6. 		}
    7. 	script>
    1. 	<script>
    2. 		
    3. 		if (true) {//代码块
    4. 					// TDZ开始——使用变量前且在代码块内就会出现TDZ暂时性死区
    5. 				
    6. 				let tmp; // TDZ结束
    7. 				tmp = 123;
    8. 				 console.log(tmp); // 123
    9. 		}
    10. 		
    11. 	script>

    暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

            函数f()执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

    外层代码块不受内层代码块的影响

    1. function f1() {
    2.   let n = 5;
    3.   if (true) {
    4.     let n = 10;
    5.   }
    6.   console.log(n); // 5
    7. }

    ES6 允许块级作用域的任意嵌套，上面代码使用了一个五层的块级作用域，每一层都是一个单独的作用域。第四层作用域无法读取第五层作用域的内部变量。 

    1. <script>
    2. {{{{
    3.   {let insane = 'Hello World'}
    4.   console.log(insane); // 报错//不在同一个块域内--变量不行
    5. }}}};
    6. script>

    内层作用域可以定义外层作用域的同名变量

    1. <script>
    2. 	{{{{
    3.   let insane = 'Hello World';
    4.   {let insane = 'Hello World';}
    5. }}}};
    6. script>

    ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

    1. 允许在块级作用域内声明函数。
    2. 函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
    3. 同时，函数声明还会提升到所在的块级作用域的头部。

    块级作用域内部，优先使用函数表达式，而不是函数声明 ,ES6 的块级作用域必须有大括号小括号不算,ES6 的块级作用域必须有大括号,不存在块级作用域，而let只能出现在当前作用域的顶层

  • 相关阅读:
    19.spring beanfactory与applicationcontext
    空域变换-直方图均衡化（直方图修正）
    pandas reindex 方法
    Facebook广告账户被封？最全防封及申诉指南
    栅极驱动器SCT52240STDR ，SCT51240TWBR
    SpringCloud学习笔记
    OSPF高级特性——控制OSPF路由信息
    华为机试 - 字符串重新排列
    杂记:数据库go,begin,end,for,after,instead of
    Pdfium.Net SDK 9.71.39 NEW-Pdfium.Net SDK
  • 原文地址：https://blog.csdn.net/weixin_47295886/article/details/127041271