JS中let用法

news2024/11/15 12:15:03

JS中let用法

  • 基本用法

Let命令用来声明变量。它的用法类似于var,但是所声明的变量。只在let命令所在的代码块内有效。

 

 

上面代码块中,分别用let和var声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。这表明,let声明的变量只在它所在的代码块有效。

还有:

-var声明的变量,可以预解析提前调用的结果是undefined,let定义的变量不能预解析,提前调用的结果是报错。

-var定义的变量,变量名可以重复,效果是重复赋值,let定义的变量不能重复,否则执行报错。

-块级作用域{},一个{}可以看作一个作用域,if语句和for语句里面的{}也属于块作用域

很适合for循环的计数器

例如:

 

 

上面代码中,变量i是var命令声明的,在全局范围内都有效,所以全局只有一个变量i。每一次循环,变量i都会发生改变,二循环内被赋给数组a的函数内部的console.log(i),里面的i指向的就是全局的i,也就是说,所有数组a的成员里面的i,指向的都是同一个i,导致运行时输出的是最后一轮的i的值,也就是10.

如果使用let,声明的变量仅在块级作用域内有效,最后输出的是6,

 

 

上面代码中,变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。JavaScript引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。

  • 暂时性死区TDZ

-TDZ又叫暂时性死区,意思是变量在作用域内已经存在,必须在let/const声明后面使用。

只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。

 

上面代码中,存在全局变量a,但是块级作用域内let又声明了一个局部变量a,导致后者绑定这个块级作用域,所以在let声明变量前,对a赋值会报错。

ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就 使用这些变量,就会报错。

例如:

 

在声明变量之前都属于该变量的“死区”.

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

TDZ也意味着typeof不再是一个百分百安全的操作。

如果

typeof a;

Let a;

变量a,使用let命令声明之前,都属于a的“死区”,只要用到该变量就会报错。因此,typeof运行时就会抛出一个ReferenceError.

作为比较,如果一个变量根本没有被声明,使用typeof反而不会报错。

ES6规定暂时性死区和let,const语句不出现变量提升,主要是为了减小运行时的错误,防止变量在声明前就使用这个变量。

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

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

相关文章

蓝桥杯刷题冲刺 | 倒计时28天

