2018 ～ 2022 年のフロントエンド JavaScript 面接の質問 (コレクション)

この記事は、2018 年から 2022 年までのフロントエンド JavaScript の面接の質問をまとめたものであり、一定の参考価値がありますので、皆さんのお役に立てればと思い、共有します。

[関連する推奨事項: フロントエンドのインタビューの質問(2022)、js のインタビューの質問(2022)]

私たちは本当にコードを書いているのでしょうか、それとも単にレゴブロックのようにコードを組み立てているだけなのでしょうか?

2020 年末現在、ほとんどの面接対象者が AJAX について質問されると、面接官は依然として jQuery のコンテキストで質問に答えています。このギャップの典型的な例は数多くあります。

• CSS グリッドとフレックスボックス レイアウトは広くサポートされています。ただし、CSS のインタビューでは、依然として複数列のフロート レイアウトとブロック レベル要素のインライン センタリングに重点が置かれています。彼らは今でも Bootstrap や Foundation グリッド システムに対して尽きることのない情熱を持っています。

• モジュール バンドラーは現在、大規模アプリケーションではほぼ標準となっています。ただし、アーキテクチャに関して言えば、縮小と連結について話します。面接中に Webpack について実際に何回話し合ったでしょうか?

• コードの 97% が NPM から来ているが、インタビューの焦点は配列の並べ替えやオブジェクトの反復ではない場合。さらに悪いことに、私たちは依然として typeof null に興味を持っています。適切なライブラリ、フレームワーク、またはツールを選択するための合理的なアプローチについて話してみませんか?

• 私たちは依然としてインタビュー対象者に、プロトタイプの上に古典的な継承を行うよう求めていますが、これらの誤解の必要性を検証するためではありません。より多くの機能モードがあります。もちろん、JavaScript クラスを使用して、新しく導入されたプライベート プロパティと静的プロパティについて議論することができます。これにより、面接官の考え方や重要な決定などをより深く理解できるようになります。

• キャッシュに関する議論は、依然としてキャッシュ コントロール ヘッダー (コントロール ヘッダー) と CDN に限定されています。 IndexDB、HTTP/2、Service Worker などは通り過ぎていきます。

このような例は数え切れないほどあり、面接評価と実際の職務要件とのギャップは明らかです。一方で、私たちのフロントエンド技術の実装は飛躍的な進歩を遂げていますが、その一方で、新しい開発手法はまだ大きなコミュニティを形成していません。分断されたコミュニティは決して良い兆候ではありません。これは災難への道です。ギャップは常に新しいものを生み出し、それは私たちがこれまで築いてきたものをすべて破壊する力を持っています。 Java 開発者が GWT を使用して別の Facebook を作成するなんて想像できません。

面接は、変化を促し、才能ある人材を集めるための優れた方法です。面接官としては、面接をただの面接として捉えていては、自分が肥大化するだけです。

面接を成功させるには、ディスカッションを行う必要があります。きっと意見交換の場になるはずです。それは人々に与えられた問題を客観的に考え、分析するよう促すはずです。それは人々が下す意思決定プロセスを理解すること、テクノロジーと問題解決に対するその人の情熱を理解すること、そして将来同僚になる可能性のある人々を理解することです。これらすべてのパズル、トリック、または typeof null は、実際の面接としては適格ではありません。

これは、面接でのディスカッション中に尋ねられる質問の一部のリストです。このチェックリストが、面接官と面接を受ける人が適切な状況で期待、ニーズ、現実を設定するのに役立つことを願っています。

TLDR; 私たちはまず自分自身を面接官として考える必要があります。

#JavaScript の基本的な質問

1. 次のコードを正常に実行します。

JavaScript コード:

const a = [1, 2, 3, 4, 5];
 
// Implement this
a.multiply();
 
console.log(a); // [1, 2, 3, 4, 5, 1, 4, 9, 16, 25]

2。次のコードは JavaScript で false を返します。この理由を説明してください:

JavaScript コード:

// false
0.2 + 0.1 === 0.3

