【JavaScript】var,let 和 const 的区别

先看一些前置知识:

在这里插入图片描述
此时输出 undefined。

在这里插入图片描述
在这里插入图片描述

  • 全局作用域:全局都可以访问。
  • 函数作用域:只有函数内部可以访问。
  • 块级作用域:let 和 const 只能在块级作用域(一对大括号包裹的代码片段)中访问。let 和 const 在变量声明前不可以访问(因为存在暂时性死区TDZ,使变量提升没有意义,声明前访问会抛出引用错误)。

var 声明变量可以重复声明,而 let 或者 const 声明某个变量只能声明一次。var 和 let 可以先声明后赋值,默认值为 undefined。const 声明时必须赋值,且在赋值后不可以更改。


用一个例子来说明块级作用域:

<ul><li>1</li><li>2</li><li>3</li>
</ul>
<script>var oli = document.getElementsByTagName("li");for (let i = 0; i < oli.length; i++) {oli[i].onclick = function () {console.log(i)}}
</script>

此时依次点击1,2,3,之所以会输出0,1,2。是因为在 for 循环内部,每次迭代都会创建一个新的块级作用域,并且将当前迭代的值绑定到该作用域内的变量上。因此,当点击li元素时,会执行console.log(i),此时每个点击事件的处理函数都可以从自己的作用域中访问到正确的i值。

而如果将 let 改为 var,始终会输出 3。因为在循环中用var声明的变量i是一个全局变量。当点击li元素时,执行console.log(i),此时i已经是循环结束后的最后一个值3了。所以无论点击哪个li元素,输出的结果都是3。


总结:

  1. var 定义的变量会全局污染,而 let 和 const 定义的变量不可以全局污染(但都是可以跨标签)。
  2. 作用域:var(全局和函数);let 和 const(全局,函数和块级)。
  3. let 和 const 存在暂时性死区。
  4. var 可以重复声明,且不可以与 let 混用。

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

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

相关文章

怎么把图片的二维码提取出来?免费在线二维码转换成链接的方法

在部分情况下无法直接使用二维码展示内容&#xff0c;那么可以将二维码分解成链接后来使用&#xff0c;点击链接就可以跳转二维码的页面内容&#xff0c;这种方式可以在电脑或者手机上预览二维码内容。怎么提取二维码链接呢&#xff1f;下面小编来教大家二维码解码器的使用方法…

单机搭建hadoop环境(包括hdfs、yarn、hive)

单机可以搭建伪分布式hadoop环境&#xff0c;用来测试和开发使用&#xff0c;hadoop包括&#xff1a; hdfs服务器 yarn服务器&#xff0c;yarn的前提是hdfs服务器&#xff0c; 在前面两个的基础上&#xff0c;课可以搭建hive服务器&#xff0c;不过hive不属于hadoop的必须部…

Linux自动创建本地yum源与清华大学源仓库

Linux自动创建本地yum源与清华大学源仓库 系统环境&#xff1a; Server1&#xff1a;172.20.26.167—CentOS7.6 在172.20.26.167服务器上 yum install yum-utils -y 输入yum按两下tab键&#xff0c;可以看到 yum-config-manager 工具&#xff0c;使用该工具可以自动配置仓…

【正点原子STM32连载】第四十六章 SD卡实验 摘自【正点原子】APM32E103最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子APM32E103最小系统板 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/docs/boards/xiaoxitongban 第四…

异步编程,到底有什么用?

关键词&#xff1a;高性能、架构设计、异步思想、场景落地 文章导读 场景切入 先来看一个日常生活快递寄件场景&#xff0c;从寄件人&#xff08;寄件&#xff09;到收件人&#xff08;收件&#xff09;&#xff0c;全流程如下 当你准备寄送一个包裹时&#xff0c;通常你可以…

Qt|制作简单的不规则窗体

通常我们用到的对话框基本上都是规则的&#xff0c;在有些特殊情况下&#xff0c;也会使用到不规则窗口&#xff0c;那么该如何实现不规则窗体呢&#xff1f; 在MFC框架下很难实现&#xff0c;应该说是难的都想放弃&#xff0c;但是&#xff0c;Qt框架下提供了一个叫做setMask…

Python+PyQt5+C Hw信息检测

UI主界面&#xff1a; C源代码&#xff1a; /* I/O port access* Copyright (C) 2009 Red Hat Inc.** This program is free software; you can redistribute it and/or modify* it under the terms of the GNU General Public License as published by* the Free Software Fo…

kingbase控制文件重建

背景&#xff1a; 测试版本&#xff1a;V008R006C005B0023 sys_control文件在数据目录的global下 若sys_control文件损坏或被删&#xff0c;会导致库无法启动 处理方式&#xff1a; 所在目录为数据目录 1、尝试dryrun touch global/sys_control sys_resetwal -l 00000001…

用Audio2Face导出Unity面部动画

开始之前说句话&#xff0c;新年前最后一篇文章了 一定别轻易保存任何内容&#xff0c;尤其是程序员不要轻易Ctrl S 在A2F去往Unity的路上&#xff0c;还要经历特殊Blender&#xff0c;自己电脑中已下载好的可能不是很好使。 如果想查看UE相关的可以跳转到下边这两篇链接 1. …

2024年第九届信号与图像处理国际会议(ICSIP 2024)

2024第九届信号与图像处理国际会议&#xff08;ICSIP 2024&#xff09;将于2024年7月12-14日在中国南京召开。ICSIP每年召开一次&#xff0c;在过去的七年中吸引了1200多名与会者&#xff0c;是展示信号和图像处理领域最新进展的领先国际会议之一。本次将汇集来自亚太国家、北美…

#10外部网页跳转vue3+SpringMVC解码GBK编码的参数

目录 1、背景 2、失败尝试之iconv-lite 2.1、安装和使用 2.2、遇到的问题 2.3、解决方案(vite-plugin-node-polyfills) 2.4、测试 3、成功尝试 3.1、前端参数读取方式 3.2、后端解码 1、背景 外部jsp页面中编码方式为GBK&#xff0c;跳转到vue页面时如果使用decodeURI…

C#,入门教程(33)——万能的数据接送者json

上一篇&#xff1a; C#&#xff0c;入门教程(32)——程序运行时的调试技巧与逻辑错误探针技术与源代码https://blog.csdn.net/beijinghorn/article/details/126014885 作为21世纪的编程者&#xff0c;无论你是前端还是后端&#xff0c;都逃不过“json”。 一、什么是 json&…