轻松弄懂var、let、const之间的区别(一看就懂)

ES6的好处
ES6的出现为我们前端带来了很多方便之处,以前用js几十行才实现的一个功能,ES6几行代码就能简单的实现,ES6新增的一些特性,改变了很多弊端之处,比如新出现的let、const,实现了块级作用域功能,减少了以前var的全局变量,箭头函数代替词法作用域的"this" 等等,在这里就不再做更多的举例子,想了解更多请参考 https://www.w3cschool.cn/ecmascript/pgms1q5d.html,今天主要跟大家一起了解一下var、let、const之间的区别

let
let是ES6新增的命令,用来声明变量,跟var声明变量一样。但是它俩有很大的区别。

let、const声明的变量仅在块级作用域内有效,var 声明变量是全局的,没有块级作用域功能
let 、const 不存在变量提升 , var 存在变量
let 、const不能在同一块级作用域内重复申请
用let定义变量,运行代码如下:

const arr = [1, 2, 3, 4]
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}console.log(i);

1
2
3
4
5

以上报错i未定义,说明let定义变量i,只在所在的块作用域内起作用

var 定义变量,运行代码如下:

var arr = [1, 2, 3, 4]
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
console.log(i);
1
2
3
4
5

以上运行结果说明,var 定义变量 没有块级作用域,i在块级作用域照样可以输出结果
其实var在函数内命名的变量是只在整个函数作用域内起作用,出了这个函数作用域就不能用了,例如下面

function testVar () {var i = 2console.log('函数内:' + i)}testVar()console.log('函数外:' + i)

1
2
3
4
5
6

很明显在函数外输出变量i的时候,报i未定义,var在函数内命名的变量是只在整个函数作用域内起作用

let不像var那样会发生“变量提升”现象。所以,变量一定要在声明后使用,否则报错。
运行代码如下:

console.log(arg1)
console.log(arg2)
var arg1 = 'test'
let arg2 = 'test2'

1
2
3
4

变量arg1用var命令声明,会发生变量提升,即脚本开始运行时,变量arg1已经存在了,但是没有值,所以会输出undefined。变量arg2用let命令声明,不会发生变量提升。这表示在声明它之前,变量arg2是不存在的,这时如果用到它,就会抛出一个错误。

var 重复申明变量的运行结果:

var arg1 = 'test'console.log('var第一次申明:' + arg1)var arg1 = 'test2'console.log('var第二次申明:' + arg1)

1
2
3
4

let 重复声明变量代码

let arg2 = ‘test’
console.log(‘let第一次申明:’ + arg2)
let arg2 = ‘test2’
console.log(‘let第二次申明:’ + arg2)
1
2
3
4

let在同一块作用域内不能重复声明变量,var 可以重复声明

const
const与let上面特点一样,但是也有不同点,let声明的是变量,const声明的是常量,只读,修改值会报错,const保存的是内存地址,可以给对象或数组添加属性或元素,但是不能重新复写。
————————————————
版权声明:本文为CSDN博主「前端岚枫」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/lfcss/article/details/103869080

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

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

相关文章

一文详解Serverless架构模式

云栖号资讯&#xff1a;【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯&#xff0c;还在等什么&#xff0c;快来&#xff01; 什么是 Serverless 架构&#xff1f;按照 CNCF 对 Serverless 计算的定义&#xff0c;Serverless 架构应该是采用 FaaS&#…

0 改造,让单体/微服务应用成为 Serverless Application

作者 | 陈涛&#xff08;毕衫&#xff09;责编 | 寇雪芹头图 | 下载于视觉中国天然云原生的 Serverless1. 云原生时代随着 2013 年以 Docker 为代表的容器技术、CNCF 基金会以及 K8s 的发展等&#xff0c;云原生开始被广大开发者所熟知。云原生时代之前还有两个阶段&#xff1a…

vmware虚拟机为何和主机网段不一样 电脑 虚拟机 手机同一网段

NAT 改为“桥接”&#xff0c;即直接连接到物理网络&#xff0c;这样虚拟机和物理主机就处于在同一网段了 电脑ip 虚拟机 手机网络

汽车产业云上多地域高可用消息系统构建

汽车产业互联网平台大搜车由姚军红创立于2012年12月&#xff0c;先后获得阿里巴巴集团、蚂蚁金服、晨兴资本、华平投资、春华资本等机构超过12亿美元融资。2017年12月&#xff0c;大搜车列入由硅谷全球数据研究机构PitchBook评选的“2017年全球新晋独角兽”名单。 目前&#x…

一文带你初识---虚拟dom

好久没有来博客了&#xff0c;疫情期间3月中旬从杭州实习公司辞职&#xff0c;在杭州的出租房呆了两个月&#xff0c;准备毕设和毕业相关的材料&#xff0c;顺便找新的工作。最终还是留在了魔都这座城市。现在也算稳定下来了&#xff0c;准备以后好好维护一下博客。第一篇文章就…

漫画通信:一图看懂通信发展史

原文链接 本文为云栖社区原创内容&#xff0c;未经允许不得转载。

java获取当前日期和前一周、前一月、前一年的日期

