当前位置: 首页 > news >正文

【ES6】var let const 之面试题系列

关于 var、let、const 是前端开发人员经常用到的关键字,也是经典的面试题,接下来就站在面试题的角度来看待它们之间的区别。

一、区别

1. var 声明的范围是函数作用域,let 和 const 声明的范围是块作用域,块作用域是函数作用域的子集,因此适用于 var 作用域限制的也同时限制于 let。  

function fn() {var a = 1;console.log(a)  // 1
}
console.log(a)  //Error
{let a = 1;console.log(a)  // 1
}
console.log(a)  // Error

2. var 声明的变量会被提升到函数作用域的顶部,let 和 const 声明的变量不存在提升,并且具有暂时性死区的特征。

function fn() {console.log(a)  // undefinedvar a = 1;
}
function fn() {console.log(a)  // Errorlet a = 1
}

暂时性死区:在解析代码时,JS 引擎会注意到块后面的 let 声明,但在此之前不能以任何方式来引用未声明的变量。

3. var 允许在同一个作用域中重复声明同一个变量,let 和 const 不允许。

var a = 1;
var a = 'hello'
console.log(a)  // hello
let a = 1;  // a报错
let a = 'hello'  // a报错
const a = 1;  // a报错
const a = 'hello'  // a报错

4. 在全局作用域中使用 var 声明的变量会成为 window 对象,let 和 const 声明的变量不会。

var a = 1;  
console.log(window.a)  // 1
let a = 1;  
console.log(window.a)  // undefined
const a = 1;  
console.log(window.a)  // undefined

5. const 的行为与 let 基本相同,唯一一个重要的区别是,使用 const 声明的变量必须进行初始化,并且不能被修改。

let a;
console.log(a)  // undefined
a = 1;
console.log(a)  // 1
const a;  // a报错// const 必须在声明时赋初始值,并不能重新赋值
const a = 1;
a = 'hello'  // a报错// const 声明的限制只适用于它指向的变量的引用,如果 const 变量引用的是一个对象,那么修改这个对象内部的属性是不受限制的
const obj = {name: 'bao',age: 18
}
console.log(obj.age)  // 18
obj.age = 20;
console.log(obj.age)  // 20

二、经典面试题

1. 块级作用域

// var
for(var i = 0; i < 5; i++) {...
}
console.log(i)  // 5// let
for(let i = 0; i < 5; i++) {...
}
console.log(i)  // Error

var 声明的变量没有块作用域,所以迭代变量 i 会渗透到循环体外部,属于全局变量,当 i 递增到5时退出循环,打印出来的结果自然是5。又因为 let 有块级作用域,所以在块级作用域外面无法访问到此变量,则打印Error。

2. 同步与异步

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

使用 var 之所以是这样的结果,是因为在退出循环时,迭代变量保存的是导致循环退出的值,也就是5,在之后 setTimeout 异步调用的时候已经是循环结束的值,所以打印5个5。

而使用 let 声明迭代变量时,JS 引擎在后台会为每个迭代循环声明一个新的迭代变量,每个 setTimeout 引用的都是不同的变量实例,所以最后打印的值是期望的值,也就是循环执行过程中每个迭代变量的值。

三、总结

ES6 增加 let 和 const 从客观上为这门语言更精确地声明作用域和语义提供了更好的支持,var 所造成的问题,随着这两个关键字的出现,也被慢慢的解决,有效的提升了代码的质量,变量有了明确的作用域已经不能改变的限制。

对于新的两个关键字,优先使用const,let 次之。使用 const 声明可以让浏览器运行时强制保持不变,也可以让静态代码分析工具提前发现不合法的赋值操作。只在提前知道未来会有修改时,才使用 let,这样可以让开发者更有信心地推断某些变量的值永远不会变,同时也能迅速的发现因意外赋值导致的非预期行为。

相关文章:

【ES6】var let const 之面试题系列

关于 var、let、const 是前端开发人员经常用到的关键字&#xff0c;也是经典的面试题&#xff0c;接下来就站在面试题的角度来看待它们之间的区别。 一、区别 1. var 声明的范围是函数作用域&#xff0c;let 和 const 声明的范围是块作用域&#xff0c;块作用域是函数作用域的…...

Vue基础入门讲义(四)-组件化

文章目录1.引言2.定义全局组件3.组件的复用4.局部注册5.组件通信5.1.父向子传递props5.2.传递复杂数据5.3.子向父的通信1.引言 在大型应用开发的时候&#xff0c;页面可以划分成很多部分。往往不同的页面&#xff0c;也会有相同的部分。例如可能会有相同的头部导航。 但是如果…...

Android onLayout布局流程解析

组件布局流程结论 1.&#xff09;layout流程始于ViewRootImpl的performLayout()方法&#xff0c;该方法会调用根View&#xff08;DecorView&#xff09;的layout()方法进行布局&#xff0c;因为DecorView是ViewGroup(FrameLayout),所以layout流程来到了ViewGroup&#xff08;其…...

浅分析BIG-建筑展示系统

一、主页&#xff08;主要界面&#xff09;重点疑点&#xff08;需要解决&#xff09;1.云平台实时同步。是否可以电脑与hololens2同步或链接&#xff1f;并可以传输信息提醒&#xff1f;一级界面&#xff08;启动界面&#xff09;1.交互式启动激活效果&#xff08;触发按钮旋转…...

模电基础(1) 半导体基础知识

基本内容&#xff1a; 1.本征半导体的基本介绍结构&#xff1b; 2.杂质半导体&#xff1b; 3.PN结的形成&#xff1b; 4.PN结的性质。 1.本征半导体 半导体&#xff1a;导电性能介于绝缘体和导体之间的物质。 本征半导体是纯净的晶体结构的半导体。 纯净→无杂质晶体结构→稳…...

