ES6基础知识一:说说var、let、const之间的区别

在这里插入图片描述
一、var

在ES5中,顶层对象的属性和全局变量是等价的,用var声明的变量既是全局变量,也是顶层变量

注意:顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象

var a = 10;
console.log(window.a) // 10

使用var声明的变量存在变量提升的情况

console.log(a) // undefined
var a = 20

在编译阶段,编译器会将其变成以下执行

var a
console.log(a)
a = 20

使用var,我们能够对一个变量进行多次声明,后面声明的变量会覆盖前面的变量声明

var a = 20
var a = 30
console.log(a) // 30

在函数中使用使用var声明变量时候,该变量是局部的

var a = 20
function change(){
var a = 30
}
change()
console.log(a) // 20

而如果在函数内不使用var,该变量是全局的

var a = 20
function change(){
a = 30
}
change()
console.log(a) // 30

二、let

let是ES6新增的命令,用来声明变量

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

{
let a = 20
}
console.log(a) // ReferenceError: a is not defined.

不存在变量提升

console.log(a) // 报错ReferenceError
let a = 2

这表示在声明它之前,变量a是不存在的,这时如果用到它,就会抛出一个错误

只要块级作用域内存在let命令,这个区域就不再受外部影响

var a = 123
if (true) {
a = ‘abc’ // ReferenceError
let a;
}

使用let声明变量前,该变量都不可用,也就是大家常说的“暂时性死区”

最后,let不允许在相同作用域中重复声明

let a = 20
let a = 30
// Uncaught SyntaxError: Identifier ‘a’ has already been declared

注意的是相同作用域,下面这种情况是不会报错的

let a = 20
{
let a = 30
}

因此,我们不能在函数内部重新声明参数

function func(arg) {
let arg;
}
func()
// Uncaught SyntaxError: Identifier ‘arg’ has already been declared

三、const

const声明一个只读的常量,一旦声明,常量的值就不能改变

const a = 1
a = 3
// TypeError: Assignment to constant variable.

这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值

const a;
// SyntaxError: Missing initializer in const declaration

如果之前用var或let声明过变量,再用const声明同样会报错

var a = 20
let b = 20
const a = 30
const b = 30
// 都会报错

const实际上保证的并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动

对于简单类型的数据,值就保存在变量指向的那个内存地址,因此等同于常量

对于复杂类型的数据,变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的,并不能确保改变量的结构不变

const foo = {};

// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only

其它情况,const与let一致

四、区别

var、let、const三者区别可以围绕下面五点展开:

  • 变量提升
  • 暂时性死区
  • 块级作用域
  • 重复声明
  • 修改声明的变量
  • 使用

变量提升

var声明的变量存在变量提升,即变量可以在声明之前调用,值为undefined

let和const不存在变量提升,即它们所声明的变量一定要在声明后使用,否则报错

// var
console.log(a)  // undefined
var a = 10

// let 
console.log(b)  // Cannot access 'b' before initialization
let b = 10

// const
console.log(c)  // Cannot access 'c' before initialization
const c = 10

暂时性死区

var不存在暂时性死区

let和const存在暂时性死区,只有等到声明变量的那一行代码出现,才可以获取和使用该变量

// var
console.log(a)  // undefined
var a = 10

// let
console.log(b)  // Cannot access 'b' before initialization
let b = 10

// const
console.log(c)  // Cannot access 'c' before initialization
const c = 10

块级作用域

var不存在块级作用域

let和const存在块级作用域

// var
{
    var a = 20
}
console.log(a)  // 20

// let
{
    let b = 20
}
console.log(b)  // Uncaught ReferenceError: b is not defined

// const
{
    const c = 20
}
console.log(c)  // Uncaught ReferenceError: c is not defined

重复声明

var允许重复声明变量

let和const在同一作用域不允许重复声明变量

// var
var a = 10
var a = 20 // 20

// let
let b = 10
let b = 20 // Identifier 'b' has already been declared

