一篇文章带你深入了解JavaScript中let+var的特性

简介: 一篇文章带你深入了解JavaScript中let+var的特性

暂时性死区


上篇文章我们了解到了letvar之间的细微差别,同时它们之间还有一个区别就是let声明的变量不会在作用域中被提升

<script>
  //name会被提升
  console.log(name);  //undefined
  var name = "Matt";
  //age不会被提升
  console.log(age);   //ReferenceError   age未定义
  let age = 26 ;
</script>

浏览器在解析代码的时候,JavaScript引擎也会注意出现在块后面的let声明,只不过在此之前不能以任何方式来引用未声明的变量,在let声明之前的之星瞬间都被称为暂时性死区,在此阶段引用任何后面才声明的变量都会抛出ReferenceError


全局声明


与var关键字不同,使用let在全局作用域中声明的变量不会成为window对象的属性(var声明的变量会)

<script>
  var name = 'Matt';
  console.log(window.name);  // 'Matt'
  let age = 26 ;
  console.log(window.age);  // undefined
</script>

let声明是在全局作用域里面发生的,响应变量会在页面的生命周期内存续,为了避免SyntaxError,我们必须确保页面不会重复声明同一个变量


条件声明


我们在使用var声明变量的时候,由于声明会被提升,JavaScript引擎会自动将多余的声明在作用域顶部合并为一个声明,因为let的作用域是块,所以不可能检查前面是否已经使用let声明过同名变量,同时也就不可能在没有声明的情况下使用它

<script>
    var name = 'Nicholas'
    let age = 26;
</script>


注意注意注意!!!


对于let这个新的ES6关键字,不能依赖条件声明模式

不能使用let进行条件式声明是件好事,因为条件声明是一种反模式,它让程序变得更难理解


for循环中的let声明


let出现之前,for循环定义的迭代变量会渗透到循环体外部

<script>
    for(var i = 0 ; i < 5 ; ++i){
        //逻辑循环
    }
    console.log(i);
</script>

如果我们改成使用let,这个问题将会迎刃解决,因为迭代变量的作用域仅适用于for循环块内部

<script>
    for(let i = 0 ; i < 5 ; ++i){
        //逻辑循环
    }
    console.log(i);   //ReferenceError:  i没有定义
</script>

我们在使用var的时候,最常见的问题就是对迭代变量的奇特声明和修改

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

之所以会这样,是因为退出循环的时候,迭代变量保存的都是循环退出的值:5。在执行超过逻辑时,所有的i都是同一个变量,因而输出的都是同一个最终值

而在使用let声明迭代变量的时候,JavaScript引擎在后台会为每个迭代循环声明一个新的迭代变量,每个setTimeout引用的都是不同的变量实例

<script>
   for(var i = 0 ; i < 5 ; ++i ){
       setTimeout(() => console.log(i),0);        // 1 2 3 4 5
   }
</script>


相关文章
|
25天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂
|
22天前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
42 4
|
28天前
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
26 5
|
27天前
|
自然语言处理 JavaScript 前端开发
ECMAScript 6 的出现为 JavaScript 带来了许多新的特性和改进
这些只是ES6的一些主要特性,它们极大地增强了JavaScript的功能和表现力,使得JavaScript在大型应用开发、前端框架等领域能够更加高效地编写复杂的应用程序。
|
22天前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
17 0
|
2月前
|
JavaScript 前端开发 编译器
掌握现代化JavaScript:ECMAScript提案与特性
【10月更文挑战第13天】本文介绍了ECMAScript(ES)的最新提案与特性,包括可选链、空值合并运算符、类字段和顶层Await等。通过跟踪TC39提案、使用Babel或TypeScript、测试兼容性以及逐步迁移,开发者可以高效地采用这些新特性,简化代码、提高开发效率并增强应用功能。文章还提供了实战技巧,帮助开发者在现代Web开发中充分利用这些现代化的特性。
|
2月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
56 4
|
1月前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
43 0
|
2月前
|
JavaScript 前端开发
【JavaScript】let,const和var的区别
总的来说,随着ECMAScript 6(ES6)及后续版本的推广,`let`和 `const`因其增强的块级作用域和对变量行为的更严格控制,逐渐成为现代JavaScript编码实践中推荐使用的变量声明方式。而 `var`由于其历史遗留的局限性,正逐渐被边缘化,但在维护老代码或处理特定兼容性需求时仍需了解。
40 3
|
3月前
|
JavaScript 前端开发 Oracle
软件工程师,学习下JavaScript ES6新特性吧
软件工程师,学习下JavaScript ES6新特性吧
46 9