ES6-let-难点

最新推荐文章于 2024-09-27 15:27:45 发布
最新推荐文章于 2024-09-27 15:27:45 发布
阅读量201 收藏
点赞数
分类专栏： ECMAScript6-11 文章标签： es6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47295886/article/details/127041271
版权

输出3个10 ：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>let-var</title>
</head>
<body>

	<script>

		var a = [];
		for (var i = 0; i < 10; i++) {
			a[i] = function () {
				console.log(i);
			};
		}
		a[1](); // 10
		a[2](); // 10
				
		a[9](); // 10
	</script>
</body>
</html>

原因：var是全局的

	<script>

		var a =10
		var a =12
		var a =11
		console.log(a)//11

	</script>

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

	<script>

		var a = [];
		var i = 0
			a[i] = function () {
				console.log(i);
			};
		var i = 1
			a[i] = function () {
				console.log(i);
			};
		var i = 2
			a[i] = function () {
				console.log(i);
			};
		var i = 3
			a[i] = function () {
				console.log(i);
			};
		var i = 4
			a[i] = function () {
				console.log(i);
			};
		var i = 5
			a[i] = function () {
				console.log(i);
			};
		var i = 6
			a[i] = function () {
				console.log(i);
			};
		var i = 7
			a[i] = function () {
				console.log(i);
			};
		var i = 8
			a[i] = function () {
				console.log(i);
			};
		var i = 9
			a[i] = function () {
				console.log(i);//i是全局的i
			};
		var i = 10
			a[i] = function () {
				console.log(i);
			};
		
			console.log(i);//10

		
		a[1](); // 10
		a[2](); // 10
				
		a[9](); // 10
	</script>

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

	<script>
		var a = [];
		for (let i = 0; i < 10; i++) {
			a[i] = function () {
				console.log(i);
			};
		}
		a[1]()//1
		a[6](); // 6
	</script>

等价于：

	<script>
		var a = [];
		{let i = 0 
			{
				a[i] = function () {
					console.log(i);//只是当前的i
				};
			}
		}
		{let i = 1 
			{
				a[i] = function () {
					console.log(i);
				};
			}
		}
		{let i = 2
			{
				a[i] = function () {
					console.log(i);
				};
			}
		}
		a[1]()//1
		a[2](); // 2
	</script>

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


<script>
    for (let i = 0; i < 3; i++) {
 	 	let i = '33';
  		console.log(i);
	}
	 33
	// 33
	// 33	
</script>

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

	<script>
		var i=1
	{	console.log(i)
		let i=12}
		
	</script>

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

	<script>		

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

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

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

<script>
var tmp = new Date();
function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}
f(); // undefined
</script>

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

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

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

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

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

<script>
	{{{{
  let insane = 'Hello World';
  {let insane = 'Hello World';}
}}}};
</script>

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

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

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

