JavaScript 中 let 和 var 的区别

image-20230811170942387


首先,let 和 var 都是用于声明变量的关键字,在老版 JavaScript 中也许你会见到 var 方式来声明变量,而现如今几乎都是使用 let 进行声明,接下来看看这两个关键字之间的区别。

1、作用域

  • var

    var 声明的变量在函数内部有效,如果在函数内部使用 var 声明一个变量,那么该变量在整个函数内部都是可见的。

    function example() {var x = 10;if (true) {var y = 20;console.log(x); // 输出: 10}console.log(y); // 输出: 20
    }
    
  • let

    let 声明的变量在块级作用域内有效,如果在块级作用域内使用let声明一个变量,那么该变量只在该块级作用域内可见。

    function example() {let x = 10;if (true) {let y = 20;console.log(x); // 输出: 10}console.log(y); // 报错: ReferenceError: y is not defined
    }
    
  • 小结

    使用 var 声明的变量具有函数作用域,而使用 let 声明的变量具有块级作用域。

2、变量提升

  • var

    var声明的变量会在其作用域内的顶部被提升,即可以在声明之前使用变量。

    console.log(x); // 输出: undefined
    var x = 10;
    
  • let

    let声明的变量不会被提升,即在声明之前使用变量会导致引用错误。

    console.log(x); // 报错: ReferenceError: x is not defined
    let x = 10;
    
  • 小结

    使用 var 声明的变量存在变量提升,而使用 let 声明的变量不存在变量提升。

3、重复声明

  • var

    使用var重复声明同一个变量不会报错,而是会覆盖之前的值。

    var x = 10;
    var x = 20;
    console.log(x); // 输出: 20
    
  • let

    使用let重复声明同一个变量会导致语法错误。

    let x = 10;
    let x = 20; // 报错: SyntaxError: Identifier 'x' has already been declared
    
  • 小结

    使用 var 可以重复声明同一个变量,而使用 let 不允许在同一个作用域内重复声明同一个变量。

—END

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

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

相关文章

【C++】static_cast基本用法(详细讲解)

👉博__主👈:米码收割机 👉技__能👈:C/Python语言 👉公众号👈:测试开发自动化【获取源码商业合作】 👉荣__誉👈:阿里云博客专家博主、5…

面试热题(字符串相加)

给定两个字符串形式的非负整数 num1 和num2 ,计算它们的和并同样以字符串形式返回。 你不能使用任何內建的用于处理大整数的库(比如 BigInteger), 也不能直接将输入的字符串转换为整数形式。 输入:num1 "11"…

Debian 12.1 正式发布

导读Debian 12.1 现已发布,这是对稳定发行版 Debian 12(代号 Bookworm )的首次更新。本次发布主要增加了安全问题的修正,并对严重问题进行了一些调整。 一些更新内容包括: 妥善处理系统用户的创建;修复 eq…

Jmeter请求接口返回值乱码解决

乱码示例 解决步骤: 1.打开Jmeter安装目录下的bin目录,找到jmeter.properties 2.使用记事本或其他编译工具打开jmeter.properties文件,然后全局搜索sampleresult.default.encoding 3.在文件中添加sampleresult.default.encodingutf-8,保存…

mac安装nvm管理工具遇到的问题和解决方法

nvm 是一款可以管理多版本node的工具,因为是刚买没多久的电脑之前用的都是windows,昨天折腾了一下午终于倒腾好了 第一步: 卸载电脑已有的node;访问nvm脚本网址,另存为到电脑上任何目录,我是放在桌面上的…

使用eXosip+ffmpeg、ffplay命令行实现sip客户端

文章目录 前言一、关键实现1、主要流程2、解决端口冲突(1)、出现原因(2)、解决方法 3、解析sdp(1)、定义实体(2)、解析视频(3)、解析音频 4、命令行推拉流&am…

threejs点击模型实现模型边缘高亮的选中效果--更改后提高帧率

先来个效果图 之前写的那个稍微有点问题,帧率只有30,参照官方代码修改后,帧率可以达到50了,在不全屏的状态下,帧率60 1.首先需要导入库 // 用于模型边缘高亮 import { EffectComposer } from "three/examples/js…

github 无语的问题,Host does not existfatal: Could not read from remote repository.

Unable to open connection: Host does not existfatal: Could not read from remote repository. image.png image.png image.png Please make sure you have the correct access rights and the repository exists. 如果github desktop和git pull 和git clone全部都出问题了&…

[保研/考研机试] KY102 计算表达式 上海交通大学复试上机题 C++实现

描述 对于一个不存在括号的表达式进行计算 输入描述: 存在多组数据,每组数据一行,表达式不存在空格 输出描述: 输出结果 示例1 输入: 6/233*4输出: 18思路: ①设立运算符和运算数两个…

视觉学习(七)---Flask 框架下接口调用及python requests 实现json字符串传输

在项目实施过程中需要与其他系统进行接口联调,将图像检测的结果传递给其他系统接口,进行逻辑调用。这中间的过程可以通过requests库进行实现。 1.安装requests库 pip install requests2.postman 接口测试 我们先通过postman 了解下接口调用&#xff0…

在vue3+vite项目中使用jsx语法

如果我掏出下图,阁下除了私信我加入学习群,还能如何应对? 正文开始 前言一、下载资源二、利用vite工具引入babel插件总结 前言 最近在为部署人员开发辅助部署的工具,技术栈是vue3viteelectron,在使用jsx语法时&#x…

08-2_Qt 5.9 C++开发指南_坐标系统和坐标变换

文章目录 1. 坐标变换函数2. 视口和窗口 1. 坐标变换函数 QPainter 在窗口上绘图的默认坐标系统如下图所示,这是绘图设备的物理坐标。 为了绘图的方便,QPainter 提供了一些坐标变换的功能,通过平移、旋转等坐标变换,得到一个逻辑…

linux Ubuntu 更新镜像源、安装sudo、nvtop、tmux

1.更换镜像源 vi ~/.pip/pip.conf在打开的文件中输入: pip.conf [global] index-url https://pypi.tuna.tsinghua.edu.cn/simple按下:wq保存并退出。 2.安装nvtop 如果输入指令apt install nvtop报错: E: Unable to locate package nvtop 需要更新一下apt&a…

gitlab 503 错误的解决方案

首先使用 sudo gitlab-ctl status 命令查看哪些服务没用启动 sudo gitlab-ctl status 再用 gitlab-rake gitlab:check 命令检查 gitlab。根据发生的错误一步一步纠正。 gitlab-rake gitlab:check 查看日志 tail /var/log/gitlab/gitaly/current删除gitaly.pid rm /var/opt…

SpringBoot 的自动装配特性

1. Spring Boot 的自动装配特性 Spring Boot 的自动装配(Auto-Configuration)是一种特性,它允许您在应用程序中使用默认配置来自动配置 Spring Framework 的各种功能和组件,从而减少了繁琐的配置工作。通过自动装配,您…

MongoDB【无敌详细,建议收藏】

"探索MongoDB的无边之境:沉浸式数据库之旅" 欢迎来到MongoDB的精彩世界!在这个博客中,我们将带您进入一个充满创新和无限潜力的数据库领域。无论您是开发者、数据工程师还是技术爱好者,MongoDB都将为您带来一场令人心动…

【java实习评审】对推电影详情模块的基本电影模型设计到位,并能考虑到特色业务的设计

大家好,本篇文章分享一下【校招VIP】免费商业项目"推电影"第一期 电影详情模块 Java同学的开发文档周最佳作品。该同学来自暨南大学电子信息专业。 本项目的商业出发点: 豆瓣评分越来越水,不太符合年青人的需求,我们推…

【雕爷学编程】Arduino动手做(12)---霍尔磁场传感器模块2

37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的&#x…

【Hystrix技术指南】(5)Command创建和执行实现

创建流程 构建HystrixCommand或者HystrixObservableCommand对象 *使用Hystrix的第一步是创建一个HystrixCommand或者HystrixObservableCommand对象来表示你需要发给依赖服务的请求。 若只期望依赖服务每次返回单一的回应,按如下方式构造一个HystrixCommand即可&a…

淘宝商品价格查询接口 批量获取商品详情页数据 支持高并发(含调用实例)

接口开发背景 淘宝商品价格查询可以帮助消费者了解和比较不同商品的价格,从而能够作出更明智的购买决策。通过价格查询,消费者可以找到最具性价比的商品,避免被高价或低价的商品误导。此外,价格查询还可以帮助消费者了解市场行情…