1. js中let、var、const定义变量区别与方式

2023-09-18 11:20:11

1 声明语法

var upperA = 'A';
let upperB = 'B';
const upperC = 'C';

只声明不初始化的结果,【 const定义的常量不可以修改,而且必须初始化

// var 声明变量
var upperA;
console.log('打印大写的A:%s', upperA);
// 结果:打印大写的A:undefined
 
// let 声明变量
var upperB;
console.log('打印大写的B:%s', upperB);
// 结果:打印大写的B:undefined
 
// const 声明常量
const upperC;
console.log('打印大写的C:%s', upperC);
// 错误:SyntaxError: Missing initializer in const declaration

声明后值是否可修改,【 const定义的常量不可以修改,而且必须初始化

// var 声明变量初始化并修改值
var upperA = 'A';
console.log('打印upperA:%s', upperA);
// 结果:打印upperA:A
upperA = 'LetterA';
console.log('打印upperA:%s', upperA);
// 结果:打印upperA:LetterA
 
// let 声明变量初始化并修改值
var upperB = 'B';
console.log('打印大写的B:%s', upperB);
// 结果:打印upperB:B
upperB = 'LetterB';
console.log('打印大写的B:%s', upperB);
// 结果:打印upperB:LetterB
 
// const 声明常量初始化并修改值
const upperC = 'C';
console.log('打印upperC:%s', upperC);
// 结果:打印upperC:C
upperC = 'LetterC';
console.log('打印upperC:%s', upperC);
// 错误:TypeError: Assignment to constant variable.

2 变量提升

浏览器在运行代码之前会进行预解析,首先解析函数声明,定义变量,解析完之后再对函数、变量进行运行、赋值等
不论var声明的变量处于当前作用域的第几行,都会提升到作用域的头部
var 声明的变量会被提升到作用域的顶部并初始化为undefined,而let声明的变量不会被提升到作用域的顶部

console.log('打印upperA:%s', upperA);
// 结果:打印upperA:undefined
console.log('打印upperB:%s', upperB);
// 错误:ReferenceError: upperB is not defined
var upperA = 'A';
let upperB = 'B';

3  是否允许重复声明同一个变量

var允许在相同作用域内,重复声明同一个变量,后面声明的变量会覆盖前面声明的变量
let不允许在相同作用域内,重复声明同一个变量

var upperA = 'A';
let upperB = 'B';
// 重复声明
var upperA = 'LetterA';
let upperB = 'LetterB';
console.log('打印upperA:%s', upperA);
console.log('打印upperB:%s', upperB)
// 错误:SyntaxError: Identifier 'upperB' has already been declared

4 作用域

在ES6之前,我们都是用var来声明变量,而且JS只有函数作用域和全局作用域,没有块级作用域,所以{}限定不了var声明变量的访问范围

{
    var upperA = 'A';
}
console.log('打印upperA:%s', upperA);
# 结果: 打印upperA:A
 
// ---------- ES6新增的let,可以声明块级作用域的变量。----------
{
    let upperB = 'B';
}
console.log('打印upperB:%s', upperB);
// 错误: ReferenceError: upperB is not defined

5 let配合for循环的独特应用

let非常适合用于 for循环内部的块级作用域。
JS中的for循环体比较特殊,每次执行都是一个全新的独立的块作用域,用let声明的变量传入到 for循环体的作用域后,不会发生改变,不受外界的影响。

for (var i = 0; i <10; i++) {  
    setTimeout(function() {    // 同步注册回调函数到 异步的 宏任务队列。
        console.log(i);        // 执行此代码时,同步代码for循环已经执行完成
    }, 0);
}
// 输出结果:10   共10个
// 这里面的知识点: JS的事件循环机制,setTimeout的机制等
 
// ---------- 如果把 var改成 let声明:----------
// i虽然在全局作用域声明,但是在for循环体局部作用域中使用的时候,变量会被固定,不受外界干扰。
for (let i = 0; i < 10; i++) { 
    setTimeout(function() {
        console.log(i);    //  i 是循环体内局部作用域,不受外界影响。
    }, 0);
}
// 输出结果:0  1  2  3  4  5  6  7  8 9  

更多推荐

OpenCV(四十四):亚像素级别角点位置优化

1.角点位置亚像素位置优化原理介绍亚像素优化的原理在于通过对初始角点位置的微小调整,利用更精确的灰度信息,来获取更准确的角点位置。传统的角点检测算法基于像素级别的灰度变化来定位角点,而亚像素优化则进一步利用图像灰度的局部变化进行更精细的插值,提高了角点位置的准确度。2.优化角点亚像素位置函数cornerSubPix()