// const
const c = 10
const c = 20 // Identifier 'c' has already been declared

修改声明的变量

var和let可以

const声明一个只读的常量。一旦声明,常量的值就不能改变

// var
var a = 10
a = 20
console.log(a)  // 20

//let
let b = 10
b = 20
console.log(b)  // 20

// const
const c = 10
c = 20
console.log(c) // Uncaught TypeError: Assignment to constant variable

使用

能用const的情况尽量使用const,其他情况下大多数使用let,避免使用var

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

uview2.0使用u-calendar 的formatter属性,在formatter方法里无法访问this的bug,解决办法!!!!

uview 版本2.0.36 文档 使用该文档的案例,在 formatter打印this也会是undefined。 自己写了个demo 父给子传值v-bind传一个函数,然后在这个函数里面打印this,this是子组件的实例,但是不知道为什么formatter里会打印undefined。希…

微服务 云原生:搭建 K8S 集群

为节约时间和成本,仅供学习使用,直接在两台虚拟机上模拟 K8S 集群搭建 踩坑之旅 系统环境:CentOS-7-x86_64-Minimal-2009 镜像,为方便起见,直接在 root 账户下操作,现实情况最好不要这样做。 基础准备 关…

IntelliJ IDEA Copyright添加

IDEA代码文件的版权(copyright)信息配置 1. 快速创建Copyright 版权配置文件 1.1 创建copyright文件 依次点击 File > Settings… > Editor > Copyright > 点击 “” 号或 “Add profile”***,弹出创建 Copyright Profile 操作窗口,在***文…

低代码如何帮助企业数字化转型?

在数字化时代背景下,企业都面临着巨大的数字化转型挑战。为了迎接这一挑战,企业软件开发工具和平台都在不断地创新和进化。其中,低代码开发平台应运而生,并成为了众多企业转型的首选方案。企业为什么都选择低代码开发平台&#xf…

【基于CentOS 7 的NFS服务】

目录 一、概述 二、应用场景 三、安装 四、启动服务 五、目录结构 1.nfs的主配置文件 2.存储配置文件 六、命令解析 1.共享存储管理命令 2.共享目录查看 七、配置 八、客户端访问 1.查看nfs服务器的共享目录 2.挂载 九、实际案例 一、概述 network filesystemt…

【GitOps系列】使用Kustomize和Helm定义应用配置

文章目录 使用 Kustomize 定义应用改造示例应用1.创建基准和多环境目录2.环境差异分析3.为 Base 目录创建通用 Manifest4.为开发环境目录创建差异 Manifest5.为预发布环境创建差异 Manifest6.为生产环境创建差异 Manifest 部署 Kustomize 应用部署到开发环境部署到生产环境 使用…

Flink笔记

Flink笔记 2.Flink学习笔记2.1流式处理对比2.2 Flink核心概念2.2.1并行度2.2.2算子链2.2.3任务槽 2.3 DataStream2.3.2 读取数据源-源算子(Source)2.3.3 转换算子(Transformation) 2.Flink学习笔记 2.1流式处理对比 学习Spark S…

ubuntu22.04上如何创建有privilege权限,有固定自定义IP的空容器

需求背景: 我想用docker来隔离自己的主机环境,来创建一个隔离的空白全新的开发环境,并且使之有固定的IP,在里面可以自由更新下载各种编译依赖,具有privileged权限的容器,以下是操作实现的具体步骤 查看do…

1.12 springboot 整合log4j打印日志

1.除去springboot自带的日志 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId><exclusions><!-- 除去springboot自带的日志 --><exclusion><groupId>org.sprin…

在vscode中运行Hbuilder创建的项目

想必习惯使用vscode的人突然使用HBuilder很不习惯吧&#xff0c;但是HBuilder创建的项目本身没有调试功能。当你有一个app项目但又不想使用HBuilder编写&#xff0c;需要浏览器调试的时候&#xff0c;你这时就需要一个插件了&#xff1a;uni run 插件 基于HBuilderX的采用unia…

