循环陷阱

原因

• 循环了五次,
• 创建了五个函数,
• 每个函数都使用了同一个变量i
• 当函数执行的时候, 共用变量i已经变成5了,所以所有的函数都打印五
• 解决办法: 不再使用共用变量i,每个函数都各用各的

const ary = [];
for (var i = 0; i < 5; i++) {
    ary[i] = function(){
        console.log(i)
    }
}
ary[0]();// 5
ary[1]();// 5

方法一: 立即执行函数

利用闭包创建函数作用域隔离

const ary = [];
for (var i = 0; i < 5; i++) {
  (function(n) {·
    ary[i] = function(){
        console.log(i)
    }
  })(i)
}
ary[0]();//0
ary[1]();//1

方法二: 使用let

当使用let时,每循环一次都会产生独立的块级作用域

const ary = [];
for (let i = 0; i < 5; i++) {
    ary[i] = function(){
        console.log(i)
    }
}
ary[0]();// 0
ary[1]();// 1