关于Vue的学习笔记（四）

最新推荐文章于 2022-12-05 22:17:36 发布

komish

最新推荐文章于 2022-12-05 22:17:36 发布

阅读量124

点赞数

本文链接：https://blog.csdn.net/komish/article/details/118109559

版权

本文探讨了JavaScript中的const、let和var的区别，重点介绍了const的不可变性以及在代码优化中的作用。同时，解释了let如何改进var的全局作用域问题，特别是在块级作用域中的应用，通过示例展示了在for循环中使用let避免变量覆盖的问题。此外，文章还对比了ES5和ES6在变量声明上的差异，强调了ES6中let的块级作用域特性。

摘要由CSDN通过智能技术生成

关于Vue的一些基本参数、方法及其应用规则

修饰标识符const,let,var之间的联系与应用

const：在许多语言中，体现的主要作用是将某个变量作为常量，如c++/c，在Javascript也是如此，使用const修饰的标识符为常量，不可以再次赋值。

const注意事项：

1.使用const修饰的变量不可被重复赋值，如

const a = 10;
a=30//不可修改，否则报错

2.使用const修饰的变量必须赋值，如

const a;//使用const修饰的标识符必须一开始为变量初始化，否则报错

一般推荐使用const修饰标识符，一方面由于const的不可重复赋值性，在后续对代码的扩展中可以避免一些不必要的麻烦，另一方面let的滥用可能会使系统占用一些没必要的内存，选择const也是一种提高代码效率的办法。

let与var

let可以视为一种更高级的var，与const相对的是，let修饰的标识符可以被重复赋值且不必强制初始化，let相对于var最大的优势在于，let作用范围为块级作用域，而var属于全局作用域。var的使用经常受到限制，如for循环，if/else判断领域中。

关于没有块级作用域引起的问题，例如for的块级：

<body>
<div id="app">
  <button></button>
  <button></button>
  <button></button>
  <button></button>
  <button></button>
</div>
</body>
<script>
  var btns = document.getElementsByTagName('button');
  for(var i=0; i<btns.length; i++){
    btns[i].addEventListener('click',function () {
      console.log('第'+i+'个按钮被点击')

    })
  }
</script>

运行时发现无论点击那个按钮控制台永远输出“第5个按钮被点击”，由于var作用域为全局，因此在经历一轮for循环后，每个按钮原本的功能全部被最后一个按钮功能覆盖，因而每个按钮执行的都是一样的功能。

针对这种情况，要么对button组件功能设置闭包函数，要么将修饰符改为let：

<body>
<div id="app">
  <button></button>
  <button></button>
  <button></button>
  <button></button>
  <button></button>
</div>
</body>
<script>
  const btns = document.getElementsByTagName('button');
<!--1.使用let修饰-->
  for(let i=0; i<btns.length; i++){
    btns[i].addEventListener('click',function () {
      console.log('第'+i+'个按钮被点击')

    })
  }
<!--2.使用闭包函数-->
   for(let i=0; i<btns.length; i++){
    (function(i)){
       btns[i].addEventListener('click',function () {
         console.log('第'+i+'个按钮被点击')

       })
    })(i)
 }
</script>

关于ES5与ES6中的差分：

ES5中的var是没有块级作用域的，如if-else或for，因为之前ES5的if-else和for没有块级作用域的概念，所以在很多时候我们都必须借助于function的作用域来解决应用外面变量的问题。

ES6中加入了let，let是有if和for的块级作用域的。

komish

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于Vue的学习笔记（四）

关于Vue的一些基本参数、方法及其应用规则修饰标识符const,let,var之间的联系与应用const：在许多语言中，体现的主要作用是将某个变量作为常量，如c++/c，在Javascript也是如此，使用const修饰的标识符为常量，不可以再次赋值。const注意事项：1.使用const修饰的变量不可被重复赋值，如const a = 10;a=30//不可修改，否则报错2.使用const修饰的变量必须赋值，如const a;//使用const修饰的标识符必须一开始为变量初
复制链接

扫一扫