public static void main(String[] args) {SimpleDateFormat format new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");Calendar calendar Calendar.getInstance();//现在日期String now format.format(new Date());System.out.println("现在日期 &#xff1a;…

为什么要使用 Kubernetes 准入控制器

Kubernetes 准入控制器是什么&#xff1f;为什么要使用准入控制器&#xff1f;如何使用&#xff1f;本文对 Kubernetes 准入控制器进行了详细解释。来源 | K8sMeetup作者 | Arun Prasad头图 | 下载于视觉中国Kubernetes 控制平面由几个组件组成。其中一个组件是 kube-apiserver…

10个一行代码就能搞定的编程技巧

云栖号资讯&#xff1a;【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯&#xff0c;还在等什么&#xff0c;快来&#xff01; 本文列举了十个使用一行代码即可独立完成(不依赖其他代码)的业务逻辑&#xff0c;主要依赖的是Java8中的Lambda和Stream等新特…

这就是让程序猿删库跑路的命令,使用须谨慎

删库跑路这种说法其实也是程序员枯燥生活一种自我解压的方式&#xff0c;真要这么玩基本上这个程序员在软件行业也就不用混了&#xff0c;不仅仅是职业素质的问题&#xff0c;还涉及到人品问题了&#xff0c;曾经听过删库的程序员&#xff0c;基本上外包性质的公司比较多&#…

HTTP系列学习(笔记二):HTTPS与HTTP的区别在哪?

图文详解&#xff1a; 对称加密 &#xff1a;加密与解密的算法一样 非对称加密&#xff1a;加密与解密的算法不同 加密算法&#xff1a; 明文 -> encode 加密 -> 密文 -> decode 解密 -> 明文 摘要算法&#xff1a; 加密后得到固定长度的摘要&#xff0c;无法解…

程序员晒元宵节福利,网友:看了我想砸键盘......

再过几天就到元宵节了&#xff0c;又到了互联网大厂晒福利、拉仇恨的时候了。小编在脉脉上看到许多不愿透露姓名的网友的爆料&#xff0c;一起来看看吧。有的网友说收到了汤圆&#xff0c;还有员工说收到了四盒草莓&#xff0c;但是还有网友透露自己喜提加班&#xff0c;更有甚…

深度解读OpenYurt:从边缘自治看YurtHub的扩展能力

作者 | 新胜 阿里云技术专家 导读&#xff1a;OpenYurt 开源两周以来&#xff0c;以非侵入式的架构设计融合云原生和边缘计算两大领域&#xff0c;引起了不少行业内同学的关注。阿里云推出开源项目 OpenYurt&#xff0c;一方面是把阿里云在云原生边缘计算领域的经验回馈给开源…

HTTP系列学习(笔记一):一文带你详解HTTP协议

1、什么是协议 计算机中的协议和现实生活中的协议是一样的&#xff0c;一式多份&#xff0c;彼此都遵从共同的一个规范&#xff0c;这个规范就可以称之为协议。 2、HTTP协议的工作流程 3、HTTP请求信息和响应信息的格式 请求&#xff1a; 响应&#xff1a; 常见状态码&…

阿里高级技术专家总结6年来的成长和收获

7月9日 19:00-21:30 阿里云开发者社区首场“Offer 5000”直播开启&#xff01;15位团队技术大牛在线招人&#xff0c;更有《阿里云技术面试红宝书》助你拿下Offer&#xff01;点击图片或戳我查看详情和投简历 作者 | 箫逸 阿里文娱高级技术专家 导读&#xff1a;转眼 2020 已…

一目了然的 Docker 环境配置指南

来源 | Datawhale作者 | Tianchi头图 | 下载于视觉中国Docker是一个开源的引擎&#xff0c;可以轻松的为任何应用创建一个轻量级的、可移植的、自给自足的容器。开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署&#xff0c;包括VMs&#xff08;虚拟机&#xff0…

阿里本地生活EMonitor根因分析大揭秘

背景 阿里集团针对故障处理提出了“1/5/10”的目标-- 1 分钟发现、5 分钟定位、10 分钟恢复&#xff0c;这对我们的定位能力提出了更高的要求。 EMonitor 是一款集成 Tracing 和 Metrics、服务于饿了么所有技术部门的一站式监控系统&#xff0c;其覆盖了 前端监控、接入层监…

uniapp 打包安卓 Android 抖音app 前端篇~01

文章目录一、配置1. 修改后端服务地址2. 基础配置3. App图标配置4. App启动页面配置5. App模块配置二、发行2.1. 云打包2.2. 云打包配置2.3. 下载app三、安装apk3.1. 下载apk3.2. 安装apk3.3. 打开app3.4. 同意协议3.5. 前端页面效果一、配置 1. 修改后端服务地址 2. 基础配置…

this全面解析, 如何定位this指向,一文总结,再也不怕面试官追问啦

一、调用位置 在理解this的绑定过程之前&#xff0c;首先要理解调用位置&#xff1a;调用位置就是函数在代码中被调用的位置&#xff08;而不是申明的位置&#xff09;。只有仔细分析调用位置才能回答这个问题&#xff1a;这个this到底引用的是什么&#xff1f; function foo…

踩着七彩祥云来接你的不一定是意中人,也可能是阿里云

你今天点外卖了吗&#xff1f;你今天剁手了吗&#xff1f; 你每次在饿了么和淘宝上的刷刷刷、点点点 都有阿里云服务器ECS在云端疯狂计算 ——阿里云ECS&#xff0c;支撑了阿里经济体全面上云—— ---- 天猫双11核心系统100%上云 阿里云征服史上最大流量洪峰 饿了么100%迁至阿…