第 31 题：改造下面的代码，使之输出0 - 9，写出你能想到的所有解法。

[zpzxgcr]

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

[jefferyE]

// 解法一：
for (let i = 0; i< 10; i++){
  setTimeout(() => {
    console.log(i);
  }, 1000)
}

// 解法二：
for (var i = 0; i< 10; i++){
  ((i) => {
    setTimeout(() => {
      console.log(i);
    }, 1000)
 })(i)
}

[gaomin]

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

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


for (let i = 0; i< 10; i++){
    setTimeout(() => {
	console.log(i);
    }, 1000)
}

[MarsGT]

正常写法：

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

砸场子写法：

let i = 0,
timer = setInterval(() => {
    i < 10 ?
    console.log(i++) :
    clearInterval(timer);
})

[yuejuanmyword]

 for(let i = 0 ; i < 10; i++){
            setTimeout(()=>{
                console.log(i)
            },1000)
        }

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

解决办法汇总

• 方法一

  原理：

  • 利用 setTimeout 函数的第三个参数，会作为回调函数的第一个参数传入
  • 利用 bind 函数部分执行的特性

  代码 1：

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

  代码 2：

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

  代码 3：

  for (var i = 0; i < 10; i++) {
    setTimeout(console.log.bind(Object.create(null), i), 1000)
  }

• 方法二

  原理：

  • 利用 let 变量的特性 — 在每一次 for 循环的过程中，let 声明的变量会在当前的块级作用域里面（for 循环的 body 体，也即两个花括号之间的内容区域）创建一个文法环境（Lexical Environment），该环境里面包括了当前 for 循环过程中的 i，具体链接

  代码 1：

  for (let i = 0; i < 10; i++) {
    setTimeout(() => {
      console.log(i);
    }, 1000)
  }

  等价于

  for (let i = 0; i < 10; i++) {
    let _i = i;// const _i = i;
    setTimeout(() => {
      console.log(_i);
    }, 1000)
  }

• 方法三

  原理：

  • 利用函数自执行的方式，把当前 for 循环过程中的 i 传递进去，构建出块级作用域。IIFE 其实并不属于闭包的范畴。参考链接如下：
    • difference-between-closures-and-iifes-in-javascript
    • IIFE 是闭包?
  • 利用其它方式构建出块级作用域

  代码 1：

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

  代码 2：

  for (var i = 0; i < 10; i++) {
    try {
      throw new Error(i);
    } catch ({
      message: i
    }) {
      setTimeout(() => {
        console.log(i);
      }, 1000)
    }
  }

• 方法四

  原理：

  • 很多其它的方案只是把 console.log(i) 放到一个函数里面，因为 setTimeout 函数的第一个参数只接受函数以及字符串，如果是 js 语句的话，js 引擎应该会自动在该语句外面包裹一层函数

  代码 1：

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

  代码 2：

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

  代码 3：

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

  代码 4：

  for (var i = 0; i < 10; i++) {
    setTimeout((i => {
      console.log(i);
    }).call(Object.create(null), i), 1000)
  }

  代码 5：

  for (var i = 0; i < 10; i++) {
    setTimeout((i => {
      console.log(i);
    }).apply(Object.create(null), [i]), 1000)
  }

  代码 6：

  for (var i = 0; i < 10; i++) {
    setTimeout((i => {
      console.log(i);
    }).apply(Object.create(null), { length: 1, '0': i }), 1000)
  }

• 方法五

  原理：

  • 利用 eval 或者 new Function 执行字符串，然后执行过程同方法四

  代码 1：

  for (var i = 0; i < 10; i++) {
    setTimeout(eval('console.log(i)'), 1000)
  }

  代码 2：

  for (var i = 0; i < 10; i++) {
    setTimeout(new Function('i', 'console.log(i)')(i), 1000)
  }

  代码 3：

  for (var i = 0; i < 10; i++) {
    setTimeout(new Function('console.log(i)')(), 1000)
  }

[btea]

利用try/catch的块级作用域也能实现目的:

for(var i = 0; i < 10; i++){ 
  try{
     throw i;
  }catch(i){
     setTimeout(() => { console.log(i); },1000)    
  }
}       

[jerrychane]

闭包解法

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

[oliyg]

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

除了 let 这个可能是改动最少的😂

[oliyg]

for (var i = 0; i< 10; i++){
    (() => {
        var temp = i // 闭包
        setTimeout(() => {
            console.log(temp);
        }, 1000)
    })()
}

[gaomin]

利用try/catch的块级作用域也能实现目的:

for(var i = 0; i < 10; i++){ 
  try{
     throw i;
  }catch(i){
     setTimeout(() => { console.log(i); },1000)    
  }
}       

涨知识啦

[SDXYRR]

for(let i=0;i<10;i++){
setTimeout(() => {
console.log(i);
}, 1000);
}

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

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

[GitHdu]

for (var i = 0; i< 10; i++){
   setTimeout(((i) => {
   console.log(i);
   }).call(null,i), 1000)
}

[chenchangyuan]

最简单的将var改成let

for (let i = 0; i< 10; i++){
   setTimeout(() => {
   console.log(i);
   }, 1000)
}

其实有些方法是不满足要求的，为啥这样说呢？因为题目其实是有隐性要求，也即每隔 1s 输出一个数字，虽说题目没有明确说出来。所以这种解法不满足要求，比如：

for (var i = 0; i < 10; i++) {
  setTimeout(console.log(i, Date.now()), 1000)
}