let与var的区别

最新推荐文章于 2022-07-12 11:48:57 发布

XiaoLu Liu

最新推荐文章于 2022-07-12 11:48:57 发布

阅读量520

点赞数

文章标签： es6 vue.js

本文链接：https://blog.csdn.net/qq_34826249/article/details/105668273

版权

let与var最主要的区别，就是有无块级作用域。

var：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<button>btn1</button>
<button>btn2</button>
<button>btn3</button>
<button>btn4</button>

<script>
  const  btns = document.getElementsByTagName("button");
  var i = 0;
  for (i = 0; i < btns.length;i++){

     btns[i].addEventListener("click",function () {
         console.log("点击第"+(i+1)+"个button");
     })
  }
</script>

</body>
</html>

无论点击哪一个button都显示如下
在这里插入图片描述
let:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<button>btn1</button>
<button>btn2</button>
<button>btn3</button>
<button>btn4</button>


<script>
  const  btns = document.getElementsByTagName("button");

  for (let i = 0; i < btns.length;i++){

     btns[i].addEventListener("click",function () {
         console.log("点击第"+(i+1)+"个button");
     })
  }
</script>

</body>
</html>

当依次点击4个button时，如下显示：
在这里插入图片描述