es6 let 和var for循环里定义变量

1,724 阅读3分钟
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

解读:

a是一个数组,a的每一项都是一个函数function(){console.log(i);},

变量i是var声明的,是一个全局变量,而数组a的函数内部的console.log(i),里面的i指向的就是全局的i。也就是说,所有数组a的成员里面的i,指向的都是同一个i,导致运行时输出的是最后一轮的i的值,也就是 10

函数只有调用才会起作用,调用的时候i已经是10了,无论调用数组里边的哪个函数都是输出10

为什么是10 不是9呢?因为在循环中 i=9时 9<10 i执行了一个i++ 为10

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

解读:

变量i是用let声明的,声明的变量仅在块级作用域内有效,外部函数不能访问,所以当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以 a[1]() 只在i=1这轮循环内有效, a[2]()只在i=2这轮循环内有效,所以 a[6]()输出6

变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。你可能会问,如果每一轮循环的变量i都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。

for (var i = 0; i < 5; i++) {
	setTimeout(function(){
		console.log(i);
	},1000);
}

console.log(i);

先打印一个5 1秒钟后再打印出5个5

因为 for 循环会先执行完(同步优先于异步优先于回调),for循环执行的时候 i=4时 i<5 执行 i++,i为5, 当i=5时 ,i不小于5, 所以不执行i++, 所以for循环执行完的时候i最终为5

setTimeout是异步执行的,1秒后向任务队列里添加一个任务,只有主线上的全部执行完才会执行任务队列里的任务,所以当主线程for循环执行完之后 i 的值为5,这个时候再去任务队列中执行任务,i全部为5;

每次for循环的时候setTimeout都会执行,但是里面的function则不会执行被放入任务队列,因此放了5次;for循环的5次执行完之后不到1秒;

1秒后全部执行任务队列中的函数,所以就是输出五个5啦

for (let i = 0; i < 5; i++) {
	setTimeout(function(){
		console.log(i);//0,1,2,3,4
	},1000);
}

console.log(i);//i is not defined

因为let i 的是区块变量,每个i只能存活到大括号结束,并不会把后面的for循环的 i 值赋给前面的setTimeout中的i;而var i 则是局部变量,这个 i 的生命周期不受for循环的大括号限制;