js学习之ES6

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

// 造三个按钮

<button id="btn1">btn1</button>

<button id="btn2">btn2</button>

<button id="btn3">btn3</button>

<script type="text/javascript">

// 获取被制造出来的三个按钮

let allButton = document.getElementsByTagName('button');

for(var i = 0 ;i <allButton.length;i++){

allButton[i].onclick = function(){

console.log(i);

}

}

// 匿名函数

for(var index = 0 ;index <allButton.length;index++){

(function(i){

console.log(i);

})(index)

}

// 快级别函数

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

allButton[i].onclick = function(){

console.log(i);

}

}

</script>

</body>

</html>

昨晚太困，写的不好。

看下面。。。。。。。。。。。锵锵！！！！！！

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h1>CASE1: for 循环的计数器是var的场合，先循环完了，才去绑定的事件，所以输出不正。全部是是3.</h1>

<div id="case1">

<button id="btn1">btn1</button>

<button id="btn2">btn2</button>

<button id="btn3">btn3</button>

</div>

<script type="text/javascript">

// 获取被制造出来的三个按钮

let allButton1 = document.querySelectorAll('#case1>button');

//

for(var i = 0 ;i <allButton1.length;i++){

allButton1[i].onclick = function(){

console.log(i);

}

}

</script>

<h1>CASE2: 使用了匿名函数，关于匿名函数的概念，我还得研究研究，反正匿名函数是可以解决上面case1的尴尬问题，实现了一边绑定，一边传值的效果。所以就是绑定的当时的，计数时候的那个时间点的循环变量。据说是通过index这个形参给传进去的</h1>

<div id="case2">

<button id="btn1">btn1</button>

<button id="btn2">btn2</button>

<button id="btn3">btn3</button>

</div>

<script type="text/javascript">

// 获取被制造出来的三个按钮

let allButton2 = document.querySelectorAll('#case2>button');

// 匿名函数

for(var index = 0 ;index <allButton2.length;index++){

(function(i){

console.log(i);

})(index)

}

</script>

<h1>CASE3: 与case1相比，只是var i 变成了 let j ，神奇不神奇，厉害不厉害，据说这种就是所谓的块级作用域的使用，相当于case2中那样使用了匿名函数。</h1>

<div id="case3">

<button id="btn1">btn1</button>

<button id="btn2">btn2</button>

<button id="btn3">btn3</button>

</div>

<script type="text/javascript">

// 获取被制造出来的三个按钮

let allButton3 = document.querySelectorAll('#case3>button');

// 块级别函数

for(let j = 0 ;j <allButton3.length;j++){

allButton3[j].onclick = function(){

console.log(j);

}

}

</script>

</body>

</html>

匿名函数的参考