首页 > 编程语言 >JavaScript中的let关键字详解

JavaScript中的let关键字详解

时间:2024-05-29 10:31:56浏览次数:24  
标签:console log 作用域 age JavaScript 详解 let var

在JavaScript中,let关键字用于声明局部变量,它与传统的var关键字类似,但引入了几个关键的区别和改进,主要体现在作用域规则、重复声明限制以及引入了“暂时性死区”等概念。下面将详细介绍let的特点及其与var的不同之处。

块级作用域 vs 函数作用域

  • var声明的变量:其作用域是函数作用域或者全局作用域。这意味着在函数内部声明的var变量在整个函数范围内都是可见的,而在任意代码块(如if语句或for循环)内声明的var变量实际上会被提升至包含该代码块的函数或全局作用域的顶部。
if (true) {
  var name = 'Minos';
  console.log(name); // 输出 'Minos'
}
console.log(name); // 由于var的作用域提升,这里也能输出 'Minos'
  • let声明的变量:则具有更严格的块级作用域。这意味着变量只在其声明的代码块内有效,出了这个块就无法访问。
if (true) {
  let age = 26;
  console.log(age); // 输出 26
}
console.log(age); // 报错 ReferenceError,因为age在此处未定义

不允许重复声明

let不允许在同一作用域内对同一变量进行重复声明,这有助于避免因不小心复写变量而导致的错误。

let age = 30;
let age; // 这里会抛出SyntaxError,因为age已经被声明过了

暂时性死区(Temporal Dead Zone, TDZ)

在变量声明之前,该变量处于暂时性死区,在这个区域内试图访问该变量会引发引用错误。

// age在这个时候属于TDZ
console.log(age); // 报错 ReferenceError
let age = 26; // 正式声明变量age

var不同,var声明的变量存在变量提升现象,即在声明之前就可以访问到变量(尽管值为undefined),而let声明的变量在声明之前是完全不可见的。

全局作用域声明差异

var声明的全局变量会成为window对象的属性,而用let声明的全局变量则不会。

var globalVar = 'Minos';
console.log(window.globalVar); // 输出 'Minos'

let globalLet = 26;
console.log(window.globalLet); // 输出 undefined

for循环中的let

for循环中使用let可以为每次迭代创建一个新的绑定,这对于循环变量尤其有用,避免了循环变量成为全局或函数作用域的问题。

// 使用var
for (var i = 0; i < 5; ++i) {
  setTimeout(() => console.log(i), 0); // 输出 5, 5, 5, 5, 5
}

// 使用let
for (let j = 0; j < 5; ++j) {
  setTimeout(() => console.log(j), 0); // 输出 0, 1, 2, 3, 4
}

var与let

     var name = 'Nicholas';
     console.log(name);     // 'Nicholas'
     if (true) {
         var name = 'Matt';
         console.log(name);   // 'Matt'
     }
     console.log(name);     // 'Matt'
     let age = 30;
     console.log(age);     // 30
     if (true) {
         let age = 26;
         console.log(age);   // 26
     }
     console.log(age);     // 30

总结而言,let关键字通过引入块级作用域、禁止重复声明以及设立暂时性死区等机制,提高了JavaScript代码的可读性和健壮性,减少了潜在的变量作用域混淆问题,是现代JavaScript编程中推荐使用的变量声明方式之一。

标签:console,log,作用域,age,JavaScript,详解,let,var
From: https://blog.csdn.net/qq_29752857/article/details/139288079

相关文章

  • 详解 Java AOP:面向方面编程的核心概念与 Spring 实现
    ......
  • C#(12):事件详解
    事件的订阅者时间参数方法,事件,属性:方块,闪电,扳手:做事情,通知别人,存储状态方法的定义,方法的引用在可视化界面编辑的窗体,新增的事件,自动生成定义在form.cs中,在designer.cs(设计器代码)中引用xaml中绑定事件事件只能放在+=操作符左侧+=操作符是右边订阅左边事件......
  • JavaScript日期与时间处理的艺术
    JavaScript日期与时间处理的艺术基础概念:JavaScript中的日期对象诞生时刻时间戳:纪元的秘密案例一:格式化日期的艺术美化你的日期自定义格式化案例二:跨时区的舞蹈时区转换案例三:时间旅行的挑战闰年与月份天数避免日期计算的陷阱实战技巧与避坑指南性能优化安全性考量问......
  • Servlet中/和/*的区别详解
    Servlet中/和/*的区别详解问题在搭建springmvc项目时,DispatcherServlet配置为/*时welcome-file-list失效了报404异常,配置为/时可以正常访问,下面记录问题排查过程所涉及关于servlet的知识<!--welcome-file-list配置--><welcome-file-list><welcome-fil......
  • MongoDB CRUD操作:投影Project详解
    MongoDBCRUD操作:投影Project详解文章目录MongoDBCRUD操作:投影Project详解返回文档的全部字段返回指定的字段和_id字段不输出_id字段指定排除的字段返回内嵌文档中的指定字段禁止内嵌文档中的特定字段数组中内嵌文档的投影聚合表达式的投影字段默认情况下,MongoDB查......
  • Django学习-虚拟环境创建、URL组成部分详解
    一、创建一个Django的虚拟环境 生成虚拟环境在D:\Virtualenvs下 在pycharm中引入django虚拟环境 二、URL详解 URL,统一资源定位符,一个URL由以下几部分组成:scheme://host:port/path/?query-string=xxx#anchorscheme:代表的是访问的协议,一般为http或者https以及ftp等h......
  • Modbus TCP报文详解
    一、ModbusTCP协议构成ModbusTCP通信协议主要包括三个部分:报文头(MBAP)、功能码和数据。ModbusTCP/IP协议的最大数据帧为260个字节。二、MBAP报文头构成MBAP报文头占7个字节,具体构成如下:事务处理标识符(TransactionIdentifier):2个字节,为此次通信事务处理标识符,一般每次通信......
  • Java高并发编程详解:深入理解并发核心库(Java高并发编程详解:多线程与架构设计姊妹篇) (Ja
    我的阅读笔记:并发核心库概览:首先介绍Java并发核心库的组成,包括java.util.concurrent包下的主要类和接口,以及它们之间的关系。线程池技术:详细讲解Java中的线程池技术,包括线程池的创建、配置、使用以及调优。介绍不同类型的线程池(如FixedThreadPool、CachedThreadPool等)以及它们......
  • C语言中strncpy、strncat、memcpy、memmove函数的详解与比较
    目录目录C语言中strncpy、strncat、memcpy、memmove函数的详解与比较一、strncpy函数二、strncat函数三、memcpy函数四、memmove函数C语言中strncpy、strncat、memcpy、memmove函数的详解与比较一、strncpy函数strncpy是C语言标准库中的一个函数,用于将字符串src复制到字符串d......
  • JavaScript 中的 Range 和 Selection 对象
    JavaScript中的Range和Selection对象前言最近在做鼠标框选的需求,鼠标框选就需要用到Range和Selection对象。Range表示选择的区间范围,Selection表示选择的文档内容。下面就详细说下这两个对象一、RangeRange接口表示一个包含节点与文本节点的一部分的文档片段。......