for循环中的索引值

最新推荐文章于 2024-05-11 09:34:51 发布

wodeboke0219

最新推荐文章于 2024-05-11 09:34:51 发布

阅读量1.2k

点赞数

分类专栏： javascript 文章标签： for循环中的索引值

javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

首先我们看看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

wodeboke0219

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
for循环中的索引值

首先我们看看for循环：for(var i=0; i< 6; i++){ console.log(i);}123相信每个人都知道这个打印的结果吧！这个结果是：01234我们把for循环具体到某一个事例我们平时点击tab切换时，如何获取索引值呢？比如这个例子，代码如下：<!DOCTYPE html><html><head> <meta charset="u
复制链接

扫一扫