ES6+新特性,var、let 和 const 的区别

在 JavaScript 中,varletconst 都用于声明变量,但它们有一些重要的区别,主要体现在 作用域、可变性和提升机制 等方面。

1. 作用域(Scope)

  • var: var 声明的变量是 函数作用域,也就是说,它只在函数内部有效。如果 var 声明在函数外面,它的作用域就是全局的。如果 var 在一个代码块内(如 if 语句中)声明,它的作用域并不限于该代码块,而是整个函数或全局作用域。

if (true) { var a = 10; } 
console.log(a);// 10,因为a是函数作用域或者全局作用域
  • letconst: letconst 都是 块级作用域,这意味着它们的作用域限制在所在的代码块(如 {} 包裹的部分)内。

    if (true){ let b = 20; const c = 30; } 
    console.log(b); // ReferenceError: b is not defined 
    console.log(c); // ReferenceError: c is not defined

    这里,letconst 声明的变量只在 if 语句的代码块内部有效。

2. 变量提升(Hoisting)

  • var: var 声明的变量会 被提升到函数或全局作用域的顶部,但初始化不会被提升。所以,变量在声明之前仍然能访问到,但值为 undefined

    console.log(a); // undefined,因为声明被提升,但赋值没有 
    var a = 5;
  • letconst: letconst 声明的变量也会被提升,但 在初始化之前不能访问,如果访问它们会导致 ReferenceError。这就是所谓的 "暂时性死区"(Temporal Dead Zone, TDZ)

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

    这样,letconst 声明的变量不能在声明之前访问。

3. 可变性(Mutability)

  • varlet: 都声明的是 可变变量,即你可以在后续重新赋值。

    示例:

    var x = 10; x = 20; // 允许重新赋值 
    let y = 30; y = 40; // 也允许重新赋值
  • const: const 声明的是 常量,意味着你声明时必须给它赋值,并且之后不能再修改它的绑定(不能重新赋值)。但是,如果 const 绑定的是一个对象或数组,那么对象的内容是可以修改的(例如添加、删除属性或元素)。

    
    const z = 50; z = 60; // TypeError: Assignment to constant variable. 
    const obj = { a: 1 }; 
    obj.a = 2; // 这是合法的,修改对象的内容
    console.log(obj.a); // 2

    这里,const 防止了对变量的重新赋值,但并不阻止修改对象的内容。

4. 全局作用域中的 var 与 let/const

  • var: 如果你在全局作用域中使用 var 声明一个变量,它会成为全局对象(浏览器中的 window 或 Node.js 中的 global)的属性。

    示例:

    var globalVar = 'I am global'; 
    console.log(window.globalVar); // 'I am global' 在浏览器中
  • letconst: 如果你在全局作用域中使用 letconst,它们不会成为全局对象的属性。

    示例:

    let globalLet = 'I am block-scoped'; 
    console.log(window.globalLet); // undefined

总结对比

特性varletconst
作用域函数作用域块级作用域块级作用域
提升变量提升,但值为 undefined变量提升,但不能在初始化前使用变量提升,但不能在初始化前使用
可变性可重新赋值可重新赋值不能重新赋值(但对象内容可修改)
全局作用域行为成为全局对象的属性不会成为全局对象的属性不会成为全局对象的属性

选择使用

  • 如果你需要声明一个变量,并且后续可能会重新赋值,使用 let
  • 如果你需要一个常量(值不变),使用 const
  • 避免使用 var,因为它的作用域是函数级别的,容易导致意外的错误,尤其是在复杂的代码中。

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

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

相关文章

模拟电子技术-常用半导体器件

模拟电子技术-常用半导体器件 一、半导体基础知识二、PN结2.1 PN结简介2.2 PN结正向导电性2.2.1 正向电压2.2.2 反向电压2.2.3 PN结伏安特性 三、二极管3.1 二极管伏安特性曲线3.2 二极管参数和等效电路3.2.1 性能参数3.2.2 等效电路 3.3 二极管限幅和整流应用(正向特性)3.4 稳…

01-02 三元组与七元组

01-02 三元组与七元组 好的!以下是关于网络中的 三元组(3-Tuple) 和 七元组(7-Tuple) 的详细扩展说明,包括它们的组成、用途以及与五元组的对比。 1. 三元组(3-Tuple) 组成 三元组…

2024年博客之星主题创作|2024年蓝桥杯与数学建模年度总结与心得

引言 2024年,我在蓝桥杯编程竞赛和数学建模竞赛中投入了大量时间和精力,这两项活动不仅加深了我对算法、数据结构、数学建模方法的理解,还提升了我的解决实际问题的能力。从蓝桥杯的算法挑战到数学建模的复杂应用,我在这些竞赛中…

javascript-es6 (一)

