var const let

news2024/12/25 15:34:08

菜鸟学前端

本文:https://www.jianshu.com/p/b7116525273b

文章目录

  • var
  • let和const
  • 写不动了
  • 参考

说实话,在看到这个之前,我只知道 var,以前也只用过这玩意。
后面那俩都不知道是干啥用的。
感谢同桌的提示。
记!

var

varES5 提出的。用于声明变量。

什么是 ES5
ES5 全称 ECMAScript5,即 ES5,是ECMAScripts的第五次修订(第四版因为过于复杂废弃了),又称ECMAScript2009,于 2009 年完成标准化。

var num = 1;
var str = 'a';
var fun = function(){};
var obj = {};
var bean = new ABC(); /* 需要提前声明过ACB这个类型 */

var 就是一切,想是啥就可以是啥,而且是 弱类型。就算是赋值完了还可以赋值为其它类型的值。
当然因为是重复赋值,肯定只有最后一次有效。

var any = 1;
any = 'a';
any = function(){};
any = {};
any = new ABC(); /* 需要提前声明过ACB这个类型 */
any = false;
console.log(any);

// print 
false

var 还可以重复声明,就是说即使你声明过变量any ,还可以再次声明 any
同样的,因为是同一个变量名,后者肯定会覆盖前者。
上面那段代码还可以这么写。

var any = 1;
var any = 'a';
var any = function(){};
var any = {};
var any = new ABC(); /* 需要提前声明过ACB这个类型 */
var any = false;
console.log(any);

// print 
false

var 还可以 变量提升 !!!啥是变量提升? 额,大概是把自己变牛逼了。
你看,它可先使用,后声明。

console.log(any);
var any = false;

// print 
undefined

后来才了解到有个什么预解析过程,会提前加载这个变量。
类似于如下:

var any;
console.log(any);
any = false;

// print 
undefined

这样一来,结合以上特征,代码开始渐渐奇怪起来。

for(var index = 0;index < 10; index++ ){
     /* do something */
}

...
/* n 多代码之后 */
...

/* 脑抽了,突然想声明个index用来做某个标记位 */
var index; 
if (index) {
    console.log('already init !!!');
    console.log('index value:' + index);
} else {
    /* init something */
    console.log('init index');
    index = 1;
}

// print 
already init !!!
index value: 10

唉,啥情况,哪来的10???
大家可能说,上面那个for循环的锅。
但是在多人协作的情况下,代码没报错,执行结果却不是你想要的。
而且这种情况下,排查是个非常困难的事,因为真不知道谁在哪个地方突然声明了一个一样的变量。

而且再极端一些,那个for循环假设只在某些条件下才执行。
那么刚才那个代码就成了,你这个bug偶尔出现,偶尔消失。

let和const

letconst 都是 ES6 提出的。一个用于声明变量,一个用于声明常量。

什么是ES6
ES6, 全称 ECMAScript 6.0 ,即 ES6,是ECMAScripts的第六次修订,又称 ES2015,于2015年06 月发版,是 JavaScript 的下一个版本标准。

ES6 中有了块级作用域的概念,letconst 都是块级作用域。以 {} 代码块作为作用域范围,只能在代码块里面使用,不存在变量提升,只能先声明再使用,否则会报错。

if (true) {
   let a = 'let';
   var b = 'var';
}
 
console.log(b); // var
console.log(a); // Uncaught ReferenceError: a is not defined
console.log(c); // Uncaught ReferenceError: c is not defined
let c = 'c'

在代码块内,在声明变量之前,该变量都是不可用的。
这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ),在同一个代码块内,不允许重复声明。只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。不同代码块是可以重复声明的。

let a = 'let a'
if (true) {
    let a = 'let if a';
    console.log(a); // print 'let if a'

    let a = 'next same let'
    console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared
}
console.log(a); // print 'let a'

const 声明的是一个只读常量,在声明时就需要赋值。(如果 const 的是一个对象,
对象所包含的值是可以被修改的。抽象一点儿说,就是对象所指向的地址不能改变,而变量成员是可以修改的。)

const any = 'abc';
const obj = {};

除了不可重复赋值的问题,其它和 let 作用域类似,功能类似。

写不动了

写不动了。。。后面有想法了再慢慢了解和补充。。

参考

