【ES6】—let 声明方式

这篇具有很好参考价值的文章主要介绍了【ES6】—let 声明方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、不属于顶层对象window

  1. let 关键字声明的变量,不会挂载到window的属性
var a = 5
console.log(a)
console.log(window.a)
// 5
// 5
// 变量a 被挂载到window属性上了 , a = window.a

let b = 6
console.log(b)
console.log(window.b)
// 6 
// undefined

小节:
var 声明的变量,会挂载到window的属性,容易造成全局变量污染

二、不允许重复声明

  1. let 关键字 不可以声明相同的变量,在运行阶段直接报错
var a = 5
var a = 6
console.log(a)
// 6 

let b = 7
let b = 8
console.log(b)
// Uncaught SyntaxError: Identifier 'b' has already been declared
// b已经声明过了,不允许重复声明

小节:
var 可以声明相同变量,后声明的变量的值会覆盖前面声明的变量的值

三、不存在变量提升

  1. let 关键字不会把变量声明,放到代码的最前面,只会再执行时声明
console.log(a)
var a = 6
// 等同于
var a 
console.log(a)
a = 6
// undefined


console.log(b)
// 报错, 没有声明
let b = 7

小节:
使用 var 关键字声明的变量,无论代码在何处,都会把变量声明放到代码的最前面

四、暂时性死区

  1. 暂时性死区:先使用变量,再使用let关键字声明变量,就会出现暂时性死区,因为没有先声明就赋值了
var a = 5
if (true) {
    a = 6
    let a
}
// Uncaught ReferenceError: Cannot access 'a' before initialization

小节:
a 首先是全局变量,然后 给a 赋值,再使用let 关键字 声明变量 a, 这时候a 变成了局部变量,局部变量 a 先被使用了,再声明就会出现暂时性死区

  1. 隐蔽的暂时性死区
// 给参数设置默认值
function foo (a = b, b =2) {
	console.log(a, b)
}
foo()
// Uncaught ReferenceError: Cannot access 'b' before initialization
// b 再声明之前,你不能使用它
// a = b, b =2  因为代码从左往右执行, a = b, 表示把b的值赋给a, 但是b现在还没有声明和赋值,所以就出现了暂时性死区
  1. 改造后
// 给参数设置默认值
function foo (a = 2, b = a) {
	console.log(a, b)
}
foo()
// 2 2
// a = 2, b = a , 先声明了a 并赋值,再把a的值赋给b ,是没有问题的

小节:
局部变量先声明,再赋值,就不会出现暂时性死区

五、块级作用域

  1. var 声明的变量只有全局作用域和函数作用域,没有块级作用域, 所以 var 声明变量再任何地方都可以使用
for (var i =0; i< 3; i++) {
    console.log('循环内:' + i)
}
console.log('循环外', + i)
// 循环内:0
// 循环内:1
// 循环内:2
// 循环外 3
  1. 块级作用域: 指的是大括号{}里面,使用let关键字 声明的变量,只能在大括号里面使用,大括号外无法使用
    把 var 改成 let
for (let i =0; i< 3; i++) {
    console.log('循环内:' + i)
}
console.log('循环外', + i)
// 循环内:0
// 循环内:1
// 循环内:2
// Uncaught ReferenceError: i is not defined , i没有声明
  1. var 没有块级作用域,示例2
if (false) {
	var a = 5
}
console.log(a)
// undefined

小节:
因为 var 没有块级作用域,加上var 可以变量提升, 所以代码等同于

var a 
if (false) {
	a = 5
}
console.log(a)
// undefined

把 var 改造成let

if (false) {
	let a = 5
}
console.log(a)
// Uncaught ReferenceError: a is not defined
// a 因为大括号使用let关键声明,所以有块级作用域,大括号外无法使用
  1. ES6 中使用let 关键字声明的变量 所产生块级作用域,必须要有大括号,不能省略, 否则报错
if(true) let a =5
// Uncaught SyntaxError: Lexical declaration cannot appear in a single-statement context

优化后

if(true){
    let a =5
}
  1. 常见面试题
for (var i =0; i < 3 ; i++) {
	setTimeout(function (){
		console.log(i)
	})
}
// 打印3 个 3

因为遇到setTimeout是异步任务,会先放入事件处理器中,等待运行栈的同步任务执行完成之后,再把异步任务放入任务队列中,再从任务队列中一个个放入运行栈中执行
小节:每个定时器执行时,都是再for循环之后取值,所以打印3个3

  1. 通过闭包实现定时器按顺序打印
for (var i = 0; i < 3 ; i++) {
	// 立即执行函数, 一次性使用
	(function(j){ // j 表示形参
		setTimeout(function (){
			console.log(j)
		})
	})(i) // i 表示实参
}