3. JavaScript のさまざまなデータ型には何がありますか?

ヒント: タイプは、主データ型と参照型 (オブジェクト) の 2 つだけです。主に6種類あります。

4. 次の非同期コードの問題を解決します。

同じ教室に所属する各生徒 (ID 75 を持つ生徒もいます) の平均スコアを取得して計算します。各学生は年間に 1 つ以上のコースを受講できます。次の API を使用して、必要なデータを取得できます。

JavaScript コード:

// GET LIST OF ALL THE STUDENTS
GET /api/students
Response:
[{
    "id": 1,
    "name": "John",
    "classroomId": 75
}]
// GET COURSES FOR GIVEN A STUDENT
GET /api/courses?filter=studentId eq 1
Response:
[{
   "id": "history",
   "studentId": 1
}, {
   "id": "algebra",
   "studentId": 1
},]
// GET EVALUATION FOR EACH COURSE
GET /api/evaluation/history?filter=studentId eq 1
Response:
{
    "id": 200,
    "score": 50,
    "totalScore": 100
}

教室 ID を受け入れる関数を作成し、それに基づいてその教室の各生徒の平均を計算します。この関数の最終出力は、平均スコアを持つ生徒のリストになります。

JavaScript コード:

[
  { "id": 1, "name": "John", "average": 70.5 },
  { "id": 3, "name": "Lois", "average": 67 },
]

通常の

callbacks、promises、 observables、generator、または async-wait を使用して、必要な関数を作成します。少なくとも 3 つの異なる手法を使用して、この問題を解決してみてください。

5. JavaScript プロキシを使用して単純なデータ バインディングを実装する

ヒント: ES プロキシを使用すると、任意のオブジェクト プロパティまたはメソッドへの呼び出しをインターセプトできます。まず、基礎となるバインディング オブジェクトが変更されるたびに DOM を更新する必要があります。

6.解释 JavaScript 并发模型

您是否熟悉 Elixir，Clojure，Java 等其他编程语言中使用的任何其他并发模型？

提示：查找事件循环，任务队列，调用栈，堆等。

7.new 关键字在 JavaScript 中有什么作用？

提示：在 JavaScript 中，new 是用于实例化对象的运算符。 这里的目的是了解知识广度和记忆情况。

另外，请注意 [[Construct]] 和 [[Call]]。

8.JavaScript 中有哪些不同的函数调用模式？ 详细解释。

提示：有四种模式，函数调用，方法调用，.call() 和 .apply()。

9.解释任一即将发布新的 ECMAScript 提案。

提示：比如 2018 的 BigInt，partial 函数，pipeline 操作符 等。

10.JavaScript 中的迭代器（iterators）和迭代（iterables）是什么？ 你知道什么是内置迭代器吗？

11.为什么 JavaScript classes(类)被认为是坏的或反模式？

这是一个神话吗？它是否遭受了误传？是否有一些有用的用例？

12.如何在 JSON 中序列化以下对象？

如果我们将以下对象转换为 JSON 字符串，会发生什么？

JavaScript 代码:

const a = {
    key1: Symbol(),
    key2: 10
}
// What will happen?
console.log(JSON.stringify(a));

13.你熟悉 Typed Arrays 吗？ 如果熟悉，请解释他们与 JavaScript 中的传统数组相比的异同？

14. 默认参数是如何工作？

如果我们在调用 makeAPIRequest 函数时必须使用 timeout 的默认值，那么正确的语法是什么？

JavaScript 代码:

function makeAPIRequest(url, timeout = 2000, headers) {   
    // Some code to fetch data
}

15.解释 TCO – 尾调用优化（Tail Call Optimization）。 有没有支持尾调用优化的 JavaScript 引擎？

提示：截至 2018 年，没有。

---

JavaScript 前端应用设计问题

1.解释单向数据流和双向数据绑定。

Angular 1.x 基于双向数据绑定，而 React，Vue，Elm 等基于单向数据流架构。

2.单向数据流架构在哪些方面适合 MVC？