作用域(scope) 规定了变量能够被访问的“范围”,离开了这个“范围”变量便不能被访问 局部作用域 函数作用域: 在函数内部声明的变量只能在函数内部被访问,外部无法直接访问 function getSum(){ //函数内部是函数作用…

数据的秘密:如何用大数据分析挖掘商业价值

数据的秘密:如何用大数据分析挖掘商业价值 在这个数据爆炸的时代,我们每天都在产生、存储和处理着海量的数据。然而,仅仅拥有数据并不等于拥有价值。就像拥有一座金矿,不开采和提炼,最终只是一堆毫无用处的石头。如何…

使用eNSP配置GRE VPN实验

实验拓扑 实验需求 1.按照图示配置IP地址 2.在R1和R3上配置默认路由使公网区域互通 3.在R1和R3上配置GRE VPN,使两端私网能够互相访问,Tunne1口IP地址如图 4.在R1和R3上配置RIPv2来传递两端私网路由 GRE VPN配置方法: 发送端: …

Ansible自动化运维实战--script、unarchive和shell模块(6/8)

文章目录 一、script模块1.1、功能1.2、常用参数1.3、举例 二、unarchive模块2.1、功能2.2、常用参数2.3、举例 三、shell模块3.1、功能3.2、常用参数3.3、举例 一、script模块 1.1、功能 Ansible 的 script 模块允许你在远程主机上运行本地的脚本文件,其提供了一…

大数据Hadoop入门1

目录 相关资料 第一部分 1.课程内容大纲和学习目标 2.数据分析和企业数据分析方向 3.数据分析基本流程步骤 4.大数据时代 5.分布式和集群 6.Linux操作系统概述 7.VMware虚拟机概念与安装 8.centos操作系统的虚拟机导入 9.VMware虚拟机常规使用、快照 第二部分 1.课…

【Elasticsearch】doc_values 可以用于查询操作

确实,doc values 可以用于查询操作,尽管它们的主要用途是支持排序、聚合和脚本中的字段访问。在某些情况下,Elasticsearch 也会利用 doc values 来执行特定类型的查询。以下是关于 doc values 在查询操作中的使用及其影响的详细解释&#xff…

TS开发的类型索引目录

TypeScript 相关知识整理 一、相关文档 Web API 类型:https://developer.mozilla.org/zh-CN/docs/Web/APIHTML DOM类型:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElementReact类型文档:https://react-typescript-cheatsheet.…

Python 对列表进行排序的 5 种方法

在 Python 中,排序是一个非常常见且重要的操作,尤其是对列表的排序。Python 提供了多种方法来实现排序操作,从内置函数到自定义排序逻辑,都可以方便地满足不同的需求。以下将介绍 Python 对列表进行排序的 5 种方法,并…

2025年1月26日(超声波模块:上拉或下拉电阻)

添加上拉或下拉电阻是在电子电路设计和嵌入式系统编程中常用的一种技术手段,下面为你详细解释其含义、作用和应用场景。 基本概念 在数字电路里,引脚的电平状态通常有高电平(逻辑 1)和低电平(逻辑 0)两种…

项目概述与规划 (I)

项目概述与规划 (I) JavaScript的学习已经接近尾声了,最后我们将通过一个项目来讲我们在JavaScript中学习到的所有都在这个项目中展现出来,这个项目的DEMO来自于Udemy中的课程,作者是Jonas Schmedtmann; 项目规划 项目步骤 用户…

深入探讨Web应用开发:从前端到后端的全栈实践

目录 引言 1. Web应用开发的基本架构 2. 前端开发技术 HTML、CSS 和 JavaScript 前端框架与库 响应式设计与移动优先 3. 后端开发技术 Node.js(JavaScript后端) Python(Flask和Django) Ruby on Rails Java(S…

docker如何查看容器启动命令(已运行的容器)

docker ps 查看正在运行的容器 该命令主要是为了详细展示查看运行时的command参数 # 通过docker --no-trunc参数来详细展示容器运行命令 docker ps -a --no-trunc | grep <container_name>通过docker inspect命令 使用docker inspect&#xff0c;但是docker inspect打…

为AI聊天工具添加一个知识系统 之62 详细设计 之3:AI操作系统 之1

本文要点 要点 考虑下面的一组整理&#xff08;重点看一下用词、分组分行分类以及 排列组合&#xff09;&#xff0c;看看应该如何将他们组织到本项目程序中&#xff0c;是否同时还丰富了前面讨论的AI操作系统和Lexicographer 程序的内容。 1、工作任务&#xff1a;运行时编译…

项目集成RabbitMQ

文章目录 1.common-rabbitmq-starter1.创建common-rabbitmq-starter2.pom.xml3.自动配置1.RabbitMQAutoConfiguration.java2.spring.factories 2.测试使用1.创建common-rabbitmq-starter-demo2.目录结构3.pom.xml4.application.yml5.TestConfig.java 配置交换机和队列6.TestCon…

LLM大模型推理中的常见数字

1. 聊天机器人Chatbot&#xff0c;一般&#xff0c;input tokens : output tokens 1100:15 2. LLama2的tokenizer&#xff0c;中文情况下&#xff0c;token:汉字1:1.01 3. prefilling阶段的吞吐量(tokens/s)&#xff0c;一般是decoding阶段的50~100倍。 4. 4张带有NVLink的…

【AI日记】25.01.26

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】 AI kaggle 比赛&#xff1a;Forecasting Sticker Sales 读书 书名&#xff1a;自由宪章 律己 AI&#xff1a;6 小时作息&#xff1a;00:30-8:30短视频&#xff1a;大于 1 小时读书和写作&a…

RK3568 adb使用

文章目录 一、adb介绍**ADB 主要功能****常用 ADB 命令****如何使用 ADB****总结** 二、Linux下载adb**方法 1&#xff1a;使用包管理器&#xff08;适用于 Ubuntu/Debian 系统&#xff09;****方法 2&#xff1a;通过 Snap 安装&#xff08;适用于支持 Snap 的系统&#xff09…