javascript分别用正则，闭包，块级作用域实现点击按钮返回按钮里面的数字![1.png](https://p6-j

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      button {
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <button>这是第0个按钮</button><button>这是第1个按钮</button
    ><button>这是第2个按钮</button><button>这是第3个按钮</button
    ><button>这是第4个按钮</button><button>这是第5个按钮</button
    ><button>这是第6个按钮</button><button>这是第7个按钮</button
    ><button>这是第8个按钮</button><button>这是第9个按钮</button
    ><button>这是第10个按钮</button><button>这是第11个按钮</button
    ><button>这是第12个按钮</button><button>这是第13个按钮</button
    ><button>这是第14个按钮</button><button>这是第15个按钮</button
    ><button>这是第16个按钮</button><button>这是第17个按钮</button
    ><button>这是第18个按钮</button><button>这是第19个按钮</button
    ><button>这是第20个按钮</button><button>这是第21个按钮</button
    ><button>这是第22个按钮</button><button>这是第23个按钮</button
    ><button>这是第24个按钮</button><button>这是第25个按钮</button
    ><button>这是第26个按钮</button><button>这是第27个按钮</button
    ><button>这是第28个按钮</button><button>这是第29个按钮</button
    ><button>这是第30个按钮</button><button>这是第31个按钮</button
    ><button>这是第32个按钮</button><button>这是第33个按钮</button
    ><button>这是第34个按钮</button><button>这是第35个按钮</button
    ><button>这是第36个按钮</button><button>这是第37个按钮</button
    ><button>这是第38个按钮</button><button>这是第39个按钮</button
    ><button>这是第40个按钮</button><button>这是第41个按钮</button
    ><button>这是第42个按钮</button><button>这是第43个按钮</button
    ><button>这是第44个按钮</button><button>这是第45个按钮</button
    ><button>这是第46个按钮</button><button>这是第47个按钮</button
    ><button>这是第48个按钮</button><button>这是第49个按钮</button
    ><button>这是第50个按钮</button><button>这是第51个按钮</button
    ><button>这是第52个按钮</button><button>这是第53个按钮</button
    ><button>这是第54个按钮</button><button>这是第55个按钮</button
    ><button>这是第56个按钮</button><button>这是第57个按钮</button
    ><button>这是第58个按钮</button><button>这是第59个按钮</button
    ><button>这是第60个按钮</button><button>这是第61个按钮</button
    ><button>这是第62个按钮</button><button>这是第63个按钮</button
    ><button>这是第64个按钮</button><button>这是第65个按钮</button
    ><button>这是第66个按钮</button><button>这是第67个按钮</button
    ><button>这是第68个按钮</button><button>这是第69个按钮</button
    ><button>这是第70个按钮</button><button>这是第71个按钮</button
    ><button>这是第72个按钮</button><button>这是第73个按钮</button
    ><button>这是第74个按钮</button><button>这是第75个按钮</button
    ><button>这是第76个按钮</button><button>这是第77个按钮</button
    ><button>这是第78个按钮</button><button>这是第79个按钮</button
    ><button>这是第80个按钮</button><button>这是第81个按钮</button
    ><button>这是第82个按钮</button><button>这是第83个按钮</button
    ><button>这是第84个按钮</button><button>这是第85个按钮</button
    ><button>这是第86个按钮</button><button>这是第87个按钮</button
    ><button>这是第88个按钮</button><button>这是第89个按钮</button
    ><button>这是第90个按钮</button><button>这是第91个按钮</button
    ><button>这是第92个按钮</button><button>这是第93个按钮</button
    ><button>这是第94个按钮</button><button>这是第95个按钮</button
    ><button>这是第96个按钮</button><button>这是第97个按钮</button
    ><button>这是第98个按钮</button><button>这是第99个按钮</button
    ><button>这是第100个按钮</button>
  </body>
  <script>
    // 先找到所有的数字
    var btns = document.querySelectorAll("button");
    for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        // 定义一个数字的正则
        var reg = /\d+/; /* \d表示数字，+表示数字位数不限 */
        // innerHTML获取到了元素里面的所有内容
        // match()匹配
        alert(this.innerHTML.match(reg)[0]);
      };
    }

    // 第二种方法，使用闭包，函数调用函数
    // 函数可以记住它初始时候它周围的一个环境，包括它传进来的参数
    // 内部函数引用了外部函数的参数
    // 函数里面再定义一个函数
    // 把i当成参数传进去
    for (var i = 0; i < btns.length; i++) {
      // 定义一个立即执行函数
      // 立即执行函数除了括号写在函数后面之外，还要把函数本身用括号包起来
      (function (i) {
        btn[i].onclick = function () {
          // 这时候的i还是for循环时候的i，不是for循环结束以后的i
          alert[i];
        };
      })(i);
    }
    //第三种是 块级作用域的方法
    // let定义的不是全局作用域，而是块级作用域的变量
    // 每个块级作用域的变量是不一样的，
    // 当i= 0的时候，块级作用域里面的i是0
    // 当i= 1的时候，块级作用域里面的i是1
    // 如果用var 定义，那么就是全局作用域，i都是一样的
    for (let i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        alert[i];
      };
    }
  </script>
</html>