首先我们看看for循环:
for(var i=0; i< 6; i++){
console.log(i);
}
相信每个人都知道这个打印的结果吧!
这个结果是:
- 0
- 1
- 2
- 3
- 4
我们把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就会显示对应的下标。
我们再看一个有延时器的例子
for(var i = 0; i < 6; i++){
setTimeout(function(){
console.log(i);
},1000)
}
打印的结果会是怎样的呢?
结果是执行6次 6
怎么才能让它输出 0 1 2 3 4 5 呢?
和上面的例子很相近。
两种方法:
1.let
for(let i = 0; i < 6; i++){
setTimeout(function(){
console.log(i);
},1000)
}
2.闭包
for(let i = 0;i < 6; i++){
(function(index){
setTimeout(function(){
console.log(index); //6
},1000)
})(i)
}