vue实现页面上传文件夹压缩后传给服务器

需求:点击页面按钮上传文件夹,但是需要经过前端压缩后再上传到服务器(至于为什么不先打好压缩包再直接上传,领导的意思是他要上传的文件在本地是加密的,上传到浏览器的文件是解密的,并不是很懂但是需求还是得完成)1.首先下载所需要的插件jszip和FileSavernpminstalljszipnpminstallfile-s

Windows系统如何部署Wing FTP Server与公网远程访问【内网穿透】

WingFTPServer安装配置结合内网穿透实现公网访问本地站点文章目录WingFTPServer安装配置结合内网穿透实现公网访问本地站点前言1.WingFTPServer下载安装2.WingFTPServer配置部署3.安装cpolar内网穿透3.1注册账号3.2下载cpolar客户端3.3登录cpolarwebu

封装七牛云存储工具类

文章目录封装七牛云存储工具类(==为啥选择七牛云?当然是因为它能免费使用喽!!!白嫖怪哈哈哈!!!==)图片存储方案JavaSDK操作七牛云封装工具类封装七牛云存储工具类(为啥选择七牛云?当然是因为它能免费使用喽!!!白嫖怪哈哈哈!!!)图片存储方案在实际开发中,我们会有很多处理不同功能的服务器。例如:应用服务器:负责

嵌入式-开源项目准备

考虑简历上写几个开源项目:嵌入式相关开源项目、库、资料------持续更新中_嵌入式开源组件_看山是山_Lau的博客-CSDN博客本贴精心汇总了一些嵌入式相关资源,包括但不限于编程语言、单片机、开源项目、物联网、操作系统、Linux、计算机等资源。_嵌入式开源组件https://blog.csdn.net/weixin

月木学途开发 4.公告模块

概述效果图数据库设计DROPTABLEIFEXISTS`announcement`;CREATETABLE`announcement`(`announcementId`int(11)NOTNULLAUTO_INCREMENT,`announcementTitle`varchar(255)DEFAULTNULL,`ann

邮件数据安全案例 | 有一种遇见,叫相见恨晚

Mr.赵回忆和联通相遇的时刻,他说,用一句诗来形容恰如其分,“众里寻他千百度,蓦然回首,那人却在,灯火阑珊处”。中国联合网络通信集团有限公司在国内31个省(自治区、直辖市)和境外多个国家和地区设有分支机构,以及130多个境外业务接入点,拥有覆盖全国、通达世界的现代通信网络和全球客户服务体系。“大联接”用户规模超过9亿。

智慧云图书馆: 能支撑智慧图书馆服务体系的图书馆管理与服务平台

一、开源项目简介柏拉图PLATO智慧云图书馆:能支撑智慧图书馆服务体系的图书馆管理与服务平台。二、开源协议未使用主流开源协议三、界面展示四、功能概述平台优势总分馆架构:不再是信息的孤岛,而是共享信息的平台。友好的界面:通过简洁易用的平台界面,提高工作效率。智能的平台:不仅仅是管理平台,更是智能的连接和服务平台。服务大数

Tomcat部署及优化

Tomcat部署及优化一、Tomcat1.Tomcat简介2.Tomcat核心组件2.1什么是servlet2.2什么是JSP3.Tomcat的作用4.Tomcat组件结构4.1Container结构分析5.Tomcat请求过程二、Tomcat服务部署1.安装JDK1.2设置JDK环境变量2.安装启动Tomcat2.1

【转载保存】词性还原和词干的区别

词形还原(lemmatization),是把一个任何形式的语言词汇还原为一般形式(能表达完整语义),而词干提取(stemming)是抽取词的词干或词根形式(不一定能够表达完整语义)。词形还原和词干提取是词形规范化的两类重要方式,都能够达到有效归并词形的目的,二者既有联系也有区别现将共同点和联系总结为以下4方面:(1)目

python教程:使用gevent实现高并发并限制最大并发数

嗨喽~大家好呀,这里是魔王呐❤~!python更多源码/资料/解答/教程等点击此处跳转文末名片免费获取importtimeimportgeventfromgevent.poolimportPoolfromgeventimportmonkey#一,定义最大并发数p=Pool(20)#二,导入gevent猴子补丁,没有它,

热文推荐