首先我们看看for循环:
for(var i=0; i< 6; i++){
console.log(i);
}
相信每个人都知道这个打印的结果吧!
这个结果是:
0
1
2
3
4
5
我们把for循环具体到某一个事例
我们平时点击tab切换时,如何获取索引值呢?
比如这个例子,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>闭包</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.list{
width: 100%;
height: 300px;
background: #f99;
}
.list li{
width: 100%;
height: 40px;
background: yellow;
margin-bottom: 10px;
}
.center{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<ul class="list">
<li class="center">1</li>
<li class="center">2</li>
<li class="center">3</li>
<li class="center">4</li>
<li class="center">5</li>
<li class="center">6</li>
</ul>
<script type="text/javascript">
var list = document.getElementsByTagName("li");
//console.log(list.length); //6
for(var i = 0;i < list.length; i++){
list[i].onclick = function(){
console.log(i);
}
}
</script>
</body>
</html>
我想问一哈,这个i打印的值是?
结果是6
因为已经循环完了。
获取索引值的方法有三种:
1.通过index属性
for(var i = 0;i < list.length; i++){
list[i].index = i;
list[i].onclick = function(){
var index = this.index;
console.log(index);
}
}
打印的结果是点击所对应的每一项。
2.通过闭包
for( var i = 0; i < list.length; i++){
(function(index){
list[i].onclick = function(){
console.log(i);
}
})(i)
}
上面这个就是所谓的闭包,闭包的作用就是函数内部可以获取函数之外的变量和参数。
首先,我们看一下闭包的写法,()(i)
第二个小括号中的i,起始就是函数中的实参,传给了index,
所以点击哪一个就会打印对应的索引值。
3.通过ES6中的let
for(let i = 0;i < list.length; i++){
list[i].onclick = function(){
console.log(i);
}
}
打印的结果就是点击那个li就会显示对应的下标。