8割以上の面接対象者が失敗するJS面接の質問

合計 5024 単語あります。読み終えるのに 6 分、速読するのに 2 分かかります。この記事は、Zhihu コラム フロントエンド ウィークリーに初めて掲載されました。以前にも書きましたが、筆者は2年以上面接官として何百人ものフロントエンドエンジニアと面談してきましたが、8割以上の候補者が次の質問にすら合格できなかったのには驚きました。これはどんな魔法の面接の質問ですか?彼は候補者のどのような能力を検査しますか?この記事を読んでいるあなたにとって、それはどのような影響を及ぼしますか?ゆっくりお話ししましょう (関連する推奨事項「 フロントエンドの面接の質問 」)

Humble Beginning

フロントエンド エンジニア、特に中堅から中堅のエンジニアを募集します上級フロントエンドエンジニアには、しっかりした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% の人は、コードを 1 行ずつ確認し、結果を示します: 5, 0,1, 2,3,4;
• C. 50% の人がコードを取り上げて慎重に検討し、結果: 5,5,5, 5,5,5 ;

同期コードと非同期コードの違い、変数スコープ、クロージャ、JS のその他の概念を正しく理解していれば、正解は C で、コードの実際の出力は次のとおりです。

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

次に質問します。矢印が前後 2 つの出力間に 1 秒の時間間隔があることを示していることに同意する場合、カンマは、その前後の 2 つの出力間の時間間隔が無視できることを示します。コードを実行した実際の結果をどのように記述するか?次の 2 つの答えがあります:

• A. 60% の人は次のように説明します: 5 -> 5 -> 5 -> 5 -> 5、つまり、各 5 の間には 1 秒の時間間隔があります;
• B. 40% の人はそれを次のように説明します: 5 -> 5,5,5,5,5 、つまり、最初の 5 が直接出力され、1 秒後に 5 つの 5 が出力されます。

これには、受験者が JS のタイマー動作メカニズムに精通している必要があります。ループの実行は、ほぼ同時に設定されます タイマーは 5 つあります。通常の状況では、これらのタイマーは 1 秒後にトリガーされ、ループ後の出力はすぐに実行されます。明らかに、正しい説明は B です。

ここで資格があるとみなされる場合、面接に合格するのは 100 人中 20 人だけです。これを読んだ学生はよく考えてください。合格しましたか?

質問 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);

IIFE (Immediately Invoked Function Expression: 宣言されて実行される関数式) を賢く使用して、クロージャによって引き起こされる問題を解決します。良いアイデアですが、初心者にとってこのようなコードは理解しにくいかもしれません。少なくとも私が最初に始めたときは、本当に理解するまでしばらく考えました。

もっと直感的なアプローチはありますか?答えは「はい」です。出力を担当するコードが各ループの i 値を取得できるように、ループ本体にいくつかの調整を加える必要があるだけです。どうすればいいですか？ JS の基本型 (Primitive Type) のパラメータの受け渡しが値渡しであるという特徴を利用すると、次のコードを変形することは難しくありません。はJSの基本的な理解と応用ができていると考えられ、それぞれ10点加点できる。もちろん、実際の面接では、一部の受験者は次のコードを入力しました:

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);

注意深い学生なら、ここには非常に微妙な変更しかないことがわかります。これは、ES6 ブロック スコープ (ブロック スコープ) で let を使用することです。代わりに var が使用されていますが、最後の出力で使用されている i は、それが配置されているスコープには存在せず、i はループ内にのみ存在するため、コードが実際に実行されるとエラーが報告されます。

ES6 の機能について考えることができる生徒は、正しく答えられないかもしれませんが、ES6 についての理解を示しています。5 点を追加して、次の質問を続けることができます。

フォローアップの質問 2: ES6

経験豊富なフロントエンドの学生は、これを読んで少し焦るかもしれません。私はたくさん話しましたが、それは彼が知っていることのすべてです。心配しないでください。 、チャレンジの難易度は「成長を続ける」になります。

接着上文继续追问：如果期望代码的输出变成 0 -> 1 -> 2 -> 3 -> 4 -> 5，并且要求原有的代码块中的循环和两处 console.log 不变，该怎么改造代码？新的需求可以精确的描述为：代码执行时，立即输出 0，之后每隔 1 秒依次输出 1,2,3,4，循环结束后在大概第 5 秒的时候输出 5（这里使用大概，是为了避免钻牛角尖的同学陷进去，因为 JS 中的定时器触发时机有可能是不确定的，具体可参见 How Javascript Timers Work）。

看到这里，部分同学会给出下面的可行解：

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);

不得不承认，这种做法虽粗暴有效，但是不算是能额外加分的方案。如果把这次的需求抽象为：在系列异步操作完成（每次循环都产生了 1 个异步操作）之后，再做其他的事情，代码该怎么组织？聪明的你是不是想起了什么？对，就是 Promise。

可能有的同学会问，不就是在控制台输出几个数字么？至于这样杀鸡用牛刀？你要知道，面试官真正想考察的是候选人是否具备某种能力和素质，因为在现代的前端开发中，处理异步的代码随处可见，熟悉和掌握异步操作的流程控制是成为合格开发者的基本功。

顺着下来，不难给出基于 Promise 的解决方案（既然 Promise 是 ES6 中的新特性，我们的新代码使用 ES6 编写是不是会更好？如果你这么写了，大概率会让面试官心生好感）：

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 = []; // 这里存放异步操作的 Promise
const 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));
}

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

读到这里的同学，恭喜你，你下次面试遇到类似的问题，至少能拿到 80 分。

我们都知道使用 Promise 处理异步代码比回调机制让代码可读性更高，但是使用 Promise 的问题也很明显，即如果没有处理 Promise 的 reject，会导致错误被丢进黑洞，好在新版的 Chrome 和 Node 7.x 能对未处理的异常给出 Unhandled Rejection Warning，而排查这些错误还需要一些特别的技巧（浏览器、Node.js）。

追问 3：ES7

既然你都看到这里了，那就再坚持 2 分钟，接下来的内容会让你明白你的坚持是值得的。

多数面试官在决定聘用某个候选人之前还需要考察另外一项重要能力，即技术自驱力，直白的说就是候选人像有内部的马达在驱动他，用漂亮的方式解决工程领域的问题，不断的跟随业务和技术变得越来越牛逼，究竟什么是牛逼？建议阅读程序人生的这篇剖析。

回到正题，既然 Promise 已经被拿下，如何使用 ES7 中的 async await 特性来让这段代码变的更简洁？你是否能够根据自己目前掌握的知识给出答案？请在这里暂停 1 分钟，思考下。

下面是笔者给出的参考代码：

// 模拟其他语言中的 sleep，实际上可以是任何异步操作
const sleep = (timeountMS) => new Promise((resolve) => {
    setTimeout(resolve, timeountMS);
});

(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);
})();

总结

感谢你花时间读到这里，相信你收获的不仅仅是用 JS 精确控制代码输出的各种技巧，更是对于前端工程师的成长期许：扎实的语言基础、与时俱进的能力、强大技术自驱力。

推荐教程：《JS教程》

以上が8割以上の面接対象者が失敗するJS面接の質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。