【ES6】—let 声明方式

一、不属于顶层对象window

  1. let 关键字声明的变量,不会挂载到window的属性
var a = 5
console.log(a)
console.log(window.a)
// 5
// 5
// 变量a 被挂载到window属性上了 , a = window.alet 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
// undefinedconsole.log(b)
// 报错, 没有声明
let b = 7

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

四、暂时性死区

  1. 暂时性死区:先使用变量,再使用let关键字声明变量,就会出现暂时性死区,因为没有先声明就赋值了
var a = 5
if (true) {a = 6let 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循环的每一个的状态值不被释放

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/42108.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

原生js获取今天、昨天、近7天的时间(年月日时分秒)

有的时候我们需要将今天,昨天,近7天的时间(年月日时分秒)作为参数传递给后端,如下图: 那怎么生成这些时间呢?如下代码里,在methods里的toDay方法、yesterDay方法、weekDay方法分别用于生成今天、昨天和近7天的时间: <template><div class="box"&…

暂停Windows更新的方法,可延后数十万年,简单且有手就行

前言 近年来&#xff0c;Windows更新频率过快&#xff0c;最大只能暂停更新5周&#xff0c;导致用户不厌其烦&#xff0c;从网上找到的暂停更新的方法不是过于繁琐就是毫无效果&#xff0c;或者是暂停的时间有限&#xff0c;无意中发现一个大神的帖子可以通过修改注册表信息以达…

Java定时任务方案

一、Timer import java.util.Timer; import java.util.TimerTask;public class TimerExample {public static void main(String[] args) {Timer timer new Timer();TimerTask task new TimerTask() {Overridepublic void run() {System.out.println("Task executed at:…

uni-app自定义多环境配置,动态修改appid

背景 在企业级项目开发中&#xff0c;一般都会分为开发、测试、预发布、生产等多个环境&#xff0c;在工程化中使用不同的打包命令改变环境变量解决不同环境各种变量需要手动修改的问题&#xff0c;比如接口请求地址&#xff0c;不同环境的请求路径前缀都是不同的。在使用uni-…

Docker中为RabbitMQ安装rabbitmq_delayed_message_exchange延迟队列插件

1、前言 rabbitmq_delayed_message_exchange是一款向RabbitMQ添加延迟消息传递&#xff08;或计划消息传递&#xff09;的插件。 插件下载地址&#xff1a;https://www.rabbitmq.com/community-plugins.html 1、下载插件 首先需要确定我们当前使用的RabbitMQ的版本&#xff0c…

Android隐藏输入法

1、方法一(如果输入法在窗口上已经显示&#xff0c;则隐藏&#xff0c;反之则显示) InputMethodManager imm (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE); imm.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS); 2、方法二(view为接受软…

实践教程|基于 pytorch 实现模型剪枝

PyTorch剪枝方法详解&#xff0c;附详细代码。 一&#xff0c;剪枝分类 1.1&#xff0c;非结构化剪枝 1.2&#xff0c;结构化剪枝 1.3&#xff0c;本地与全局修剪 二&#xff0c;PyTorch 的剪枝 2.1&#xff0c;pytorch 剪枝工作原理 2.2&#xff0c;局部剪枝 2.3&#…

前端如何安全的渲染HTML字符串?

在现代的Web 应用中&#xff0c;动态生成和渲染 HTML 字符串是很常见的需求。然而&#xff0c;不正确地渲染HTML字符串可能会导致安全漏洞&#xff0c;例如跨站脚本攻击&#xff08;XSS&#xff09;。为了确保应用的安全性&#xff0c;我们需要采取一些措施来在安全的环境下渲染…

QString常用函数介绍

此篇博客核心介绍QT中的QString类型的常用函数&#xff0c;介绍到的函数均从帮助手册或其他博客中看到 QString 字符串类 Header: #include qmake: QT core 一、QString字符串转换 1、QString类字符串转换为整数 int toInt(bool *ok Q_NULLPTR, int base 10) cons…

Python 基础 -- Tutorial(二)

5、数据结构 本章更详细地描述了一些你已经学过的东西&#xff0c;并添加了一些新的东西。 5.1. 更多关于Lists 列表(list)数据类型有更多的方法。下面是列表对象的所有方法: list.append(x) 在列表末尾添加一项。相当于a[len(a):] [x]。 list.extend(iterable) 通过添加可…

如何使用SpringBoot 自定义转换器

&#x1f600;前言 本篇博文是关于SpringBoot 自定义转换器的使用&#xff0c;希望你能够喜欢&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的…

02-前端基础第二天-HTML5

01-HTML标签&#xff08;下&#xff09;导读 目标&#xff1a; 能够书写表格能够写出无序列表能够写出3~4个常用input表单类型能够写出下拉列表表单能够使用表单元素实现注册页面能够独立查阅W3C文档 目录&#xff1a; 表格标签列表标签表单标签综合案例查阅文档 02-表格标…

Nginx搭建本地服务器,无需购买服务器即可测试vue项目打包后的效果

一.前言 本文是在windows环境&#xff08;Linux环境下其实也大同小异&#xff09;下基于Nginx实现搭建本地服务器&#xff0c;手把手教你部署vue项目。 二.Nginx入门 1&#xff09;下载安装 进入Nginx官网下载&#xff0c;选择stable版本下的windows版本下载即可 2&#xff09;…

Ubuntu 20.04配置静态ip

ip配置文件 cd /etc/netplan配置 根据需求增加 # Let NetworkManager manage all devices on this system network:version: 2renderer: NetworkManager # 管理 不是必须ethernets:enp4s0: #网卡名dhcp4: no #关闭ipv4动态分配ip地址dhcp6: no #关闭ipv6动态分配…

Arrays.asList() 返回的list不能add,remove

一.Arrays.asList() 返回的list不能add,remove Arrays.asList()返回的是List,而且是一个定长的List&#xff0c;所以不能转换为ArrayList&#xff0c;只能转换为AbstractList 原因在于asList()方法返回的是某个数组的列表形式,返回的列表只是数组的另一个视图,而数组本身并没…

Wireshark 抓包过滤命令汇总

Wireshark 抓包过滤命令汇总 Wireshark 是一个强大的网络分析工具&#xff0c;它可以帮助网络管理员和安全专家监控和分析网络流量。通过捕获网络数据包&#xff0c;Wireshark 能够帮助我们识别网络中的问题、瓶颈以及潜在的安全威胁。在使用 Wireshark 进行网络数据包分析时&…

SQL Server基础之游标

一&#xff1a;认识游标 游标是SQL Server的一种数据访问机制&#xff0c;它允许用户访问单独的数据行。用户可以对每一行进行单独的处理&#xff0c;从而降低系统开销和潜在的阻隔情况&#xff0c;用户也可以使用这些数据生成的SQL代码并立即执行或输出。 1.游标的概念 游标是…

DELL PowerEdge R720XD 磁盘RAID及Hot Spare热备盘配置

一台DELL PowerEdge R720XD服务器&#xff0c;需进行磁盘RAID及Hot Spare热备盘配置&#xff0c;本文记录配置过程示例。 一、设备环境 服务器型号&#xff1a;DELL PowerEdge R720XD 硬盘配置&#xff1a;800G硬盘共24块 二、配置计划 1、当前状态&#xff1a;2块盘配置RAID…

AIGC+游戏:一个被忽视的长赛道

&#xff08;图片来源&#xff1a;Pixels&#xff09; AIGC彻底变革了游戏&#xff0c;但还不够。 数科星球原创 作者丨苑晶 编辑丨大兔 消费还没彻底复苏&#xff0c;游戏却已经出现拐点。 在游戏热度猛增的背后&#xff0c;除了版号的利好因素外&#xff0c;AIGC技术的广泛…

js下载后端返回的文件

文件流下载 后端返回文件流形式&#xff0c;前端下载 // res 为请求返回的数据对象const file_data res.data // 后端返回的文件流const blob new Blob([file_data]) const href window.URL.createObjectURL(blob) // 创建下载的链接 const file_name decodeURI(res.header…