闭包: 有一个外部函数和内部函数,内部函数会调用外部函数的变量,这样就可以保证外部函数的变量的状态值不被释放,因为内部函数一直再引用着外部函数的值

  1. 通过let 关键字实现定时器按顺序打印
for (let i = 0; i < 3 ; i++) {
	setTimeout(function (){
		console.log(i)
	})
}

通过 babel在线工具 实现 ES6 语法转 ES5语法

var _loop = function _loop(i) {
	setTimeout(function (){
		console.log(i)
	})
}
for (var i = 0; i < 3; i++) {
	_loop(i);
}

小节:当使用let关键字声明的变量时,被定时器调用,转换为ES5语法时,自动的转换为闭包的形式,保留i循环的每一个的状态值不被释放文章来源地址https://www.toymoban.com/news/detail-664786.html

到了这里,关于【ES6】—let 声明方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ES6如何声明一个类?类如何继承?

    引言 在ES6(ECMAScript 2015)中,引入了类(class)的概念,使得JavaScript的面向对象编程更加直观和易于理解。类提供了一种结构化的方式来定义对象的属性和方法,并且支持继承。在本文中,我们将深入探讨如何在ES6中声明一个类以及如何实现类的继承。 1. 声明一个类 在ES6中

    2024年02月08日
    浏览(30)
  • ES6中let和const关键字与var关键字之间的区别?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月09日
    浏览(55)
  • 【JavaScript】数组方法 (ES6)

    arr.find(callback) 用于获取第 1 个符合要求的元素: callback : (item, index, arr) = boolean item -当前值、 index -当前索引、 arr -当前数组 返回值: callback 第一次返回 true 的对应 item ;如果没有符合的元素,则返回 undefined arr.findIndex(callback) 用于获取第 1 个符合要求的元素的下标: cal

    2024年02月14日
    浏览(59)
  • JavaScript ES6实现继承

    1 对象的方法补充 2 原型继承关系图 3 class方式定义类 4 extends实现继承 5 extends实现继承 6 多态概念的理 function 创建的名称如果开头是大写的,那这个创建的不是函数,是创建了类。 可以把class创建的类当做是function创建的类的一种语法糖。但是在直接使用的方面是有不同之处

    2024年02月16日
    浏览(48)
  • JavaScript 之 ES6 新特性

    在ES6中,模块化成为了JavaScript的标准特性。ES6模块化提供了一种更加优雅和可维护的方式来组织和管理JavaScript代码,可以有效地避免全局变量的污染和命名冲突的问题。以下是ES6模块化的一些主要特性: 导出(export): 可以通过 export 将一个变量、函数或类导出为一

    2024年02月07日
    浏览(49)
  • JavaScript Es6_3笔记

    了解构造函数原型对象的语法特征,掌握 JavaScript 中面向对象编程的实现方式,基于面向对象编程思想实现 DOM 操作的封装。 了解面向对象编程的一般特征 掌握基于构造函数原型对象的逻辑封装 掌握基于原型对象实现的继承 理解什么原型链及其作用 能够处理程序异常提升程

    2024年02月11日
    浏览(51)
  • 【ES6】JavaScript中的Symbol

    Symbol是JavaScript中的一种特殊的、不可变的、不可枚举的数据类型。它通常用于表示一个唯一的标识符,可以作为对象的属性键,确保对象的属性键的唯一性和不可变性。 Symbol.for()是Symbol的一个方法,它用于创建一个已经注册的Symbol对象。当使用Symbol.for()创建Symbol对象时,会

    2024年02月10日
    浏览(45)
  • JavaScript版本ES5/ES6及后续版本

    Brendan Eich在短短10天内创建了JavaScript的第一个版本。它被称为摩卡,但已经具备了现代JavaScript的许多基本特性! 为了吸引Java开发人员,Mocha先是更改为LiveScript,然后又更改为JavaScript然而,JavaScript与Java几乎没有任何关系; 微软推出了IE,从网景复制JavaScript,并称之为JScript; 由

    2024年02月13日
    浏览(48)
  • JavaScript:ES6中类与继承

    在JavaScript编程中,ES6引入了一种更现代、更清晰的方式来定义对象和实现继承,那就是通过类和继承机制。本文将以通俗易懂的方式解释ES6中类与继承的概念,帮助你更好地理解和应用这些特性。 1. 类的创建与使用 类是一种模板,用于创建对象。在ES6中,我们可以使用 cl

    2024年02月13日
    浏览(44)
  • JavaScript之ES6高级语法(一)

    本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习。 今天学习的主要是关于ES6新语法知识的理解和应用 栈负责存放简单数据类型,堆负责存放复杂数据类型,但是复杂数据类型会把内容存在

    2024年02月09日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包