Js中var,let,const的区别

2023-10-27

一:区别:

1、var声明的变量属于函数作用域,而let和const声明的变量属于块级作用域;(js作用域在上篇文章) 

2、var声明的变量存在变量提升,而let和const没有

3、var声明的变量可以重复声明,而在同一块级作用域,let变量不能重新声明,const常量不能修改(对象的属性和方法,数组的内容可以修改)

二:var声明的作用域

1. 使用var声明的变量,这个变量属于当前的函数作用域,如果变量的声明在任何函数外,那么这个变量就属于全局作用域

var a = 1; //此处声明的变量a为全局变量

function foo(){

   var a = 2;//此处声明的变量a为函数foo的局部变量

   console.log(a);//2

}

foo();

console.log(a);//1

2.如果在声明变量时,省略 var 的话,该变量就会变成全局变量,如全局作用域中存在该变量,就会更新其值

var a = 1; //此处声明的变量a为全局变量

function foo(){

   a = 2;//此处的变量a也是全局变量

   console.log(a);//2

}

foo();

console.log(a);//2

三:var声明的变量提升

1.var的声明会在js预解析时把var的声明提升到当前作用域的最前面,意思是是指无论 var 出现在一个作用域的哪个位置,这个声明都属于当前的整个作用域,在其中到处都可以访问到。只有变量声明才会提升,对变量赋值并不会提升

console.log(a);//undefined

var a = 1;

相当于执行以下代码

var a;

console.log(a);//undefined

a = 1;

四、let声明

1.let 声明的变量具有块作用域的特征。

2.在同一个块级作用域,不能重复声明变量。

function foo(){

    let a = 1;

    let a = 2;//Uncaught SyntaxError: Identifier 'a' has already been declared

}

3.let 声明的变量不存在变量提升,换一种说法,就是 let 声明存在暂时性死区(TDZ)。

let a = 1;

console.log(a);//1

console.log(b);//Uncaught ReferenceError: b is not defined

let b = 2;

(此时变量b的声明不会提升到当前作用域的前面)

五:彻底区分var和let声明变量(作用域区别)

1.var声明

for (var i = 0; i < 10; i++) {

    setTimeout(function(){

        console.log(i);

    },100)

};

(1.此时的var声明的变量i属于函数作用域,声明又不在函数里,所以i属于全局变量

    2.此时的定时器函数属于异步函数,隔100毫秒才会执行,而这100毫秒的时间内,for循环已经循环结束,全局变量i已经为10
3.相当于代码执行

    {
       var i = 0;
      // 第一次循环
      {
        setTimeout(() => {
          //延时器属于异步函数,不会立即执行,
          //经过1s后,循环已经结束,全局变量i已经变成10
          console.log(i);
        }, 1000)
        i++
      }
      // 第二次循环
      {
        setTimeout(() => {
          //var声明的变量i没有块级作用域,所以可以访问第一次循环体内的变量i,
          //同样,1s后,循环已经结束,全局变量i已经变成10
          console.log(i);
        }, 1000)
        i++
      }
      .....
    }

最后代码的执行后,会在控制台打印出10个10)

ps:主要的原因是var声明的变量的没有块级作用域

2.let 声明

使用闭包原理解决上例中var声明变量的不具有块级作用域的问题:

    for (var i = 1; i <= 5; i++) {
      //i=0  第一轮循环
      (function (i) {
        // 立即执行函数执行,形成一个私有的函数上下文
        //形参i是属于立即执行函数的局部变量,第一轮循环时相当于let i=0
        //由于立即执行函数的参数i被下一级的延时器回调函数上下文所引用,所以会产生闭包,
        //  从而形成块级作用域,保护了每一次循环的i,也就是闭包的特点:变量私有化

        setTimeout(() => {
          // 延时器回调函数执行,也会形成一个私有的函数上下文
          console.log(i);//由于当前延时器回调函数上下文引用了
          // 上一级立即执行函数的参数i(立即执行函数的局部变量),
          //所以此时会产生闭包,立即执行函数的参数i会一直保存在内存中供延时器回调函数使用
        }, 5000)
      })(i)//把每一轮循环全局的i的值作为实参传递给立即执行函数的私有上下文,第一轮传递的是0

    }

 

