JavaScript总结:let变量(弥补var的缺陷)

简介: JavaScript总结:let变量(弥补var的缺陷)

在前面的博客中我介绍了JavaScript中使用var定义变量的变量提升问题,JavaScript设计者意识到使用var定义变量可能存在如下问题:


var定义的变量没有块作用域。

var定义的全局变量会自动添加全局window对象的属性。

var定义的变量会提前装载。


let关键字的出现正好解决了上述问题


1.let定义的变量有块作用域:

我们先来看代码:

<script type="text/javascript">
  for(let i = 0;i < 10; i++){
    console.log(i);
  }
  console.log("循环体之外:" + i);//报错:letScope.html:5 Uncaught ReferenceError: i is not defined
</script>

运行结果:

20190307130512240.png


上面的程序在for循环中使用了let来定义循环计数器,这样该循环计数器i将只在for循环中有效,因此程序在循环体之外访问i变量就会报错。如果用var来定义i变量,则会将作用域扩散到循环体外。

2.let定义的全局变量不会自动添加到window对象的属性:

我们再看一个示例:

<script type="text/javascript">
  let name = '巴啦啦';
    console.log(name); //输出巴啦啦
    console.log(window.name); //window.name不存在
</script>

运行结果:


20190307132708210.png


上面代码使用let定义一个全局变量name,但与使用var定义全局变量不同的是,使用let定义的全局变量不会变成window对象的属性,所以运行上面程序访问window.name时,看不到任何输出。


3.let定义的变量不会提前装载:


看如下示例:

<script type="text/javascript">
  var name = '巴啦啦';
  function func(){
    console.log(name);
    let name = 'fkit';
    console.log(name);
  }
  func();
</script>

运行结果:

20190307134230804.png

使用let定义的变量要等到程序流执行到定义变量的代码行时才会转载。

上面程序先定义了一个全局变量name,接下来程序再func()函数中使用let定义了同名的name变量,此时局部变量name会覆盖全局的name变量。但由于使用let定义的变量不会提前装载,因此func()函数在使用let定义局部变量name之前访问name变量会导致错误-----如果将func()函数中定义name变量的关键字改为var,则会有不同的效果。


修改后运行结果如下:

20190307134517750.png

综上所述,let关键字弥补了var的缺陷,因此建议大家考虑使用let代替var。

目录
相关文章
|
8月前
|
JavaScript 前端开发 开发者
JavaScript基础——JavaScript变量名称命名规范
JavaScript变量命名规范是编写高质量代码的重要部分。通过遵循基本规则、使用常见命名约定并应用最佳实践,可以提高代码的可读性和可维护性。希望本文能帮助开发者在日常编程中更好地理解和应用JavaScript变量命名规范,从而编写出更清晰、更可靠的代码。
507 11
|
9月前
|
JavaScript 前端开发 安全
【JavaScript】深入理解 let、var 和 const
掌握这些关键字的使用可以提高代码的可读性和可维护性,避免潜在的变量提升和作用域问题。希望本文能帮助您更好地理解和应用 JavaScript 中的变量声明方式,编写出更高质量的代码。
273 20
|
10月前
|
JavaScript 前端开发 容器
盘点JavaScript中所有声明变量的方式及特性
本文详细介绍了JavaScript中变量定义的多种方式,包括传统的`var`、`let`和`const`,以及通过`this`、`window`、`top`等对象定义变量的方法。每种方式都有其独特的语法和特性,并附有代码示例说明。推荐使用`let`和`const`以避免作用域和提升问题,谨慎使用`window`和`top`定义全局变量,不建议使用隐式全局变量。掌握这些定义方式有助于编写更健壮的JS代码。
238 11
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
441 12
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
180 5
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
203 11
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
JavaScript 前端开发
【JavaScript】let,const和var的区别
总的来说,随着ECMAScript 6(ES6)及后续版本的推广,`let`和 `const`因其增强的块级作用域和对变量行为的更严格控制,逐渐成为现代JavaScript编码实践中推荐使用的变量声明方式。而 `var`由于其历史遗留的局限性,正逐渐被边缘化,但在维护老代码或处理特定兼容性需求时仍需了解。
228 3
|
JavaScript 前端开发
局部 JavaScript 变量
JavaScript 中,函数内部使用 `var` 声明的变量为局部变量,仅在函数内可见,函数执行完毕后被删除。全局变量则在函数外部声明,整个页面的脚本和函数均可访问,页面关闭后才被删除。未声明的变量赋值会自动成为 `window` 对象的属性,且在非严格模式下可被删除。
|
JavaScript 前端开发
什么是JavaScript变量?
什么是JavaScript变量?
135 0