作者:指针不指南吗 专栏:蓝桥杯倒计时冲刺 🐾马上就要蓝桥杯了,最后的这几天尤为重要,不可懈怠哦🐾 文章目录1.卡片2.数字三角形3.购物单4.回文日期1.卡片 题目 链接: 卡片 - 蓝桥云课 (lanqiao…

echarts 柱状堆叠图(图例和x轴都是动态的)

问题描述: echarts柱状堆叠图,是很常用的图表,官网的例子很简单 。图例(legend),x轴(xAxis)都是写死的。但是一般实际应用中都是 动态的。下面就举个例子,实现图例和x轴…

uniapp开发微信小程序自定义顶部导航栏

自定义导航栏渐变色,先上效果 使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏。 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色 全局定义导航栏 "window": {"navigationBarBackg…

猿创征文|一名大三学生的前端学习之路(真情流露)

✅ 作者简介:一名大三的大学生,致力于提高前端开发能力 ✨ 个人主页:前端小白在前进的主页 🔥 系列专栏 : node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 🍀 学习格言: ☀️ 打不倒你的会使你更强&#xf…

vue3中使用axios

vue3中使用axios 1.axios在vue3.x中的基础入门使用 在不涉及使用axios进行请求拦截以及响应拦截的场景下,axios的使用可以简化为以下步骤。 step1. 使用npm安装axios npm install axiosstep2. 我们将要使用的axios实例单独编写成一个js文件,文件夹可以建…

猿创征文|【C++游戏引擎Easy2D】学C++还不会绘制一个简单的二维图形?一篇文章教会你

🧛‍♂️iecne个人主页::iecne的学习日志 💡每天关注iecne的作品,一起进步 💪学C必看iecne 本文专栏:【C游戏引擎】. 🐳希望大家多多支持🥰一起进步呀! ✨前…

【Vue组件间通信】 全局事件总线、订阅与发布

目录 一、全局事件总线 作用 安装 组件使用案例 案例分析 组件一(小明) 组件二(小红) 效果展示 二、订阅与发布 安装 组件使用案例 案例分析 组件一(小明) 组件二(小红&#xff…

Python爬虫之Web自动化测试工具SeleniumChrome handless

​ ​ 作者 : SYFStrive 博客首页 : HomePage 🥧 上一篇续文传送门 📌:个人社区(欢迎大佬们加入) 👉:社区链接🔗 📌:如果觉得文章对你有帮助可以点点关注…

Python流星雨代码

前言 用Python画场流星雨看看,源码见文末公众号哈。 流星类 def __init__(self): self.r ra.randint(50,100) self.t ra.randint(1,3) self.x ra.randint(-2000,1000) #流星的横坐标 self.y ra.randint(0,500) #流星…

出道即封神的ChatGPT,现在怎么样了?

从互联网的普及到智能手机,都让广袤的世界触手而及,如今身在浪潮中的我们,已深知其力。前阵子爆火的ChatGPT,不少人保持观望态度。现如今,国内关于ChatGPT的各大社群讨论,似乎沉寂了不少,现在怎…

Web自动化测试怎么做?Web自动化测试的详细流程和步骤

一、什么是web自动化测试 自动化(Automation)是指机器设备、系统或过程(生产、管理过程)在没有人或较少人的直接参与下,按照人的要求,经过自动检测、信息处理、分析判断、操纵控制,实现预期的目…

使用node命令提示: ‘node‘ 不是内部或外部命令,也不是可运行的程序

报错:使用node命令提示: ‘node‘ 不是内部或外部命令,也不是可运行的程序 原因:没安装node.js 或者 没配置好环境变量 情况1:安装node.js: 在官网下载 .msi 文件:Node.js 中文网 (nodejs.cn) 步骤 1 : 下…

使用Freemarker来生成pdf文件

2022-09-02 今天接到一个生成pdf的任务,并且web端要能下载;在网上也找了许多的工具如:itext等,感觉挺复杂的没那么好用,然后想起了之前使用Freemarker来生成world文档,挺好用的,然后调查发现也能…

【JavaWeb】重新认识 Servlet 的初始化 [ 回顾 Servlet ]

🥇作者 .29. 的✔博客主页✔ 🥇记录JavaWeb学习的专栏:Web专栏 🥇向前走,不要回头。 您的点赞,收藏以及关注是对作者最大的鼓励喔 ~~ 重新认识Servlet的初始化一、回顾Servlet1.什么是Servlet2.Servlet规范…

设置背景图片大小的方法

背景图片大小设置 语法:background-size:宽度 高度;作用:设置背景图片大小取值: 取值场景数字px简单方便,常用百分比相当于当前盒子自身的宽高百分比contain包含,将背景图片等比例缩放,直到不…

Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表、地图)

Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表、地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表、地图) 一、简单介绍 二、环境搭建 三、使用 echarts 四、自动缩放 echarts 五、数据更…

【网络通信】websocket如何断线重连

Vue <template><div><button click"sendDevName(xxxxxxxx)">发送</button>{{data}}</div> </template><script> export default {name: HelloWorld,data () {return {data: null}},// html加载完成后执行initWebSocket()…

Vue3-路由跳转专题详细总结

一、基本路由 点击事件似乎可以使用模板更改视图中的内容&#xff0c;个人认为与路由的区别是路由能使网页中的地址栏发生变化 请先阅读基础第二篇 1.创建一个组件,并引入 2.js文件中配置路径 //name相当于别名{path:/tabView,component:TabView},{name:myComPany,path:compan…

Vue3项目搭建全过程

目录 一、前言 二、搭建准备 三、搭建项目 四、启动项目 一、前言 在2020年的9月19日&#xff0c;万众期待的Vue3终于发布了正式版&#xff0c;命名为“One Piece”。 它也带来了很多新的特性&#xff1a;更好的性能、更小的包体积、更好的TypeScript集成、更优秀的API设…

前端面试真题宝典(一)

面试题真题 闭包和柯里化 闭包是什么&#xff1f;闭包是能够读取其他函数内部变量的函数 柯里化是什么&#xff1f;柯里化是把一个多个参数的函数转化为单参数函数的方法 闭包的用途&#xff1a;闭包的主要用途是为了不污染全局变量&#xff0c;用闭包的局部变量来做一些库…