for循环中的索引值

来源：互联网发布：mac复制文件到u盘编辑：程序博客网时间：2024/06/11 07:58

首先我们看看for循环：

for(var i=0; i< 6; i++){    console.log(i);}1
2
3

相信每个人都知道这个打印的结果吧！
这个结果是：

我们把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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

我想问一哈，这个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);    }}打印的结果是点击所对应的每一项。1
2
3
4
5
6
7
8

2.通过闭包

for( var i = 0; i < list.length; i++){    (function(index){        list[i].onclick = function(){            console.log(i);        }    })(i)}1
2
3
4
5
6
7

上面这个就是所谓的闭包，闭包的作用就是函数内部可以获取函数之外的变量和参数。
首先，我们看一下闭包的写法，()(i)
第二个小括号中的i，起始就是函数中的实参，传给了index，
所以点击哪一个就会打印对应的索引值。

3.通过ES6中的let

for(let i = 0;i < list.length; i++){    list[i].onclick = function(){        console.log(i);    }}1
2
3
4
5

打印的结果就是点击那个li就会显示对应的下标。
我们再看一个有延时器的例子

for(var i = 0; i < 6; i++){    setTimeout(function(){        console.log(i);    },1000)}1
2
3
4
5

打印的结果会是怎样的呢？
结果是执行6次 6

怎么才能让它输出 0 1 2 3 4 5 呢？
和上面的例子很相近。
两种方法：
1.let

for(let i = 0; i < 6; i++){    setTimeout(function(){        console.log(i);    },1000)}1
2
3
4
5

2.闭包

for(let i = 0;i < 6; i++){    (function(index){        setTimeout(function(){            console.log(index); //6        },1000)    })(i)}1
2
3
4
5
6
7

阅读全文

0 0