谈谈ES5和ES6的区别
ES6的let和const
var、let、const的区别

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

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

相关文章

LR2023磨皮滤镜插件Portraiture4最新版

Portraiture4是一款智能磨皮的滤镜插件&#xff0c;该插件能够给Photoshop和Lightroom添加智能磨皮美化功能&#xff0c;可以帮助用户快速对图片中的人物的皮肤、头发、眉毛等部位进行美化&#xff0c;省去了手动调整的麻烦&#xff0c;大大提高P图的效率。Portraiture这是一款…

【线下沙龙】如何用项目管理的思维经营自己的生活

为什么自己参加那么多的学习&#xff0c;也没有过好自己的人生&#xff1f;这个问题出在哪里&#xff1f; 你勾画过自己未来的生活吗&#xff1f; 你没有渴望过的东西会出现在你的生活里吗&#xff1f; 如何实现自己想要的生活&#xff1f; 有一个全球性的调查问卷&#xff1a;…

IDEA运行IAM3.0的管理后台项目(WAR包运行)

1、查看打包方式 远程仓库拉取最新代码 首先查看项目打包方式&#xff0c;为war说明是在容器中运行的。 2、修改数据库配置 将数据库配置修改为本机配置&#xff0c;一般有一个properties配置文件&#xff0c;避免启动之后发现数据库不对又得重启。 3、 系统环境配置 Ct…

【前端笔试题一】:解析url路径中的query参数

前言 本文记录下在笔试过程中的前端笔试编程题目&#xff0c;会持续更新 1. 题目&#xff1a; 解析 url 路径中的 query 参数&#xff0c;比如&#xff1a;‘http://building/#/skeleton?serialNumber2023020818332821073&jobNo210347&target%7B%22a%22%3A%22b%22%2C…

Spring6—JdbcTemplate基础

JdbcTemplate是Spring提供的一个JDBC模板类&#xff0c;是对JDBC的封装&#xff0c;简化JDBC代码。 可以让Spring集成其他的ORM框架:Mybatis、Hibernate等 环境&#xff1a;JDK17IDEAMavenSpring6JdbcTemplate 环境准备 准备数据库表 新建模板 New Module Maven项…

Spring中更简单的存储和读取Bean

目录 一、存储Bean 1.1 配置扫描路径 1.2 使用注解存储Bean对象 1.2.1 五大类注解 1.2.2 方法注解Bean 二、获取Bean 2.1 属性注入 2.2 setter注入 2.3 构造方法注入 2.4 Resource注解 2.5 同一类型多个Bean报错 一、存储Bean 在xml时代&#xff0c;存储一个Bean对象…

力扣SQL刷题7

1132. 报告的记录 II 题型&#xff1a;表1&#xff0c;对列A分组&#xff0c;在列B满足某种条件下&#xff0c;&#xff08;出现在表2中的列C值个数&#xff09;/(列C个数)的比例&#xff0c; 对A分组各类别中取均值 解答1&#xff1a; select 列A&#xff0c;count(distinct …

Kotlin 面向对象(一)

【文字内容源于《疯狂Kotlin讲义》&#xff0c;代码内容原创】 目录 一、类和对象 1.定义类 2.对象的产生和使用 3.对象的this引用 二、方法详解 1.方法与函数的关系 2.中缀表示法 3.componentN方法与解构 4、数据类和返回多个值的函数 5、在Lambda表达式中结构 三…

PHP反序列化漏洞之pop链2

目录 题目&#xff1a; 题目代码&#xff1a; 分析&#xff1a;代码审计 通过以上分析&#xff0c;最终我们构建这个payload&#xff1a; 结果&#xff1a; 目标达到&#xff01; 题目&#xff1a; 这个题目分析就有难度了&#xff0c;需要掌握php的魔法方法的使用以及调用…

算法刷题打卡第85天:设计一个验证系统

设计一个验证系统 难度&#xff1a;中等 你需要设计一个包含验证码的验证系统。每一次验证中&#xff0c;用户会收到一个新的验证码&#xff0c;这个验证码在 currentTime 时刻之后 timeToLive 秒过期。如果验证码被更新了&#xff0c;那么它会在 currentTime &#xff08;可…

你评论,我赠书~【哈士奇赠书 - 13期】-〖Python程序设计-编程基础、Web开发及数据分析〗参与评论,即可有机获得

