ES 6 精讲（一）认识一下ES6

最新推荐文章于 2022-09-13 08:14:51 发布

小白追梦

最新推荐文章于 2022-09-13 08:14:51 发布

阅读量275

点赞数

分类专栏： ES6 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43815680/article/details/108520834

版权

ES6 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了ES6中的一个重要特性，通过实例解析了块级作用域带来的变化，特别是`let`关键字如何解决变量冲突问题。文章还探讨了`var`与`let`的区别，并引入了解构赋值的概念，帮助读者更好地理解和运用ES6的这些新特性。

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

1-1 认识一下ES6

在这里插入图片描述

我们来举个例子说明一下这个问题

这个例子简单实现3个目标小方块点击效果展示
我们想通过这样的方式实现当我们点击 a b c 三个小块的时候弹出0 1 2
但是我们写出来的不管点击哪个都只会弹出3

<!DOCTYPE html>
<html>
  <head>
    <title>document</title>
    <meta charset="utf-8" />
    <style type="text/css"></style>
  </head>

  <body>
    <input type="button" value="a" />
    <input type="button" value="b" />
    <input type="button" value="c" />
  </body>
</html>
<script type="text/javascript">
  window.onload = function () {
    let aBtn = document.getElementsByTagName("input");

    for (var i = 0; i < aBtn.length; i++) {
      aBtn[i].onclick = function () {
        alert(i);
      };
    }
  };
</script>