对数组[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><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也是可以的。

对数组[i].index=i的理解相关推荐

直接映射缓存,全相联映射缓存,组相连映射与tag,index,offset的理解
知乎大佬的文章 tag,index,offset的理解这篇文章并不是真正介绍这些缓存地址映射方法的实现,而是基于上面大佬的文章的一些可能不好理解的地方的一些个人的理解. 直接相联映射我们一共有8行 ...
vue 获取数组索引_vue 重塑数组之修改数组指定index的值操作
如下所示: vm.items[indexofitem] = newvalue vue不能检测数组的变动想要实现可以使用vue的set方法 this.$set(this.items,indexofit ...
关于Numpy数组中属性shape的理解
关于Numpy数组中属性shape的理解概述:numpy数组都有着shape这一属性,怎么理解这一属性呢?看以下代码: # 关于numpy中shape参数的深刻理解 p1 = np.array([1 ...
C语言基础入门48篇_26_身份证号校验程序（以身份证的校验方式是实例加深对数组及函数封装的理解、字符-‘0‘得到字符对应的int类型数字）
本篇根据以二代身份证的校验方式是实例加深对数组及函数封装的理解 1. 第二代身份证号的组成第二代身份证号为18位,各位数字对应了不同的信息(以下顺序从左往右): AABBCCYYYYMMDDXXXV ...
多维数组np.pad函数的理解
多维数组np.pad函数的理解原函数是: np.pad(array, ((x1, y1), (x2, y2), (x3, y3)), 'constant') x1,y1) 意思是着在a这个三维矩阵中 ...
小程序判断数组的index是否为空_微信小程序之购物车功能（仅学习）
购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选 ...
知道一个数组某个index对应的值不知道下标的情况下删除该值
for (index,item) in Arr.enumerated() {if item == item {Arr.remove(at: index)}} 更好的方法是用数组的filter尾随闭包 ...
一维数组kmeans聚类c语言,一维数组的 K-Means 聚类算法理解
刚看了这个算法,理解如下,放在这里,备忘,如有错误的地方,请指出,谢谢需要做聚类的数组我们称之为[源数组] 需要一个分组个数K变量来标记需要分多少个组,这个数组我们称之为[聚类中心数组]及一个缓存 ...
新增数组_数组链表和List部分理解总结
数组访问快的原因: 数组在内存中的空间是连续的,因而可以直接通过数组的首地址计算出需要访问的位置,直接拿到元素或对象引用链表增删快原因: 这是相较于数组而言的,对于数组而言,元素的新增删除 ...
鸣人和佐助———三维数组标记踪迹，形象理解记忆
佐助被大蛇丸诱骗走了,鸣人在多少时间内能追上他呢? 已知一张地图(以二维矩阵的形式表示)以及佐助和鸣人的位置.地图上的每个位置都可以走到,只不过有些位置上有大蛇丸的手下,需要先打败大蛇丸的手下才能到这 ...

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

对数组[i].index=i的理解相关推荐

最新文章

热门文章

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

对 数组[i].index=i的理解相关推荐

最新文章

热门文章

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

对数组[i].index=i的理解相关推荐