for 循环中使用函数导致的闭包问题——两种方式解决

1: for循环中，如果给每个元素都使用函数进行处理的话，很可能出现闭包问题

var arr = [0,1,2,3,4,5];
function fn(){
	for(var i = 0;i<arr.length-1;i++){
		console.log("索引",i);
	}
}

控制台输出结果： 

 2: for循环中加入setTimeout函数

var arr = [0,1,2,3,4,5];
function fn2(){
	for(var i = 0;i<arr.length;i++){
		setTimeout(()=>{
			console.log("索引",i);
		},100)
	}
}

控制台输出如下：

发现所有的索引打印出来都是6

解析： 

    在for循环中使用var，因为var是全局变量，所以循环结束后值会被覆盖掉。

    比如： 初始值i=0; i<3那么最后循环结束后i的值就会也只能是3,

    因为 setTimeout 是一个异步函数，所以它拿到的是 ”循环结束后“ 的 i 的值，在 for 循环执行完循环后，因为上面我们说的 var是全局变量会被覆盖掉，所以此时的 i 是 5 的情况下，arr.length 是 6. 则再次进行++，然后，异步的 setTimeout 延时函数可以执行了，此时的 i 就是 6 了，所以会打印 6次索引6。

如果仅仅是为了保证索引能够依次执行到函数中的话，则可以有两种方式处理：

1.for循环中用let代替var——解决

var arr = [0,1,2,3,4,5];
function fn3(){
	for(let i = 0;i<arr.length;i++){
		setTimeout(()=>{
			console.log("索引",i);
		},100)
	}
}

控制台如下：

解析：

因为let在代码块中有自己的作用域块，所以在for循环表达式中使用let其实就等价于在代码块中使用let，也就是说：

function fn3(){
	for(let i = 0;i<arr.length;i++){
        let i = 隐藏作用域中的i（表达式中的i）
		setTimeout(()=>{
			console.log("索引",i);
		},100)
	}
}

所以在for循环中的表达式中使用let它的每一个值都会单独存在一个独立的作用域中不会被覆盖掉。 

//你也可以当成是声明了五个let块级作用域
{let i = 0}
{let i = 1}
{let i = 2}
{let i = 3}
{let i = 4}

 2.for循环中使用立即执行函数包裹——解决

var arr = [0,1,2,3,4,5];
function fn4(){
	for(let i = 0;i<arr.length;i++){
		((i)=>{
			setTimeout(()=>{
			console.log("索引",i);
		},100)
		})(i)
	}
}

控制台如下：

for循环中加入click点击事件

如果跟上面一样，都只是为了一个索引的话，或者索引对应的其他参数的话，其实可以直接通过将var 改为 let 来解决。

但是如果还有其他的操作，这种方式就不行了。只能是通过立即执行函数的方式来解决了

例如提到的图片放大镜的代码：

js显示图片放大镜效果：https://blog.csdn.net/yehaocheng520/article/details/115278622?spm=1001.2014.3001.5501

里面的给每个dom元素绑定点击事件就是通过立即执行函数来解决的。如果单纯的只是将var改为let，则是不可以的。。。。

 end！！