MVC 拥有大约 50 年的悠久历史，并已演变为 MVP，MVVM 和 MV *。两者之间的相互关系是什么？如果 MVC 是架构模式，那么单向数据流是什么？这些竞争模式是否能解决同样的问题？

3.客户端 MVC 与服务器端或经典 MVC 有何不同？

提示：经典 MVC 是适用于桌面应用程序的 Smalltalk MVC。在 Web 应用中，至少有两个不同的数据 MVC 周期。

4.使函数式编程与面向对象或命令式编程不同的关键因素是什么？

提示：Currying（柯里化），point-free 函数，partial 函数应用，高阶函数，纯函数，独立副作用，record 类型（联合，代数数据类型）等。

5.在 JavaScript 和前端的上下文中，函数式编程与响应式编程有什么关系？

提示：没有正确答案。但粗略地说，函数式编程是关于小型编码，编写纯函数和响应式编程是大型编码，即模块之间的数据流，连接以 FP 风格编写的组件。 FRP – 功能响应式编程（ Functional Reactive Programming）是另一个不同但相关的概念。

6.不可变数据结构（immutable data structures）解决了哪些问题？

不可变结构是否有任何性能影响？ JS 生态系统中哪些库提供了不可变的数据结构？这些库的优点和缺点是什么？

提示：线程安全（我们真的需要在浏览器 JavaScript 中担心吗？），无副作用的函数，更好的状态管理等。

7.大型应用程序是否应使用静态类型？

1. 如何比较 TypeScript/Flow 与 Elm/ReasonML/PureScript 等 JS 转换语言？这些方法的优缺点是什么？

2. 选择特定类型系统的主要标准应该是什么？

3. 什么是类型推断（type inference）？

4. 静态类型语言和强类型语言有什么区别？在这方面 JavaScript 的本质是什么？

5. 有你知道的弱类型但静态类型的语言吗？有你知道的动态类型但强类型的语言吗？举例一二。

提示：Structural 与 Nominal 类型系统，类型稳健性，工具/生态系统支持，正确性超过方便。

8.JavaScript 中有哪些杰出的模块系统（module systems ）？如何评价 ES 模块系统。

列出在实现不同模块系统之间互操作所涉及的一些复杂性问题（主要对 ES 模块和 CommonJS 互操作感兴趣）

9.HTTP/2 は JavaScript アプリケーションのパッケージ化にどのような影響を与えますか?

HTTP/2 とその以前のバージョンの基本的な違いをリストします。

10.Fetch API は従来の Ajax と比べてどのような点が改善されていますか?

• Fetch API を使用することの欠点や難しさは何ですか?

• Ajax ではフェッチできなくて何ができるのでしょうか?

#11. プルベースとプッシュベースのリアクティブ システムについてコメントする方法。

概念、意味、用途などについて話し合います。

• この議論に、怠惰と早期評価を追加します。

• 次に、単数と複数の値のディメンションをディスカッションに追加します。

• 最後に、値解析の同期および非同期の性質について説明します。

• JavaScript で使用できるすべての組み合わせの例を示します。

ヒント: Observable は遅延型で、プッシュされた複素数値に基づいて構築され、非同期/同期スケジューラを備えています。

12. Promise に関する問題について話し合います。

ヒント: 積極的な評価、厄介なキャンセルメカニズム、map() と flatMap () を偽装するために then() メソッドを使用する待って。

---

フロントエンドの基本と理論的問題

1.目的は何ですか? HTMLでDoctype?

次のそれぞれの状況で何が起こるか具体的に説明しましょう:

• Doctype が存在しません。

• は HTML4 Doctype を使用しますが、HTML ページでは

  などの HTML5 タグを使用します。エラーが発生することはありますか?

• 無効な Doctype が使用されました。

2. DOM と BOM の違いは何ですか?

ヒント: BOM、DOM、ECMAScript、JavaScript はすべて別のものです。

3. JavaScript でのイベント処理はどのように機能しますか?

下の図に示すように、3 つの div 要素があります。各 div には、関連付けられたクリック ハンドラーがあります。ハンドラーは次のタスクを実行します。

