前面的答案都是能做对的,但是后面的ES6和ES7真的一点都不会,该学习了!胖先森!
被打击了,真心被打击了!
最后面的语法还是不明所以,需要学习,学习,学习!
由一道简单的JS面试题发起的一系列追问，看看你能答对几个？
我们直接从简单的代码开始，看看它的运行结果是什么？
1. JS代码
for (var i=0;i<5;i++){
window.setTimeout(function(){
console.log(new Date(),i)
},1000)
}
上面的题目很简单，只要对作用域，闭包，异步执行[定时器]等知识有了解，应该会很快说出答案，在本地测试后，输出的答案如下。
跟预测结果不一样
追问①
如果我们需要用箭头->表示前后输出有一秒的间隔，那么最终输出的答案会是下面的结果1还是结果2呢？
for (var i=0;i<5;i++){
window.setTimeout(function(){
console.log(new Date(),i)
},1000)
}
console.log(new Date(),i,"->");
结果1. 5 -> 5 -> 5 -> 5 -> 5 -> 5
结果2. 5 -> 5, 5, 5, 5, 5
如果你对Javascript的定时器有所了解的话，会很快知道结果2是正确的。
在循环时设置定时器，几乎是同时生效的，一般情况下，这5个定时器会在同一秒内执行，结果会立即输出，因此结果2是正确的。
追问②
如果我期望输出以下的结果，该怎么做呢？
想要的结果: 5 -> 0, 1, 2, 3, 4
- 解决方案一:定义输出函数
有的同学可能会很容易想到通过定义一个专门的输出函数来执行。
var output = function(i){
window.setTimeout(function(){
console.log(new Date(),i)
},1000)
}
for (var i=0;i<5;i++){
output(i);//这里传过去的i的值被复制了
}
console.log(new Date(),i)
- 解决方案二:立即执行函数+闭包
熟悉闭包的同学可能会觉得这种方案比较low，他们会想到利用立即执行函数来解决闭包产生的问题，于是会给出以下答案。
for (var i=0;i<5;i++){
(function(j){
window.setTimeout(function(){
console.log(new Date(),j)
},1000)
})(i);
}
console.log(new Date(),i,"->");
上面的答案利用了立即执行函数来解决闭包造成的问题，是一种比答案1略好的方法。
- 解决方案二:let关键字
如果熟悉ES6语法的同学又会想到以上两种方法对于代码的改动都比较大，如果使用ES6的let命令会可能会更加容易，于是他们有了以下代码。
针对web前端应该去掌握最新的ES6的语法
for (let i=0;i<5;i++){
window.setTimeout(function(){
console.log(new Date(),i)
},1000)
}
// console.log(new Date(),i,"->")
首先，我们要确定的是，上述代码在运行中会报错，因为let是块级作用域，i只存在于循环体内部，最后一句i并未定义，在直接输出时会报错。
但是既然能够想到用let命令去做，说明对ES6有一定的了解，很不错。
追问③
如果对于上面的问题，觉得太简单了，那进行下面一个问题。
需要输出的形式如下，每隔一秒输出一个数字，该如何实现？
预想得到的结果: 0 -> 1 -> 2 -> 3 -> 4 -> 5
可能会有很多同学想到使用如下简单粗暴的方案去做。
for (var i=0;i<5;i++){
(function(j){
window.setTimeout(function(){
console.log(new Date(),j)
},1000*j);//修改0~4的时间
})(i);
}
// 增加定时器,超时设置为5秒
window.setTimeout(function(){
console.log(new Date(),i)
},1000*i)
对于以上的方案，虽然能实现这个简单的需求，但是并不能算面试时的一个加分项。
如果考虑到异步执行后的操作，上面的代码就会显得很吃力，那该怎么办呢？
- ES6的Promise
如果你对ES6的Promise有所了解，会很容易想到使用Promise去实现。
const tasks=[];
for (var i=0;i<5;i++){
((j)=>{
tasks.push(new Promise((resolve)=>{
window.setTimeout(()=>{
console.log(new Date(),j);
resolve();//这里需要执行resolve()
},1000*j);
}));
})(i);
}
Promise.all(tasks).then(()=>{
window.setTimeout(function(){
console.log(new Date(),i)
},1000);
});
没有学习ES6,突然感觉打击真大
追问④ 极限
既然掌握了ES6的Promise，我们可以更加追求代码的极致，使用ES7的async和await。
这里给出使用async和await的解决方案。
//模拟其他语言中的sleep,实际上可以是任何的异步操作
const sleep = (time) => new Promise((resolve)=>{
window.setTimeout(resolve,time);
});
(async()=>{//声明即执行的async函数表达式
for (var i=0;i<5;i++){
await sleep(1000);
console.log(new Date(),i);
}
await sleep(1000);
console.log(new Date(),i);
})();
最后说一下
本篇文章从一个简单的Javascript面试题开始，进行了一系列的追问，想一想你能答对几个追问呢？如果又不会的，记得回去查漏补缺，学习响应的知识。
网友评论