前端JS基础与异步代码-优快云博客

不起眼的开始JS

前端工程师，尤其是中高级前端工程师，扎实的 JS 基础绝对是必要条件，基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察 JS 基础的时候，经常会提供下面这段代码，然后让人分析它实际运行的结果：

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

console.log(new Date, i);

这段代码很短，只有 7 行，我想下面这几种选择可能施大多数人的选择

A. 20% 的人会快速扫描代码，然后给出结果：0,1,2,3,4,5；
B. 30% 的人会拿着代码逐行看，然后给出结果：5,0,1,2,3,4；
C. 50% 的人会拿着代码仔细琢磨，然后给出结果：5,5,5,5,5,5；

只要对 JS 中同步和异步代码的区别、变量作用域、闭包等概念有正确的理解，就知道正确答案是 C，代码的实际输出是：

2017-03-18T10:43:45.873Z 5
2017-03-18T10:43:46.866Z 5
2017-03-18T10:43:46.868Z 5
2017-03-18T10:43:46.868Z 5
2017-03-18T10:43:46.868Z 5
2017-03-18T10:43:46.868Z 5

接下来会追问：如果约定，用箭头表示其前后的两次输出之间有 1 秒的时间间隔，而逗号表示其前后的两次输出之间的时间间隔可以忽略，代码应给为

A. 60% 的人会描述为：5 -> 5 -> 5 -> 5 -> 5，即每个 5 之间都有 1 秒的时间间隔；
B. 40% 的人会描述为：5 -> 5,5,5,5,5，即第 1 个 5 直接输出，1 秒之后，输出 5 个 5；

这就要求对 JS 中的定时器工作机制非常熟悉，循环执行过程中，几乎同时设置了 5 个定时器，一般情况下，这些定时器都会在 1 秒之后触发，而循环完的输出是立即执行的，显而易见，正确的描述是 B。

追问 1：闭包

如果这道题对 JS 异步代码、变量作用域的理解，局限性未免太大，接下来会追问，如果期望代码的输出变成：5 -> 0,1,2,3,4，该怎么改造代码？熟悉闭包的很快能给出下面的解决办法：

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

console.log(new Date, i);

巧妙的利用声明即执行的函数表达式来解决闭包造成的问题，确实是不错的思路，但是初学者可能并不觉得这样的代码很好懂，至少笔者初入门的时候这里琢磨了一会儿才真正理解

只需要对循环体稍做手脚，让负责输出的那段代码能拿到每次循环的 i 值即可。利用 JS 中基本类型的参数传递是按值传递的特征，不难改造出下面的代码：

var output = function (i) {
    setTimeout(function() {
        console.log(new Date, i);
    }, 1000);
};

for (var i = 0; i < 5; i++) {
    output(i);  // 这里传过去的 i 值被复制了
}

console.log(new Date, i);

但是还会有其他方法可以做出来

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

console.log(new Date, i);

这里只有个非常细微的变动，即使用 ES6 块级作用域（Block Scope）中的 let 替代了 var，但是代码在实际运行时会报错，因为最后那个输出使用的 i 在其所在的作用域中并不存在，i 只存在于循环内

接着上文继续追问：如果期望代码的输出变成 0 -> 1 -> 2 -> 3 -> 4 -> 5，并且要求原有的代码块中的循环和两处 console.log 不变，新的需求可以精确的描述为：代码执行时，立即输出 0，之后每隔 1 秒依次输出 1,2,3,4，循环结束后在大概第 5 秒的时候输出 5（这里，因为 JS 中的定时器触发时机有可能是不确定的）。

for (var i = 0; i < 5; i++) {
    (function(j) {
        setTimeout(function() {
            console.log(new Date, j);
        }, 1000 * j));  // 这里修改 0~4 的定时器时间
    })(i);
}

setTimeout(function() { // 这里增加定时器，超时设置为 5 秒
    console.log(new Date, i);
}, 1000 * i);

上面的代码简单粗暴，但是也有一定的缺陷那就是每次循环都会产生一个异步操作在做其它事情。因此还有一种做法就是ES6新特性Promise对象。

const tasks = [];
for (var i = 0; i < 5; i++) {   // 这里 i 的声明不能改成 let
    ((j) => {
        tasks.push(new Promise((resolve) => {
            setTimeout(() => {
                 console.log(new Date, j);
                resolve();  // 这里一定要 resolve，否则代码不会按预期 work
            }, 1000 * j);   // 定时器的超时时间逐步增加
        }));
    })(i);
}

Promise.all(tasks).then(() => {
    setTimeout(() => {
        console.log(new Date, i);
    }, 1000);   // 注意这里只需要把超时设置为 1 秒
});

还有一种做法

const tasks[];//这里tasks用来存放Promise对象
var output=(i)=>new Promise((resolve)=>{
         setTimeout(()=>{
           console.log(new Date,i);
           resolve();
         },1000*i);
});
//生成异步操作
for(var i=0;i<5;i++){
    tasks.push(output(i));
   }

Promise.all(tasks).then(()=>{
 setTimeout(()=>{
    console.log(new Date,i);  

},1000);

知道使用 Promise 处理异步代码比回调机制让代码可读性更高，但是使用 Promise 的问题也很明显，即如果没有处理 Promise 的 reject，会导致错误被丢进黑洞。

学习前段，这几个算法必须知道的

杨辉三角

javascript版本

var raw=8,
    array=new Array();
for(var i=0;i<raw;i++){
    var arraySon=[];
    for(var j=0;j<i+1;j++){
        if(i==0||j==0||j==i){
               arraySon.push(1);
            }
        else{
          arraySon.push(array[i-1][j-1]+array[i-1][j];)
        }

    }
    console.log(arraySon);
    array.push(arraySon);

}

插入排序

var arr=[48,30,35,3,17];
var arrLength=arr.length;
for(var i=0;i<arrLength;i++){
    var index=0;
    for(var j=1;j<arrLength-i;j++){
        if(arr[j]>arr[index]){index=j;}
       var temp=arr[arrLength-i-1];
       arr[arrLength-i-1]=arr[index];
       arr[index]=temp;
    }

}
console.log(arr);