JVM运行时区域——对象创建内存分配过程

新创建的对象&#xff0c;都存放在伊甸园区域&#xff0c;当垃圾回收时&#xff0c;将伊甸园区域的垃圾数据销毁&#xff0c;然后将存活的对象转移到幸存者0区域&#xff0c;之后创建的新的对象还是存放在伊甸园区域&#xff0c;等到再次垃圾回收后&#xff0c;将伊甸园区域和幸…

Aurix TC3xx系列MCU ADC采集时间计算方法(四)

文章目录 1 前言2 各阶段时间的计算方法2.1 计算公式2.2 采样阶段2.3 转换阶段2.4 降噪阶段2.5 校准阶段3 采集时间示例>>返回总目录<< 1 前言 在项目开发前期评估阶段,会比较关注ADC的采集时间,我们可以给出一个大概的采样的时间0.5us~1.2us左右,但是对于精确…

SpringCloud nacos 集成 feign 实例

&#x1f388; 作者&#xff1a;Linux猿 &#x1f388; 简介&#xff1a;CSDN博客专家&#x1f3c6;&#xff0c;华为云享专家&#x1f3c6;&#xff0c;Linux、C/C、云计算、物联网、面试、刷题、算法尽管咨询我&#xff0c;关注我&#xff0c;有问题私聊&#xff01; &…

创建型设计模式-4.原型设计模式

创建型设计模式-4.原型设计模式 原型设计模式&#xff08;Prototype Design Pattern&#xff09;是一种创建型设计模式&#xff0c;旨在通过复制现有对象来创建新对象&#xff0c;而不是通过使用构造函数进行创建。它允许我们通过克隆&#xff08;复制&#xff09;现有对象的实…

【C++】开源:跨平台轻量日志库easyloggingpp

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍跨平台轻量日志库easyloggingpp。 无专精则不能成&#xff0c;无涉猎则不能通。。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&am…

【SQL应知应会】表分区(四)• MySQL版

欢迎来到爱书不爱输的程序猿的博客, 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 本文收录于SQL应知应会专栏,本专栏主要用于记录对于数据库的一些学习&#xff0c;有基础也有进阶&#xff0c;有MySQL也有Oracle 分区表 • MySQL版 前言一、分区表1.非分区表2.分区…

Spring MVC异步上传、跨服务器上传和文件下载

一、异步上传 之前的上传方案&#xff0c;在上传成功后都会跳转页面。而在实际开发中&#xff0c;很多情况下上传后不进行跳转&#xff0c;而是进行页面的局部刷新&#xff0c;比如&#xff1a;上传头像成功后将头像显示在网页中。这时候就需要使用异步文件上传。 1.1 JSP页面 …

centos7 访问windows系统的共享文件夹

window系统上共享文件夹 选择共享文件夹&#xff0c;点击属性 点击共享 选择用户&#xff0c;点击共享 centos系统挂载共享文件夹 创建挂载目的文件夹 mkdir -p /mnt/smb 挂载命令 mount -t cifs -o usernamezenglg,password*** //192.168.1.10/ftp /mnt/smb/其中&#xff…

【计算机视觉 | 图像分割】arxiv 计算机视觉关于图像分割的学术速递(7 月 18 日论文合集)

文章目录 一、分割|语义相关(14篇)1.1 Multimodal Diffusion Segmentation Model for Object Segmentation from Manipulation Instructions1.2 Variational Probabilistic Fusion Network for RGB-T Semantic Segmentation1.3 Dense Affinity Matching for Few-Shot Segmentat…

Spring MVC拦截器和跨域请求

一、拦截器简介 SpringMVC的拦截器&#xff08;Interceptor&#xff09;也是AOP思想的一种实现方式。它与Servlet的过滤器&#xff08;Filter&#xff09;功能类似&#xff0c;主要用于拦截用户的请求并做相应的处理&#xff0c;通常应用在权限验证、记录请求信息的日志、判断用…