大家好&#xff0c;我是 哈士奇 &#xff0c;一位工作了十年的"技术混子"&#xff0c; 致力于为开发者赋能的UP主, 目前正在运营着 TFS_CLUB社区。 &#x1f4ac; 人生格言&#xff1a;优于别人,并不高贵,真正的高贵应该是优于过去的自己。&#x1f4ac; &#x1f4e…

100 行 shell 写个 Docker

作者&#xff1a;vivo 互联网运维团队- Hou Dengfeng 本文主要介绍使用shell实现一个简易的Docker。 一、目的 在初接触Docker的时候&#xff0c;我们必须要了解的几个概念就是Cgroup、Namespace、RootFs&#xff0c;如果本身对虚拟化的发展没有深入的了解&#xff0c;那么很…

java全栈知识点[面试篇](一)

jjava全栈知识点[面试篇]&#xff08;一&#xff09;阻塞与等待的状态转变⭐Synchronized本质上是通过什么保证线程安全的?volatile、synchronized和Lock如何保证可见性⭐Synchronized使得同时只有一个线程可以执行&#xff0c;性能比较差&#xff0c;有什么提升的方法?⭐syn…

Unity 进阶 之 AR/VR 3D空间场景中Laser镭射线拖拽UI实现问题的简单整理

Unity 进阶 之 AR/VR 3D场景中Laser镭射线拖拽UI实现问题的简单整理 目录 Unity 进阶 之 AR/VR 3D场景中Laser镭射线拖拽UI实现问题的简单整理 一、简单介绍 二、实现原理 三、注意事项 四、效果预览 五、简单实现步骤 常规拖拽 常规拖拽在3D空间拖拽位置跳动问题 解决…

C++003-C++变量和数据类型2

文章目录C003-C变量和数据类型2C数据类型数据类型及定义数据类型及类型大小浮点数据的使用**题目描述**&#xff1a;求阴影面积**题目描述**&#xff1a;计算园的周长和面积如何取消科学计数法表示浮点数iomanip的作用比较多:布尔变量的使用隐式转换与显式转换**题目描述**&…

JAVA环境变量配置步骤及测试(JDK的下载 安装 环境配置教程)

一&#xff1a;JDK的下载、安装和配置1、输入下载地址&#xff1a;https://www.oracle.com/downloads/往下滑&#xff0c;看到Developer Downloads &#xff0c;点击 java点击 Java (JDK) for Developers选择你想要下载的jdk版本4、 点击 JDK Downloads &#xff0c;往下拉&…

树莓派系统创建指南

无意中发现一个落灰的树莓派 故事便开始了…… 准备工作 树莓派 3B一张大于 8G 的 micro SD 卡一个读卡器HDMI 显示器及连接线、键盘、鼠标等外围设备 系统镜像下载 推荐两个树莓派镜像下载网站 树莓派官方网站&#xff1a;https://www.raspberrypi.com/software/树莓派实…

python+request+pytest+pytest-html集成的API自动化测试框架

对于框架任何问题&#xff0c;欢迎联系我&#xff01; 需要框架源码的&#xff0c;请私聊我&#xff01; 一、框架架构 二、项目目录结构 ├────.gitignore ├────case_utils/ 测试用例相关的工具类&#xff0c;包括HTTP请求封装及用例数据处理&#xff0c;用例文件生…

常用的辅助类2(StringBuilder、StringBuffer、处理时间相关的类、对象比较器)

Java知识点总结&#xff1a;想看的可以从这里进入 目录7.7、字符串相关类7.8、时间处理7.8.1、JDK8前7.8.2、JDK8后1、时间日期类2、格式化日期3、其他7.9、对象比较器7.7、字符串相关类 String&#xff1a;JDK1.0出现&#xff0c;字符串类&#xff0c;被final修饰其值不可改。…

30个HTML+CSS前端开发案例(三)

30个HTMLCSS前端开发案例&#xff08;11-15&#xff09;小米上称右侧悬浮菜单实现代码效果图自动轮播图效果实现代码效果图小米商城二级下拉菜单效果实现代码效果图时间轴效果实现代码效果图QQ音乐排行榜效果实现代码效果图资源包获取小米上称右侧悬浮菜单 实现代码 <!DOC…