【前端每日基础】day2 const var const的区别

var: 在早期的 JavaScript 中,var 是声明变量的唯一方式。它有以下特点:
var 声明的变量是函数作用域(function-scoped),而不是块作用域(block-scoped),这意味着它们在整个函数内部都是可见的。
可以在声明变量之前使用(变量提升),这可能会导致一些意外的行为。

变量提升是 JavaScript 中的一种特性,它允许在声明变量之前对变量进行访问。具体来说,当使用 var 声明变量时,JavaScript 引擎会在代码执行之前将变量的声明“提升”到当前作用域的顶部,而不管实际的声明语句是在哪里。这意味着你可以在变量声明之前引用变量,而不会抛出错误。
for example:

console.log(x); // undefined
var x = 10;

在这个例子中,虽然 console.log(x) 在 var x = 10; 之前,但不会抛出错误。这是因为变量声明被提升到了作用域的顶部,实际上相当于如下的代码:

var x;
console.log(x); // undefined
x = 10;

尽管变量提升在某些情况下可能有用,但它也可能导致一些意外的行为,尤其是对于初学者。例如,变量提升可能导致在预期之外使用变量的值,因为变量的实际赋值语句可能在预期之后执行。这可能会引发 bug 和难以调试的代码。

因此,建议在声明变量之前就使用变量可能会导致代码难以理解和维护,所以在现代 JavaScript 中,推荐使用 let 和 const 关键字来声明变量,因为它们不会导致变量提升,也可以帮助减少意外的行为。

let: let 是 ES6 引入的新的声明变量的方式。它修复了 var 的一些问题,具有以下特点:
let 声明的变量是块作用域的,只在声明的块级作用域内有效,这通常是一对花括号 {}。
不允许变量提升,必须先声明后使用。

块作用域(block scope)是指变量在指定的代码块内可见和可访问的范围。在 JavaScript 中,使用 let 和 const 关键字声明的变量具有块作用域。

一个块(block)通常指的是一对花括号 {} 包裹起来的一段代码,比如一个函数体、一个 if 语句块、一个循环体等等。在这个块内部声明的变量,在块外部是不可见的。
such as:

{let x = 10;console.log(x); // 输出 10
}console.log(x); // 报错:x is not defined

在这个例子中,变量 x 是在一个块(由大括号 {} 包围)内部声明的,它只在这个块内部可见。因此,当我们在这个块外部尝试访问 x 时,会得到一个 “x is not defined” 的错误,因为 x 不在这个作用域内。

因此,块作用域就是指变量的可见范围限定在当前的代码块内部,超出了这个范围就无法访问这个变量。这与之前 JavaScript 中只有函数作用域的 var 声明方式形成了对比。

const: const 也是 ES6 引入的新的声明变量的方式,与 let 类似,但有以下不同:
const 声明的是常量,意味着它们的值不能再重新赋值。但请注意,对于复杂类型(如数组和对象),虽然不能重新分配整个变量,但可以修改其内容。
像 let 一样,const 也是块级作用域的。

复杂类型(也称为引用类型)指的是 JavaScript 中的对象(Object)和数组(Array)。相对于简单类型(例如数字、字符串、布尔值等),复杂类型可以存储更多的数据,并且可以通过引用来访问和修改。

在 JavaScript 中,变量可以存储两种类型的值:简单值(例如数字、字符串、布尔值)和复杂值(例如对象和数组)。简单值是按值传递的,而复杂值是按引用传递的。

const 关键字用于声明常量,它意味着常量的值在声明后不能被重新赋值。例如:

const PI = 3.14;
PI = 3.14159; // TypeError: Assignment to constant variable.

在这个例子中,我们尝试重新赋值常量 PI,但由于使用了 const 关键字声明,因此会抛出类型错误(TypeError)。

但对于复杂类型(对象和数组),const 声明的常量只保证变量指向的内存地址不会改变,但并不保证该内存地址中的内容不会改变。这意味着,尽管不能重新分配整个变量,但是可以修改其内容。

const myArray = [1, 2, 3];
myArray.push(4); // 可以修改数组的内容
console.log(myArray); // 输出 [1, 2, 3, 4]

在这个例子中,myArray 是一个数组常量,我们不能将其重新赋值为另一个数组,但是可以修改该数组的内容,例如向数组中添加新元素。这是因为 const 只能保证变量的引用不变,而不是变量指向的对象或数组的内容不变。

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

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

相关文章

度小满——征信报告图建模

目录 背景介绍 发展趋势 技术演进 图在金融风控领域中的演进 度小满图机器学习技术体系 案例 征信报告介绍 征信报告图建模

