为什么使用let关键字而不使用var

时间:2018-08-29 01:36:37

标签: javascript ecmascript-6

在下面的代码中,当我使用var声明我的盒子时,我创建的盒子使用相同的数字,但是当我更改var关键字以使用let代替时,它将正确显示。谁能深入解释每种情况下发生了什么?还可以在不使用let关键字的情况下解决该问题吗?

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    section > div {
      height: 100px;
      width: 100px;
      background-color: red;
      float: left;
      margin: 3px;
      cursor: pointer;
    }
  </style>
  
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel" defer>
    for( var i = 0; i < 45; i++ ){
      var div = document.createElement('div');
      div.onclick = function(){
        alert("you clicked on a box #" + i);
      };
      document.getElementsByTagName('section')[0].appendChild(div);
    }
  </script>
  <title>Let Keyword</title>
</head>
<body>
  <header>
    <h1>Click on a box</h1>
  </header>
  <section></section>
</body>
</html>

0 个答案:

没有答案