JavaScript代码题

追忆失去的时间

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();
data[1]();
data[2]();

请问一下，这段代码为什么会输出3,3,3呢，初学者不太明白

niufei58666

由于i使用var声明的，js中for循环是不构成代码块的，也就是在for里面声明的是全局变量。而每一次点击都会调用这个匿名函数，匿名函数中要引用变量i，但匿名函数中却没有找到，只能向上一层找，就找到了全局变量i，这时经过i++，i已经变成了3.所以不管点击哪个都只会弹出3。 解决方法你换成let ,使用let声明变量，let会使for循环构成块级作用域，这个变量只存在于当前的作用域, 就会输出1 2 3 了

zxl1227

[JavaScript] 纯文本查看 复制代码

data[0]();
data[1]();
data[2]();
上面是函数调用，下面是起作用的部分，剩余部分几乎没用
data[i] = function () {
    console.log(i);
  };

clddup

var 改为let 就OK,  JS基础问题, 作用域

Pwaerm

相当于

[Asm] 纯文本查看 复制代码

var data = [];
for (var i = 0; i < 3; i++) {  
}

data[0] = function () {
    console.log(i);
};
data[1] = function () {
    console.log(i);
};
data[2] = function () {
    console.log(i);
};
//这里i已经是3，所以下面全部输出3
data[0]();
data[1]();
data[2]();

xi520

4楼正解
你给数组的每个元素定义了一个相同的函数
function () {
    console.log(i);
};

当调用data[0]();data[1]();data[2]();时，其实这时循环已经运行完成  ，i就等于最后的3，所以，调用任何一个数组元素时就全部为3了

追忆失去的时间

zxl1227 发表于 2023-2-17 14:40
[mw_shl_code=javascript,true]data[0]();
data[1]();
data[2]();

谢谢回复，明白了

追忆失去的时间

wangchuanlin 发表于 2023-2-17 14:43
var 改为let 就OK,  JS基础问题, 作用域

谢谢回复，已经明白了

追忆失去的时间

Pwaerm 发表于 2023-2-17 14:43
相当于
[mw_shl_code=asm,true]var data = [];
for (var i = 0; i < 3; i++) {  

谢谢大佬回复，明白了

追忆失去的时间

xi520 发表于 2023-2-17 14:49
4楼正解
你给数组的每个元素定义了一个相同的函数
function () {

谢谢大佬的回复，明白了