对数组[i].index=i的理解

最新推荐文章于 2023-02-08 16:30:41 发布

笑道三千

最新推荐文章于 2023-02-08 16:30:41 发布

阅读量1.9k

点赞数 5

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_42349568/article/details/106996007

版权

JS 专栏收录该内容

80 篇文章 5 订阅

订阅专栏

当一个for循环中不包含事件对象时，i的值就是数组的索引值：

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

输出的结果为：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				list-style: none;
				width: 100px;
				height: 30px;
				background-color: blue;
				text-align: center;
				line-height: 30px;
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<ul id="list">
			<li>0</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
		</ul>
		<script type="text/javascript">
			var lisarr=document.getElementsByTagName("li");
			for(var i=0;i<lisarr.length;i++){
				lisarr[i].onclick=function(){
					console.log(i)
				};
			}
		</script>
	</body>
</html>

而当for循环中存在事件的定义时，for循环是先执行一遍，此时i因为是全局变量，就等于最后循环结束时的i值了。

此时无论点击哪个li,显示的都是8.

解决办法：数组的元素li标签也是对象，既然是对象，就可以有自己的属性和方法，我们只要在循环的时候乘它不注意，给它添加一个属性值，来存储自己所在的索引值即可。

这样一来，在事件触发调用函数的时候，函数的this指向这个li对象。（普通函数调用，谁调用this指向谁）。于是就可以通过this来读取这个索引值了：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				list-style: none;
				width: 100px;
				height: 30px;
				background-color: blue;
				text-align: center;
				line-height: 30px;
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<ul id="list">
			<li>0</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
		</ul>
		<script type="text/javascript">
			var lisarr=document.getElementsByTagName("li");
			for(var i=0;i<lisarr.length;i++){
				lisarr[i].num=i;
				//给每个li对象设置num属性，存储自身索引值
				lisarr[i].onclick=function(){
					console.log(this.num)
					//this哪个li对象调用函数，则指向哪个li对象，this.num就读取出原本存储的索引值了。
				};
			}
		</script>
	</body>
</html>

实现的效果如下：

至于数组[i].index=i，则只是把这个属性的名字命名为index而已，如上文，我命名为num也是可以的。

笑道三千

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
对数组[i].index=i的理解

当一个for循环中不包含事件对象时，i的值就是数组的索引值：var arr=[0,1,2,3,4,5,6,7]; for(var i=0;i<arr.length;i++){ console.log(i); } 输出的结果为：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> &lt...
复制链接

扫一扫