js知识点汇总之let const 和 var的区别

2024-05-24 14:28

本文主要是介绍js知识点汇总之let const 和 var的区别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

let const 和 var的区别

作用域

ES5 中的作用域有:全局作用域、函数作用域,ES6 中新增了块级作用域。块作用域由 { } 包括,if 语句和 for 语句里面的 { } 也属于块作用域。

var关键字

  1. 没有块级作用域的概念
// global scope
{var a = 10;
}
console.log(a); // 10

在全局中输出a为10说明var不存在块级作用域的概念

  1. 有全局作用域,函数作用域的概念

    var b = 20;
    function test() {var a = 10;console.log(a);console.log(b);
    }
    test();
    console.log(a);
    // 10 20 a is not defined
    
  2. 不初始化值默认为 undefined,存在变量提升

    console.log(a); //undefined
    var a;
    a = 10;
    
  3. 全局作用域用 var 声明的变量会挂载到 window 对象下

//Global Scope
var a = 10;
console.log(a);  //10
console.log(window.a);  //10
console.log(this.a);  //10
  1. 同一作用域中允许重复声明
//Global Scope
var a = 10;
var a = 20;
console.log(a);  //20checkscope();
function checkscope(){//Local Scopevar b = 10;var b = 20;console.log(b);  //20
}

上面代码中,在 Global Scope 中声明了 2a,以最后一次声明有效,打印为 20。同理,在 Local Scope 也是一样的。

let 关键字

  1. 有块级作用域的概念
{//Block Scopelet a = 10;
}
console.log(a);  //ReferenceError: a is not defined

上面代码中,打印 a 报错,说明存在 Block Scope 的概念。

  1. 不存在变量提升(不可以在声明之前使用)
{//Block Scopeconsole.log(a);  //ReferenceError: Cannot access 'a' before initializationlet a = 10;
}

上面代码中,打印 a 报错:无法在初始化之前访问。说明不存在变量提升。

  1. 暂时性死区
{//Block Scopeconsole.log(a);  //ReferenceError: Cannot access 'a' before initializationlet a = 20;
}if (true) {//TDZ开始console.log(a);  //ReferenceError: Cannot access 'a' before initializationlet a; //TDZ结束console.log(a);  //undefineda = 123;console.log(a);  //123
}

上面代码中,使用 let 声明的变量 a,导致绑定这个块级作用域,所以在 let 声明变量前,打印的变量 a 报错。

这是因为使用 let/const 所声明的变量会存在暂时性死区。

什么叫做暂时性死区域呢?翻译成人话就是:

当程序的控制流程在新的作用域(module、functionblock 作用域)进行实例化时,在此作用域中用 let/const 声明的变量会先在作用域中被创建出来,但因此时还未进行词法绑定,所以是不能被访问的,如果访问就会抛出错误。因此,在这运行流程进入作用域创建变量,到变量可以被访问之间的这一段时间,就称之为暂时死区。

再简单理解就是:

ES6 规定,let/const 命令会使区块形成封闭的作用域。若在声明之前使用变量,就会报错。
总之,在代码块内,使用 let/const 命令声明变量之前,该变量都是不可用的。
这在语法上,称为 “暂时性死区”temporal dead zone,简称 TDZ)。

其实上面不存在变量提升的例子中,其实也是暂时性死区,因为它有暂时性死区的概念,所以它压根就不存在变量提升了。

  1. 同一块作用域中不允许重复声明
{//Block Scopelet A;var A;  //SyntaxError: Identifier 'A' has already been declared
}
{//Block Scopevar A;let A;  //SyntaxError: Identifier 'A' has already been declared
}
{//Block Scopelet A;let A;  //SyntaxError: Identifier 'A' has already been declared
}

const 关键字

  1. 必须立即初始化,不能留到以后赋值
// Block Scope 
const a; // SyntaxError: Missing initializer in const declaration } 

上面代码中,用 const 声明的变量 a 没有进行初始化,所以报错。

  1. 常量的值不能改变
//Block Scope 
{const a = 10; a = 20; // TypeError: Assignment to constant variable
}