¡Venceremo
关注
专栏目录
02-JS、ES6个人课堂详细笔记
10-13
个人课堂笔记，重点难点，使用简单通俗的代码解释复杂的概念。 内容概要：JS中的数据类型及区别、三种数据类型检测方法、var && let && const区别、垃圾回收机制、作用域和作用域链、闭包特性作用场景、this指向问题...
网易高级前端工程师跟着他每周重点攻克一个前端面试重难点
08-10
6. **ES6及后续版本新特性**：包括let/const、解构赋值、模板字符串、箭头函数、类和模块等，这些都是现代JavaScript开发的必备知识。 7. **DOM操作**：学习如何通过JavaScript操作DOM元素，包括添加、删除、查找和...
C21-PROJECTS
03-27
5. **ES6及后续版本**：ECMAScript 6（ES6）引入了许多新特性，如let和const声明变量、解构赋值、箭头函数、模板字符串等。后续版本如ES7、ES8等持续添加新功能。 6. **模块系统**：ES6引入了模块系统，允许通过...
JavaScript-Studies
05-28
在JavaScript的学习中，首先需要理解基础语法，包括变量声明（var、let、const）、数据类型（原始类型如字符串、数字、布尔值，以及对象类型）、运算符（算术、比较、逻辑、三元等）、控制流（条件语句、循环、...
art109-project2
04-02
这包括变量声明（`var`, `let`, `const`），数据类型（如字符串、数字、布尔值、数组、对象），以及控制流程（条件语句如`if...else`，循环结构如`for`和`while`）。此外，函数是JavaScript中的重要概念，它们允许...
ES6新标准下JS异步编程Promise解读
m0_74157361的博客
09-20 1426
ES5及以下，要实现复杂的异步编程，需要大量运用回调函数，而每个回调函数中的执行正确与否无法及时判断，让你只能猜测或分析找问题，这将造成大量无法理解的情况出现。 ES6新标准引入Promise对上述问题进行解决，它的核心思想，是将上一次函数执行返回一个Promise对象，明确指示代码是否成功执行，则你可以基于此成功与否判断，以链式编程方式将复杂嵌套回调函数转换为简单流程化式的形式完成目标任务。
ES6 — Promise基础用法（resolve、reject、then、catch,all）
weixin_55932347的博客
09-24 429
创建一个 Promise： 使用 new Promise() 创建一个新的 Promise 对象，并传入一个函数作为参数。它返回一个新的 Promise 对象，当所有的 Promise 实例都成功时，这个新的 Promise 对象才会成功；如果有任何一个 Promise 实例失败，那么这个新的 Promise 对象也会失败。它返回一个新的 Promise 对象，当第一个 Promise 实例完成时，这个新的 Promise 对象就会完成，无论其是成功还是失败。它相当于只传入失败回调函数的 then 方法。
ES6中迭代器与生成器知识浅析
m0_74157361的博客
09-24 881
ES5及以下版本对JS几种集合，要存取数据一般需要用循环语句来遍历，就要初始化一个或多个变量来记录每一次循环在数据集合中的位置或数据值。这里容易出现超出边界问题，造成程序出错。另外，对于多次循环也需要跟踪理清各个变量关系及存续问题，造成问题复杂化和不安全性。 ES6开始引入迭代器，它可以极大的简化数据操作，不需要额外的临时变量，本身带有内部查找及循环机制。对于程序员来说，只需要取用即可，取用一次，集合内部迭代器自动更新，并将指针指向下一个数据，完全不用操心遍历循环设计及控制问题。
ES6新标准下关于数组的几个实用改进功能介绍
m0_74157361的博客
09-27 987
ES6新标准下关于数组的几个实用改进功能介绍，包括主要有四个新方法，find()方法和findIndex()方法可以用于在数组中查找任意值，解决了ES5中只能通过遍历来查找序号及值;fill()方法和copyWithin()方法主要用来对数组进行分解式的复制。
ES6中JS类实现的解读
m0_74157361的博客
09-23 1305
在ES5及以前版本，是没有真正意义上类的概念，只是通过构造函数来模拟类的运用。尽管JS脚本语言是一门解释型弱语言，对类的需求意义不大，但ES6还是引入类的实现，让JS真正够上面向对象编程门槛，尽管对类的功能实现还不全面、彻底，但基本面向对象编程功能具有了。
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4439
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计
央顺科技官方博客
09-24 837
机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。
vue上传预览CAD文件
只会写bug
09-24 558
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
m0_59480939的博客
09-25 218
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
vue单点登录异步执行请求https://xxx.com获取并处理数据
最新发布
m0_65360496的博客
09-27 138
vue单点登录异步执行请求https://xxx.com获取并处理数据
方法论大师 JavaScript 版本
PlayerYK的专栏
09-25 196
无论什么行业、什么问题，都会有一群人擅长通过简单的拼凑和归纳，炮制出一套“高深”的方法论。这些方法论通常看似逻辑严密、层层递进，实则全是空洞的概念堆砌，毫无实质作用。最搞笑的是，他们居然能为任何事物总结出一个“公式”，让人乍一看觉得有理，仔细思考后发现不过是披着华丽外衣的废话。是不是开始觉得这些“方法论大师”其实并没有提供真正有价值的建议？如果你也曾被这些空洞的概念忽悠过，那么来吧，我为你提供一个...
第 28 章 Javascript错误处理与调试
weixin_44010641的博客
09-23 1368
JavaScript 在错误处理调试上一直是它的软肋，如果脚本出错，给出的提示经常也让人摸不着头脑。ECMAScript 第 3 版为了解决这个问题引入了 try…catch 和 throw 语句以及一些错误类型，让开发人员更加适时的处理错误。
nodejs fs 模块的简介与相关案例
正是修行时，正是修行时，正式修行时...
09-27 185
nodejs fs 模块的简介与相关案例
计算机毕业设计 基于Python的荣誉证书管理系统 Django+Vue 前后端分离 附源码 讲解 文档
weixin_19164791635
09-22 1862
基于Python的荣誉证书管理系统，旨在提高学校荣誉证书管理效率，实现数字化存储与查询，涵盖管理员、学生、教师三大角色，具备报表统计、个人中心、证书分类等功能，助力教育信息化发展。
es6-promise依赖下载
06-09
ES6-Promise是一个用于在JavaScript中实现Promise功能的库，它为浏览器和Node.js环境提供了对Promise规范的支持，特别适用于那些不直接支持ES6 Promise特性的环境。它解决了早期浏览器对Promise的不完全支持问题。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值