Vuex 和 Pinia 两个状态管理模式的区别

Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia。(实际项目中千万不要即用Vuex又用Pinia,不然你会被同事‘’请去喝茶的‘’。 一、安装(常用命令安…

JavaScript百炼成仙自学笔记——13

函数七重关之六(“new”一个函数) 看个代码: function hello(){console.log(this); } 1、this:也是JavaScript中的一个关键字,永远指向当前函数的调用者 解释一下,有两层意思: ①this要嘛不出现&#…

Vue 组件参数传递:多个参数 vs 单个对象

在Vue开发中,我们经常需要在组件之间传递数据。当涉及到传递多个参数时,我们可以选择将这些参数分开传递,也可以将它们整合到一个对象中传递。那么在这两种方式中,哪种更好呢?让我们来探讨一下。 多个参数传递的优缺点…

深入理解 Linux 文件系统与动静态库

目录 一、Linux 文件系统中的 inode 二、软硬链接 三、动静态库 在 Linux 系统中,文件系统和动静态库是非常重要的概念。本文将带大家深入了解这些内容,让你在技术之路上更进一步。 一、Linux 文件系统中的 inode 何为文件系统?对计算机中…

通用型产品发布解决方案(基础环境搭建)

文章目录 1.项目技术栈和前置技术2.创建Linux平台1.需求分析2.安装Virtual Box1.BIOS里修改设置开启虚拟化设备支持(f2 或f10)2.任务管理器 -> cpu 查看虚拟化是否开启3.卸载方式4.安装6.1.265.管理员身份运行,选择安装位置6.一直下一步&a…

PHPStudy 访问网页 403 Forbidden禁止访问

涉及靶场 upload-labd sqli-labs pikachu dvwa 以及所有部署在phpstudy中的靶场 注意:一定要安装解压软件 很多同学解压靶场代码以后访问报错的原因是:电脑上没有解压软件。 这个时候压缩包看起来就是黄色公文包的样子,右键只有“全部提取…

大厂Java面试题:MyBatis是如何进行分页的?分页插件的实现原理是什么?

大家好,我是王有志。 今天给大家带来的是一道来自京东的关于 MyBatis 实现分页功能的面试题:MyBatis是如何进行分页的?分页插件的实现原理是什么?通常,分页的方式可以分为两种: 逻辑(内存&…

如何开启深色模式【攻略】

如何开启深色模式【攻略】 前言版权推荐如何开启深色模式介绍手机系统手机微信手机QQ手机快手手机抖音 电脑系统电脑微信电脑QQ电脑WPS电脑浏览器 最后 前言 2024-5-9 20:48:21 深色模式给人以一种高级感。 本文介绍一些常用软件深色模式的开启 以下内容源自《【攻略】》 仅…

在PyCharm中自动添加文件头注释

在PyCharm中自动添加文件头注释可以通过使用模板和插件来实现。以下是一种常见的方法: 创建注释模板: 打开PyCharm,点击菜单栏中的 “File” -> “Settings”(或者按下 Ctrl Alt S)。在弹出的窗口中,展…

从零开始写 Docker(十三)---实现 mydocker rm 删除容器

本文为从零开始写 Docker 系列第十三篇,实现类似 docker rm 的功能,使得我们能够删除容器。 完整代码见:https://github.com/lixd/mydocker 欢迎 Star 推荐阅读以下文章对 docker 基本实现有一个大致认识: 核心原理:深…

C语言柔性数组、柔性数组的特点、柔性数组的使用等的介绍

文章目录 前言一、柔性数组二、柔性数组的特点三、柔性数组的使用总结 前言 C语言柔性数组、柔性数组的特点、柔性数组的使用等的介绍。 一、柔性数组 C99中,结构中的最后一个元素是允许未知大小的数组,这就叫做【柔性数组】成员。 struct S {int i;i…

那些年使用过的UA头

一些WAF会根据扫描器UA头进行屏蔽 UA头 在sqlmap 中可以使用 –random-agnet /xx.txt 来更换UA头 Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36 OPR/26.0.1656.60 Opera/8.0 (Windows NT 5.1; U; en) Mozi…

谷歌CEO最新访谈:AI浪潮仍处于早期阶段,公司未来最大威胁是执行力不足

作为搜索领域无可争议的霸主,谷歌改变了我们生活的方方面面,从日常琐事到工作事务,再到我们的沟通方式。多年来,谷歌一直是互联网的窗口,为我们提供大量知识和信息,但如今,随着其他类似平台的崛…

Ubuntu安装Syzkaller——相关报错

目录 一:网络 二:安装go编译器 141 objtool: Dont fail on missing symbol table

HarmonyOS开发之ArkTS使用:用户登录页面应用

目录 目录 前言 关于HarmonyOS 环境准备 新建项目 设计用户登录页面 1. 布局设计 2. 编写ArkTS代码 运行和测试 结束语 前言 随着HarmonyOS(鸿蒙操作系统)的不断发展,越来越多的开发者开始投入到这个全新的生态系统中,而…

element-ui select 下拉框做成下拉加载更多

注意&#xff1a; vue 版本需要 ≥ 3.3 1、html <el-selectv-model"relation_type"placeholder"请选择合作类型"ref"select" ><el-optionv-for"item in cooperationTypeList":key"item.value":label"item.la…

车载测试系列:车载测试Bug定位与分析

车载Bug定位 1.1 模拟复现条件 能够复现bug才能对问题进行定位、解决以及验证。找到bug存在的特定的条件&#xff0c;进行重现。对于依赖外部输入的条件&#xff0c;如果条件比较复杂难以模拟可以在程序里预设直接进入对应状态。 1.2 打印Log 根据问题的现象&#xff0c;在…

Spring-依赖来源

依赖来源 1 Spring BeanDefinition&#xff08;xml,注解&#xff0c;BeanDefinitionBuilder, 还有API实现的单例对象&#xff09; 2 Spring 内建BeanDefinition 3 内建单例对象 依赖注入和依赖查找的区别 Context.refresh() 的时候会调用这个方法&#xff1a;prepareBeanF…

爬虫跟代理ip有什么不同

爬虫与代理IP的区别主要体现在它们的定义、功能和使用场景上。以下是对这两者的详细比较&#xff1a; 定义 爬虫&#xff1a; 爬虫是一种自动抓取互联网信息的脚本或者程序。它可以按照一定的规则&#xff0c;自动化地浏览网络中的信息&#xff0c;并将这些信息抓取下来&#x…