使用let声明的变量具有块级作用域

for (let i = 0; i < 10; i++) {
    
     // 每一轮都会形成一个私有的块级作用域,并且有一个私有的变量i,分别存储每一轮循环的索引

    setTimeout(function(){

        console.log(i);

    },100)

};

 PS:这是因为闭包的机制,但是因为let的块作用域是浏览器底层机制实现的,比我们自己创建的闭包性能要好一些

代码执行后,则该代码运行后,就会在控制台打印出0-9. )

 六:const 声明

1.const 声明方式,除了具有 let 的上述特点外,其还具备一个特点,即 const 定义的变量,一旦定义后,就不能修改,即 const 声明的为常量。

const a = 1;

console.log(a);//1

a = 2;

console.log(a);//Uncaught TypeError: Assignment to constant variable.

2.但是,并不是说 const 声明的变量其内部内容不可变,如:

const obj = {a:1,b:2};

console.log(obj.a);//1

obj.a = 3;

console.log(obj.a);//3

所以准确的说,是 const 声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的,只是变量标识符不能重新分配。

(我的理解是如果是简单数据类型,const声明的变量保存的值就是变量的值,是不可以修改,但如果是复杂数据类型(对象,数组等)const只是保存的是复杂数据类型的地址,只是确保地址不可变,但地址指向的内容是可以变的)

最后,因为let和const是es6的新特性,let和const的出现就是为了解决var的各种问题,强烈建议大家写js代码都用let和const声明变量和常量! 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Js中var,let,const的区别 的相关文章

