一篇文章带你深入了解JavaScript中let+var的特性

news2024/11/25 2:54:05

暂时性死区

上篇文章我们了解到了letvar之间的细微差别,同时它们之间还有一个区别就是let声明的变量不会在作用域中被提升

<script> //name会被提升
  console.log(name);  //undefined
  var name = "Matt";
​
  //age不会被提升
  console.log(age);   //ReferenceError   age未定义
  let age = 26 ; </script> 

浏览器在解析代码的时候,JavaScript引擎也会注意出现在块后面的let声明,只不过在此之前不能以任何方式来引用未声明的变量,在let声明之前的之星瞬间都被称为暂时性死区,在此阶段引用任何后面才声明的变量都会抛出ReferenceError

全局声明

与var关键字不同,使用let在全局作用域中声明的变量不会成为window对象的属性(var声明的变量会)

<script> var name = 'Matt';
  console.log(window.name);  // 'Matt'
  
  let age = 26 ;
  console.log(window.age);  // undefined </script> 

let声明是在全局作用域里面发生的,响应变量会在页面的生命周期内存续,为了避免SyntaxError,我们必须确保页面不会重复声明同一个变量

条件声明

我们在使用var声明变量的时候,由于声明会被提升,JavaScript引擎会自动将多余的声明在作用域顶部合并为一个声明,因为let的作用域是块,所以不可能检查前面是否已经使用let声明过同名变量,同时也就不可能在没有声明的情况下使用它

<script>
    var name = 'Nicholas'
    let age = 26;
</script> 

注意注意注意!!!

对于let这个新的ES6关键字,不能依赖条件声明模式

不能使用let进行条件式声明是件好事,因为条件声明是一种反模式,它让程序变得更难理解

for循环中的let声明

let出现之前,for循环定义的迭代变量会渗透到循环体外部

<script> for(var i = 0 ; i < 5 ; ++i){
        //逻辑循环
  }
    console.log(i); </script> 

如果我们改成使用let,这个问题将会迎刃解决,因为迭代变量的作用域仅适用于for循环块内部

<script> for(let i = 0 ; i < 5 ; ++i){
        //逻辑循环
  }
    console.log(i);   //ReferenceError:i没有定义 </script> 

我们在使用var的时候,最常见的问题就是对迭代变量的奇特声明和修改

<script> for(var i = 0 ; i < 5 ; ++i ){
       setTimeout(() => console.log(i),0);        // 5 5 5 5 5
   } </script> 

之所以会这样,是因为退出循环的时候,迭代变量保存的都是循环退出的值:5。在执行超过逻辑时,所有的i都是同一个变量,因而输出的都是同一个最终值

而在使用let声明迭代变量的时候,JavaScript引擎在后台会为每个迭代循环声明一个新的迭代变量,每个setTimeout引用的都是不同的变量实例

<script> for(var i = 0 ; i < 5 ; ++i ){
       setTimeout(() => console.log(i),0);        // 1 2 3 4 5
   } </script> 

最后

最近还整理一份JavaScript与ES的笔记,一共25个重要的知识点,对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识,提升工作效率。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

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

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

相关文章

5.Naocs系列之集群部署

本文学习nacos基于docker的集群部署 1. 新增mysql8 Dockerfile文件 // online/shenjian/nacos/nacosCluster/image/mysql FROM mysql:8.0.30 ADD https://raw.githubusercontent.com/alibaba/nacos/develop/distribution/conf/mysql-schema.sql /docker-entrypoint-initdb.d/…

极客时间Kafka - 13 Kafka 中的高水位和 Leader Epoch 机制

文章目录1. 什么是高水位&#xff1f;2. 高水位的作用3. 高水位更新机制1. Leader 副本高水位更新机制2. Follower 副本高水位更新机制4. 副本同步机制解析5. Leader Epoch你可能听说过高水位&#xff08;High Watermark&#xff09;&#xff0c;但不一定耳闻过 Leader Epoch。…

vxe-table 实现表格填写自动计算且限制数值的复杂操作

vxe-table 实现表格填写自动计算且限制数值复杂操作 效果 演示思路 输入框设置最大值 :max"row.max"输入框调用方法blur"updateFooterEvent(row, $event)" input" if (row[item.field] > row.max) { row[item.field] row.max; } " 上代码…

我们是如何追逐元宇宙、XR等“概念股”浪潮的?

作者&#xff1a;金擘(渚薰) 1.今年我们迈出的第一步 随着淘宝人生小屋项目的正式上线&#xff0c;淘宝人生今年的元宇宙规划初步成型。 加上在 S1 同淘宝直播团队的合作上线的 Disney 毛毛狂欢馆&#xff0c;我们也正式迈出了“元宇宙”技术的第一步。 今年是淘宝人生上线 3…

数智技术,企业绿色低碳转型的催化剂?大咖说新一期每周推荐来袭!

“双碳”战略下&#xff0c;企业会遇到哪些机遇和挑战&#xff1f;中小企业如何实现绿色转型&#xff1f;数字化又在其中发挥了怎样的作用&#xff1f; 介绍&#xff1a; 阿里云能耗云总经理 周文闻 施耐德电气首席数字化设计师 毛春景 “双碳”战略下&#xff0c;企业会遇到…

你写过哪些有趣的python?(附零基础学习资料)