阅读笔记:TF - IDF 原理

今天查阅 TF-IDF 资料&#xff0c;发现百度百科里面提供了一个例子&#xff0c;解释的很清楚&#xff0c;记下来备用。 原文链接&#xff1a;https://baike.baidu.com/item/tf-idf/8816134?fraladdin 例子&#xff1a;在某个一共有一千词的网页中 “原子能”、“的” 和 “应…...

【C语言】float 关键字

&#x1f6a9;write in front&#x1f6a9; &#x1f50e;大家好&#xff0c;我是謓泽&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f3c5;2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4…...

Linux 网络编程(实现多路IO转接服务器)

1.select函数实现多路IO转接服务器select函数原型&#xff1a;包含在头文件<sys/time.h>&#xff0c;<sys/types.h>和<unistd.h>int select(int nfds, fd_set *readfds, fd_set *writefds,fd_set *exceptfds, struct timeval *timeout);作用&#xff1a;确定…...

DC-4 靶场学习

信息搜集&#xff1a; 首先获取靶场ip&#xff0c;和之前一样。 arp-scan -l nmap -sP 192.168.28.0/24然后访问。 发现需要登录。 漏洞分析: 直接用bp爆破&#xff0c;爆破出来密码为happy&#xff0c;登录。 发现执行了命令&#xff0c;抓包。 修改命令可以执行&#xff…...

QML组件

一个QML文件定义了一个独立的、顶级的QML组件。 一个QML组件就是一个模板&#xff0c;被QML运行环境解释来创建一个带有一些预定义行为的对象。 一个独立的QML组件可以运行多次来禅城多个对象&#xff0c;每个对象都可以称为该组件的实例。 例子&#xff1a; 在项目中添加一…...

canvas 学习指南

canvas 学习指南 创建一个 canvas <! DOCTYPE html><html xmlns"http://www.w3.org/1999/xhtml"><head><title></title><meta charset"utf-8" /><script type"text/javascript">window.onload fun…...

【华为OD机试2023】开心消消乐 C++

【华为OD机试2023】开心消消乐 C++ 前言 如果您在准备华为的面试,期间有想了解的可以私信我,我会尽可能帮您解答,也可以给您一些建议! 本文解法非最优解(即非性能最优),不能保证通过率。 Tips1:机试为ACM 模式 你的代码需要处理输入输出,input/cin接收输入、print/cou…...

学历?能力?

一个面试官愿意看一张有形的总结报告&#xff0c;还是愿意相信看不到的人品&#xff1f;...

使用ECharts打造一个数据可视化面板

使用ECharts打造一个数据可视化面板1. 使用技术2. 案例适配方案3. 基础设置4. header 布局5. mainbox 主体模块6. 公共面板模块 panel7. 柱形图 bar 模块&#xff08;布局&#xff09;8. 中间布局9. ECharts 介绍10. ECharts 体验11. ECharts 基础配置12. 柱状图图表&#xff0…...

【论文简述】PVSNet: Pixelwise Visibility-Aware Multi-ViewStereo Network(arxiv 2020)

一、论文简述 1. 第一作者&#xff1a;Qingshan Xu 2. 发表年份&#xff1a;2020 3. 发表期刊&#xff1a;arxiv 4. 关键词&#xff1a;MVS、3D重建、可见性、代价体、训练策略 5. 探索动机&#xff1a;ETH3D基准测试提供的图像包含强烈的视图变化&#xff0c;这就要求MVS…...

CSS隐藏元素的几种方式以及display、visibility、opacity的区别

CSS隐藏元素的方式首先最通用且最易想到的方法肯定是display、visibility和opacity这三种了display:none设置元素不可见并且连盒模型也不生成&#xff0c;一般用于不占空间的隐藏元素。display属性规定元素应该生成的框的类型&#xff0c;当其值为“none”时可以规定元素不生成…...

【Java|golang】1487. 保证文件名唯一---golang中string方法的坑

给你一个长度为 n 的字符串数组 names 。你将会在文件系统中创建 n 个文件夹&#xff1a;在第 i 分钟&#xff0c;新建名为 names[i] 的文件夹。 由于两个文件 不能 共享相同的文件名&#xff0c;因此如果新建文件夹使用的文件名已经被占用&#xff0c;系统会以 (k) 的形式为新…...

flstudio21水果language选项中文设置方法教程

编曲是通过DAW&#xff08;数字音频工作站软件&#xff09;完成的&#xff0c;也就是我们常说的宿主软件。现在有很多优秀的宿主软件&#xff0c;例如Cubase、Studio One、FL Studio等。 FL Studio是一款功能强大的音乐制作软件&#xff0c;也被称为FruityLoops。目前已经推出…...

Ubuntu中安装StaMPS

Ubuntu中安装StaMPS0 StaMPS简介1 首先安装好MATLAB&#xff0c;安装一些依赖工具包2 安装StaMPS2.1 下载StaMPS安装包2.2 安装2.3 配置环境2.4 matlab中的路径设置0 StaMPS简介 官网&#xff1a;https://homepages.see.leeds.ac.uk/~earahoo/stamps/ A software package to e…...

Spring Security 实现自定义登录和认证(1)

1 SpringSecurity 1.1 导入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId> </dependency>1.2 编写配置类 在spring最新版中禁用了WebSecurityConfigurerAdapter…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

掌握 HTTP 请求:理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念&#xff1a; 1&#xff09;ZYNQ全称&#xff1a;ZYNQ7000 All Pgrammable SoC 2&#xff09;SoC:system on chips(片上系统)&#xff0c;对比集成电路的SoB&#xff08;system on board&#xff09; 3&#xff09;ARM&#xff1a;处理器…...