经典 JS 题集合（包括频繁笔试题）（持续更新）

一、同步异步与变量作用域

以下输出什么？

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(new Date().toLocaleTimeString(), 'hello', i);
    }, 1000);
}

console.log(new Date().toLocaleTimeString(), 'word', i);

正确答案：

17:05:42 word 3
17:05:43 hello 3
17:05:43 hello 3
17:05:43 hello 3

原因：
循环后，设置了 3 个定时器，他们在 1 s 后触发。而循环后，其后的代码是立即执行。
因为 i 是全局变量， 循环后，包括 1 s 后都变为了 3。

优化：

① 想输出以下效果：

17:05:42 word 3
17:05:43 hello 0
17:05:43 hello 1
17:05:43 hello 2

1、利用 setTimeout API

for (var i = 0; i < 3; i++) {
    setTimeout(function(j) {  
        console.log(new Date().toLocaleTimeString(), 'hello', j);
    }, 1000, i); // 设置了 j = i
}

console.log(new Date().toLocaleTimeString(), 'word', i);

2、利用 JS 中基本类型 的参数传递是按值传递

var output = function (i) {
    setTimeout(function() {  
        console.log(new Date().toLocaleTimeString(), 'hello', i);
    }, 1000); 
}
for (var i = 0; i < 3; i++) {
    output(i)
}

console.log(new Date().toLocaleTimeString(), 'word', i);

3、利用闭包

for (var i = 0; i < 3; i++) {
  (function (j) {  // j = i
    setTimeout(function () {
      console.log(new Date().toLocaleTimeString(), "hello", j);
    }, 1000);
  })(i);  
}

console.log(new Date().toLocaleTimeString(), "word", i);

4、用 ES6 的 let 设置局部变量（但外部不可用此变量，会报错）

for (let i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(new Date().toLocaleTimeString(), 'hello', i);
    }, 1000);
}

console.log(new Date().toLocaleTimeString(), 'word', i); // 报错

结果是

Uncaught ReferenceError: i is not defined
17:05:43 hello 0
17:05:43 hello 1
17:05:43 hello 2

---

② 若想输出以下效果：

17:05:43 hello 0
17:05:44 hello 1
17:05:45 hello 2
17:05:45 word 3

1、用 ES6 的 Promise

const tasks = []; // 存放所有异步操作的 Promise
const output = (i) =>
  new Promise((resolve) => {
    setTimeout(() => {
      console.log(new Date().toLocaleTimeString(), "hello", i);
      resolve();
    }, 1000 * i);
  });

for (var i = 0; i < 3; i++) {
  tasks.push(output(i));
}

// 所有异步操作完成之后，输出最后的 i
Promise.all(tasks).then(() => {
  console.log(new Date().toLocaleTimeString(), "word", i);
});

2、ES7 的 async/await

const sleep = (timeountMS) =>
  new Promise((resolve) => {
    setTimeout(resolve, timeountMS);
  });

(async () => {
  for (var i = 0; i < 3; i++) {
    await sleep(1000);
    console.log(new Date().toLocaleTimeString(), "hello", i);
  }

  console.log(new Date().toLocaleTimeString(), "word", i);
})();

以上参考 作者：王仕军 破解前端面试（80% 应聘者不及格系列）：从闭包说起 来源：稀土掘金

二、script 标签的 defer 和 async 属性

默认：
当浏览器遇到 script 标签时，文档的解析将停止，并立即下载并执行脚本，脚本执行完毕后将继续解析文档。

<script type="text/javascript" src="x.js"></script>

async：
当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，脚本下载完成后开始执行脚本，脚本执行的过程中文档将停止解析，直到脚本执行完毕。

<script type="text/javascript" src="x.js" async="async"></script>

defer：
当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，等文档解析完成，脚本才会执行。

<script type="text/javascript" src="x.js" defer="defer"></script>