随机推荐

  • stan的siebel学习笔记一

    今天开始学习siebel先从概念理论开始 Siebel CRM 系统的应用环境 Siebel CRM系统的应用环境由以下三部分组成 n 核心数据库 RDBMS 和Siebel 文件系统 存储企业各类数据和文档 n 客户 Siebel Cli
  • 为什么java文件名要和类名一致

    1 Java保存的文件名必须与类名一致 2 如果文件中只有一个类 文件名必须与类名一致 3 一个Java文件中只能有一个public类 4 如果文件中不止一个类 文件名必须与public类名一致 5 如果文件中不止一个类 而且没有publi
  • 前端-富文本上传图片(若依框架vue)

    上传图片显示到页面上这个过程的实现需要和后端配合 在成功上传的回调函数中请求一个提交图片的地址 请求成功会给返一个地址 再将这个图片地址插入到富文本中就实现了 请求提交图片地址的过程就是你要把图片返给后端让其存到数据库中 存好了再返给前端
  • 我在阿里工作9年,今天我离职了

    相关阅读 阿里职位层级 附P级详细要求 我在公司待了 6 年 清退我却只花了 6 分钟 Docker 完全指南 2009年7月3号正式入职 2018年7月3号 last day 特意选择了这一天 阿里是我的第一份工作 也是迄今为止待得最久的
  • python的数值运算操作符,数值运算函数和数字类型转换函数

    python的数值运算操作符 1 x y x与y之和 2 x y x与y之差 3 x y x与y之积 4 x y x与y之商 5 x y x与y之整数商 即不大于x与y之商的最大整数 6 x y x与y之商的余数 也称模运算 7 x x的负
  • Elasticsearch快速入门

    Elasticsearch入门学习 一 初识Elasticsearch 1 什么是Elasticsearch 2 正向索引和倒排索引 3 安装ES 4 安装Kibana 5 安装IK分词器 二 索引库操作 1 创建索引库 2 查询索引库 3
  • node+express导出excel表

    前言 node表格导出excel的方式有好几种 现在还在持续更新的只有node xlsx excel export 1 js xlsx 入口 目前 Github 上 star 数量最多的处理 Excel 的库 支持解析多种格式表格XLSX
  • Uniapp微信小程序转支付宝小程序

    Uniapp打包成小程序后即可使用 注意事项及修改内容 在manifest json配置支付宝小程序APPID 获取手机号功能需要去小程序平台获取相对应的能力 能力有 转账 小程序二维码 模板消息 图片内容安全 音频播放等等 3 需要配置支
  • 【华为OD统一考试B卷

    在线OJ 已购买本专栏用户 请私信博主开通账号 在线刷题 运行出现 Runtime Error 0Aborted 请忽略 华为OD统一考试A卷 B卷 新题库说明 2023年5月份 华为官方已经将的 2022 0223Q 1 2 3 4 统一
  • 沈师 PTA 数据库题目及部分解析 第二章

    判断题 1 表中不同的列不能出自同一个域 F 不同列可出自同一个域 2 关系的外码是允许有空值的 T 3 候选码的值可以唯一地表示关系中的一个元组 T 4 一个关系模式可以有多个 候选键 T 5 已知系 系编号 系名称 系主任 电话 地点
  • 搭建 frp 内网穿透服务器

    写在前面 国内 腾讯云 和 阿里云服务器 都需要对安全组进行配置才可以访问 一 云服务器 阿里云服务器 推荐 开发者成长计划 云服务器管理控制台 初次登录需要密码 这时可通过重置 root 密码解决 腾讯云服务器 云产品免费试用 云服务免费
  • python导入文件

    python导入同级模块 在同一个文件夹中的py文件 直接导入即可 import xxx 如在file1 py中想导入file2 py 注意无需加后缀 py import file2 使用file2中函数时需加上前缀 file2 即 fil
  • ChatGPT 使用详细指南

    ChatGPT 使用详细指南 欢迎使用 ChatGPT 本指南将带您了解如何与 ChatGPT 互动以及如何充分利用其功能 了解 ChatGPT 开始使用 提高准确性 多轮对话 了解模型限制 提高创意输出 确保安全和隐私 反馈问题 1 了解
  • Twitter开源时间线推荐架构整理(Twitter‘s Recommendation Algorithm)

    马斯克最近开源了部分 Twitter的代码 主要有两个仓库 main repo https github com twitter the algorithm ml repo https github com twitter the algo
  • Django链接MySQL

    目录 修改使用MySQL数据库 修改配置文件 代码声明 django自带的小型关系型数据库为sqlit3 这个数据库很小 只能做本地测试 可以在django项目中的settings py里找到他的配置信息 DATABASES default
  • js原生创建html代码,原生js动态生成html初始化插入到body(不指定id/class)

    富国沪深 建议是这样的 我觉得你应该希望onload之前的也log出来所以内容和load状态没关系 load之后添加log到body的下面 尽量保证你的思路 创建domvar logDom document createElement di
  • 数字的排序算法—计数排序、桶排序和基数排序

    计数排序 当输入元素是n个0到k之间的整数时 他的运行时间是O n k 计数排序不是比较排序 它快于任何比较算法 用来计数的数组C的长度取决于排序数组的数据范围 如果数据范围很大 需要大量的数组 但是计数排序可以在基数排序的的算法范围来排序
  • jieba textrank关键词提取 python_五款中文分词工具在线PK: Jieba, SnowNLP, PkuSeg,THULAC, HanLP...

    最近玩公众号会话停不下来 玩转腾讯词向量 Game of Words 词语的加减游戏 准备把NLP相关的模块搬到线上 准确的说 搬到AINLP公众号后台对话 所以 趁着劳动节假期 给AINLP公众号后台聊天机器人添加了一项新技能 中文分词线
  • 使用plist创建精灵并执行动画

    素材图 然后使用Texture Packer放到一张图片上 并生成plist文件 接下来直接上代码 CCSize size CCDirector sharedDirector gt getWinSize 获得屏幕的尺寸 CCArray pA
  • Js中var,let,const的区别

    一 区别 1 var声明的变量属于函数作用域 而let和const声明的变量属于块级作用域 js作用域在上篇文章 2 var声明的变量存在变量提升 而let和const没有 3 var声明的变量可以重复声明 而在同一块级作用域 let变量不