js练习题第4天 答案及解析

本篇文章是js基础练习题第四天的答案及解析部分，纯题目部分请移步js基础练习题第4天

正文

仔细阅读以下代码段，回答下列问题:

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

1.该代码段的运行结果是什么？

答案：5 5 5 5 5 5

由于setTimeout中的回调函数会异步执行，故首先输出循环体外的内容。经过循环，此时i已变为5，故输出5。然后再等待大概1秒后输出5个5。

2.若用箭头（=>）表示其前后的两次输出之间有 1 秒的时间间隔，而逗号（,）表示其前后的两次输出之间的时间间隔可以忽略，那么代码实际运行的结果该如何描述？

答案：5 => 5, 5, 5, 5, 5

该题涉及到js的定时器工作机制和js的事件循环机制。5个定时器几乎是同时设置为1s后执行，故后面5次输出几乎没有间隔。

3.如果期望代码的输出变成：5 => 0, 1, 2, 3, 4，该怎么改造代码?给出你的解决方案

答案：提供两种解法

解法1：利用立即执行函数IIFE

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

解法2：利用按值传递，循环中调用普通函数，而不是回调函数

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

简单的把循环内的var声明改为let声明，并不能达到效果，因为let声明的变量在循环外并不能访问到。

4.如果期望代码的输出变成0 => 1 => 2 => 3 => 4 => 5，并且要求原有的代码块中的循环和两处console.log不变，该怎么改造代码?给出你的解决方案

答案：提供三种解法

解法1：利用按值传递，每次递增计数器的延时

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

解法2：利用立即执行函数IIFE，思路同解法1

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

解法3：利用ES6的Promise

const tasks = [];
const output = (i) => {
  new Promise((resolve) => {
    setTimeout(() => {
      console.log(i);
      resolve();  
    }, 1000 * i);
  });
}
for (var i = 0; i < 5; i++) {
  tasks.push(output(i));
}
Promise.all(tasks).then(() => {
  setTimeout(() => {
    console.log(i);  
  }, 1000);
});

5.setTimeout定时是否准确?为什么?

答案：SetTimeout定时并不一定是准确的，详见实际延时比设定值更久的原因

6.简单谈谈你对闭包的理解?

参考链接：学习Javascript闭包

说明

1.题目中出现的JS指的是采用ECMAScript 2015及之后标准的JavaScript

2.题目中，若有错误和需完善的地方，可在下方留言反馈哈~~

3.查看纯习题版，请点击js基础练习题第四天

我的前端后花园