前言 某网站上有个浏览超过400万的问题&#xff1a;可以用 Python 编程语言做哪些神奇好玩的事情&#xff1f; 我先举一个很不专业的栗子… 然后再找几个人抬一堆例子来… 不是很稀饭《复联》嘛&#xff0c;看了《复联4》&#xff0c;就用50行Python代码做了这些&#xff1a;…

Word控件Spire.Doc 【超链接】教程(4):如何修改Word文档中的超文本

Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下&#xff0c;轻松快捷高效地创建、编辑、转换和打印 Microsoft Word 文档。拥有近10年专业开发经验Spire系列办公文档开发工具&#xff0c;专注于创建、编辑、转…

【leetcode】从前序与中序遍历序列构造二叉树

一、题目描述 给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 示例1&#xff1a; 输入: preorder [3,9,20,15,7], inorder [9,3,15,20,7] 输出:…

rk3399-uboot2017-增加串口通信

一、主要还是解决这个问题&#xff0c;最后没办法&#xff0c;只能进行串口通信&#xff0c;来识别屏幕的类型了。 基本步骤如下&#xff1a; 1. uboot阶段发送串口指令&#xff0c;等待串口回复数据&#xff0c;根据数据识别屏幕类型 2.在bootargs增加一个自定义的参数&…

一个完整的项目是如何开展的:对项目生涯的总结

我正在参加「掘金启航计划」 变量的类型指的是变量的特性或特征&#xff0c;比如表示数字类型、文本类型、集合类型等&#xff0c;表示的是一类数据。 Dart提供以下的内置类型&#xff1a; 数字&#xff1a;int, double (整型(表示整数)&#xff0c;浮点型(表示小数))布尔&a…

程序员如何平衡主业和副业?

什么是副业&#xff1f; 对于副业的定义&#xff0c;每个人都有自己的见解。不过对大部分人来说&#xff0c;副业相对于主业而言&#xff0c;就是工作日朝九晚五的工作称为主业&#xff0c;其他时间做的赚钱的项目或者工作可以称之为副 副业可以是写文章、拍视频、打代码&…

干扰管理学习日志8-------多用户联合_资源卸载_功率分配_计算资源分配

目录一、文章概述二、系统模型环境三、理论模型1.系统目标2.约束条件3.公式推导四、算法设计1.上行链路功率分配策略(1)任务目标(2)伪代码2.中央服务器算力分配策略3.任务卸载策略(1)任务目标(2)卸载集缩小条件(3)卸载集扩充条件(4)策略(5)伪代码五、性能表征本文是对论文《Mul…

[Linux]----初始网络

文章目录前言一、计算机网络的背景重新看待计算机结构网络发展认识"协议"二、网络协议初始软件分层协议分层OSI七层模型TCP/IP五层(四层)模型三、网络传输的基本流程网络和操作系统之间的关系局域网通信的原理四、数据包的封装和分用五、网络中的地址管理认识IP地址认…

2004-2020年全国30省工业污染治理完成投资数据

2004-2020年全国30省工业污染治理完成投资数据 1、时间&#xff1a;2004-2020年 2、范围&#xff1a;包括全国30个省&#xff0c;不含西藏 3、来源&#xff1a;国家统计J 4、缺失情况说明&#xff1a;无缺失 5、指标说明&#xff1a; 目前虽然采取了一系列环境规制相关政…

[附源码]Python计算机毕业设计SSM基于Web学术会议投稿管理系统(程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

二元灰狼优化(BGWO)应用于特征选择任务(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 特征选择是当前信息领域,尤其是模式识别领域的研究热点。该代码演示了BGWO如何使用基准数据集Main解决特征选择问题。 &#…

python国际化课程capstone(ML预测ACM队员获奖概率)

目录 前言 原始数据集 爬虫部分 爬取每个队员在buct做题数量 爬取每个队员codeforces的最高分&#xff0c;注册时间&#xff0c;解题数量 爬取每个队员有效做题时间 数据处理部分 模型部分 Linear Regression XGBregressiongridsearchCV调参 Random Forset 前言 刚…

Redis框架(九):大众点评项目 缓存工具封装

大众点评项目 缓存工具封装需求&#xff1a;缓存工具封装业务实现代码总览总结SpringCloud章节复习已经过去&#xff0c;新的章节Redis开始了&#xff0c;这个章节中将会回顾Redis实战项目 大众点评 主要依照以下几个原则 基础实战的Demo和Coding上传到我的代码仓库在原有基础…

视频直播技术干货:一文读懂主流视频直播系统的推拉流架构、传输协议等

1、引言 随着移动网络网速的提升与资费的降低&#xff0c;视频直播作为一个新的娱乐方式已经被越来越多的用户逐渐接受。特别是最近这几年&#xff0c;视频直播已经不仅仅被运用在传统的秀场、游戏类板块&#xff0c;更是作为电商的一种新模式得到迅速成长。 本文将通过介绍实时…

爆火Chatgpt注册完全指南

1 chatgpt 简介 ChatGPT是一种语言模型&#xff0c;它被训练来对对话进行建模。它能够通过学习和理解人类语言来进行对话&#xff0c;并能够生成适当的响应。ChatGPT使用了一种叫做Transformer的神经网络架构&#xff0c;这是一种用于处理序列数据的模型&#xff0c;能够在输入…