• Outer div クリック ハンドラーは、コンソールに hello external

  を出力します。

• Inner div クリック ハンドラーは、hello inner

  をコンソールに出力します。

• Innermost div クリック ハンドラーは、コンソールに hello innermost を出力します。

これらのタスクを割り当てるコードを記述して、最も内側の div がクリックされたときに次のシーケンスが常に出力されるようにしますか?

こんにちは内部 → こんにちは内部最も → こんにちは外部

プロンプト: イベントキャプチャとイベント バブリング

4. シングル ページ アプリケーションを使用してファイルをサーバーにアップロードする方法は何ですか?

ヒント: XMLHttpRequest2 (ストリーミング)、フェッチ (非ストリーミング)、ファイル API

5。CSS リフローと再描画の違いは何ですか?

リフローと再描画を引き起こす CSS プロパティはどれですか?

6. CSS セレクターの重みとは何ですか?またその仕組みは何ですか?

CSS セレクターの重みを計算するアルゴリズムについて話しましょう。

7. CSS のピクセルはハードウェア/物理のピクセルとどう違うのですか?

ヒント: ピクセルはピクセルではありません、ピクセルではありません – ppk。

8. セクショニングアルゴリズムとは何ですか?

ヒント: HTML5 アウトライン アルゴリズムとも呼ばれます。セマンティック構造を備えた Web サイトを構築する場合は特に重要です。

9. CSS Flex / CSS Grid (グリッド) レイアウトを使用したことがある場合、それを使用する理由を説明してください。それはあなたにとってどんな問題を解決しましたか？

• CSS グリッドを使用したパーセント % 単位と fr 単位の違いは何ですか?

• CSS フレックスボックスを使用すると、フレックス項目/子がフレックス コンテナによって設定された幅/高さを考慮しない場合がありますか?なぜこうなった？

• CSS グリッドを使用してメーソンリー レイアウト (ウォーターフォール レイアウト) を作成できますか?もしそうなら、どのようにして？

• CSS グリッドと CSS フレックスボックスの用語について説明してください。

• フローティング要素 (float: left | right;

  ) は CSS グリッドとフレックスボックスでどのようにレンダリングされますか?

ヒント: 同じ高さの列、垂直方向の中央揃え、複雑なグリッドなど。

10. CSS トランジションの代わりに CSS アニメーションを使用する必要があるのはどのような場合ですか?この決断を下す基準は何でしたか？

11. CSS コードをレビューしている場合、コード内でよく発生する問題は何ですか?

例: width: 67px; などのマジック ナンバーを使用するか、rem 単位の代わりに em

を使用します。ユニバーサル コード メディア クエリ、不正使用 ID とクラスなど。

12. JavaScript でタッチ イベントを検出するにはどうすればよいですか?

• 検出デバイスによるタッチ イベントのサポートについて楽観的ではありませんか? 「はい」の場合、その理由は何ですか?

• タッチ イベントとクリック イベントを比較します。 ###

• デバイスがタッチ イベントとマウス イベントの両方をサポートする場合、これらのイベントの正しいイベント順序は何だと思いますか、またはそうすべきだと思いますか?

13. script タグに定義された async 属性と defer 属性はどのような用途に使用されますか?

HTTP/2 モジュールと ES モジュールができましたが、それらは本当に便利でしょうか?

提示されたリストは、インタビュー中に話し合う可能性のある無限のポイントのほんの一部です。 Web コンポーネント、CORS、セキュリティ、Cookie、CSS 変換、Web アセンブリ、サービス ワーカー、PWA、CSS アーキテクチャなど、私たちが考慮していないものが他にもたくさんあります。フレームワークやライブラリに関する具体的な質問もありません。

#関連する推奨事項: #1、

2022 Xiaomi シニア PHP エンジニアの面接の質問 (模擬試験用紙)

2、フロントエンドインタビューアリーナ

#上記はこの記事の全体的な内容です。すべての人の研究に役立つことを願っています。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！