let/var/const的比较-CSDN博客

本文链接：https://blog.csdn.net/Paranoid_truggle/article/details/119383880

本文探讨了ES6中引入的let与const关键字如何解决了变量提升和块级作用域问题，通过具体示例展示了let如何避免循环闭包中的常见陷阱，并强调了const在变量声明中的最佳实践。

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

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<!--在es5之前因为if和for都没有块级作用域的概念，所有很多时候，我们都必须借助于function的作用域来解决引用外面变量的问题
    在es6中加入了let，let他是有if和for的块级作用域
-->
<!--1.变量的作用域，变量在什么范围内是可用的
    2.没有块级作用域会引起的问题,if 的块级
    if（true）{
       var name=‘why’;
    }
    console.log('why');
    在{}作用域里面定义的变量，却能在外部被使用


    3.没有块级作用域引起的问题：for的块级
    为什么闭包可用解决问题，因为函数有作用域，所有里面的变量不会被改掉
-->
<!--使用const修饰的标识符为常量，不可以被在此赋值
    建议在开发时，优先使用const，只有需要改变某一个标识符的时候才使用let
-->
<script>
  //注意一：一旦给const修饰的标识符，被赋值之后不能修改
  const name ='why';
  //注意二：在使用const定义的标识符，必须进行赋值,否则会报错
  // const age;
  //注意三：常量的含义是指向的对象不能修改，但是可以改变对象内部的属性
  const obj ={
    name:'why',
    age:18,
    height:188,
  }
  obj.name='kobo';


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