上面代码中,用 const 声明了变量 a 且初始化为 10,然后试图修改 a 的值,报错。

const 实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。

这篇关于js知识点汇总之let const 和 var的区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/998664

相关文章

嵌入式软件工程师应聘知识点

嵌入式软件工程师应聘 修改浏览权限 | 删除 数据结构(C语言)部分常考的知识点: 1、局部变量能、全局变量和静态变量 2、堆和栈 3、Const、volatile、define、typedef的用途 4、链表(比如链表的插入、删除和排序) 5、排序(考查冒泡法的较多) 6、可重入函数 、malloc函数 7、指针(常考函数指针,函数指针,数组指针,指针数组和

C++工程编译链接错误汇总VisualStudio

目录 一些小的知识点 make工具 可以使用windows下的事件查看器崩溃的地方 dumpbin工具查看dll是32位还是64位的 _MSC_VER .cc 和.cpp 【VC++目录中的包含目录】 vs 【C/C++常规中的附加包含目录】——头文件所在目录如何怎么添加,添加了以后搜索头文件就会到这些个路径下搜索了 include<> 和 include"" WinMain 和

hevc和H.264格式的区别

HEVC(High Efficiency Video Coding)和H.264(也称为Advanced Video Coding,AVC)都是视频压缩标准,但它们之间存在一些显著的区别,主要集中在压缩效率、资源需求和兼容性方面。 压缩效率 HEVC,也被称为H.265,提供了比H.264更高的压缩效率。这意味着在相同的视频质量下,HEVC能够以大约一半的比特率进行编码,从而减少存储空间需求和

Java面试题:通过实例说明内连接、左外连接和右外连接的区别

在 SQL 中,连接(JOIN)用于在多个表之间组合行。最常用的连接类型是内连接(INNER JOIN)、左外连接(LEFT OUTER JOIN)和右外连接(RIGHT OUTER JOIN)。它们的主要区别在于它们如何处理表之间的匹配和不匹配行。下面是每种连接的详细说明和示例。 表示例 假设有两个表:Customers 和 Orders。 Customers CustomerIDCus

数据库期末复习知识点

A卷 1. 选择题(30') 2. 判断范式(10') 判断到第三范式 3. 程序填空(20') 4. 分析填空(15') 5. 写SQL(25') 5'一题 恶性 B卷 1. 单选(30') 2. 填空 (20') 3. 程序填空(20') 4. 写SQL(30') 知识点 第一章 数据库管理系统(DBMS)  主要功能 数据定义功能 (DDL, 数据定义语

Eclipse+ADT与Android Studio开发的区别

下文的EA指Eclipse+ADT,AS就是指Android Studio。 就编写界面布局来说AS可以边开发边预览(所见即所得,以及多个屏幕预览),这个优势比较大。AS运行时占的内存比EA的要小。AS创建项目时要创建gradle项目框架,so,创建项目时AS比较慢。android studio基于gradle构建项目,你无法同时集中管理和维护多个项目的源码,而eclipse ADT可以同时打开

js+css二级导航

效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con

brew install opencv@2 时报错 Error: Can't create update lock in /usr/local/var/homebrew/locks!

解决方案,报错里已经说明了: 我的解决方案: sudo chown -R "$USER":admin /usr/local   stackoverflow上的答案 I was able to solve the problem by using chown on the folder: sudo chown -R "$USER":admin /usr/local Also you'

【汇总】vivado_zynq学习资料

DMA:https://www.xilinx.com/support/answers/57550.html

在 Java 中,JDK、JRE、JVM 分别代表什么,有何关系和区别?

在Java开发的世界中,我们会经常听到JDK、JRE和JVM这三个词。它们都与Java的运行环境以及Java程序的编译和运行有关,它们之间也存在一些关联性和区别。 什么是JDK、JRE和JVM 我们来看它们分别是什么。 JDK,全称Java Development Kit,即Java开发工具包。顾名思义,JDK是用于Java开发的一套工具包,里面包含了Java的编译器javac、