From 56b015aeb9bf112dca4078d2a8a64b2d3373d10d Mon Sep 17 00:00:00 2001 From: Yangshun Date: Mon, 23 Jun 2025 16:20:27 +0800 Subject: [PATCH] [feig] misc: tweak formatting --- .../contents/algorithms/en-US.langnostic.json | 38 ++++--- .../contents/algorithms/en-US.mdx | 106 +++++++++--------- .../contents/algorithms/zh-CN.mdx | 106 +++++++++--------- .../contents/coding/en-US.langnostic.json | 16 +-- .../contents/coding/en-US.mdx | 28 ++--- .../contents/coding/zh-CN.mdx | 30 ++--- .../contents/javascript/en-US.langnostic.json | 32 +++--- .../contents/javascript/en-US.mdx | 54 ++++----- .../contents/javascript/zh-CN.mdx | 82 +++++++------- .../contents/overview/en-US.langnostic.json | 8 +- .../contents/overview/en-US.mdx | 15 +-- .../contents/overview/zh-CN.mdx | 27 ++--- .../en-US.langnostic.json | 4 +- .../zh-CN.mdx | 2 +- .../user-interface/en-US.langnostic.json | 4 +- .../contents/user-interface/en-US.mdx | 2 +- .../contents/user-interface/zh-CN.mdx | 2 +- .../en-US.langnostic.json | 4 +- .../zh-CN.mdx | 4 +- 19 files changed, 286 insertions(+), 278 deletions(-) diff --git a/packages/front-end-interview-guidebook/contents/algorithms/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/algorithms/en-US.langnostic.json index 09d71245d..33a660b26 100644 --- a/packages/front-end-interview-guidebook/contents/algorithms/en-US.langnostic.json +++ b/packages/front-end-interview-guidebook/contents/algorithms/en-US.langnostic.json @@ -15,7 +15,7 @@ "b6465b86", "13cff95f", "493e8bd0", - "3410e584", + "cafc8a5", "c97eaa3d", "d48a7b71", "421ceb04", @@ -26,21 +26,24 @@ "4ca7a565", "b6dbe2f3", "bf28427a", - "1ec4f54b", + "18266525", + "eb62450d", "2b74a214", "e1befcaf", - "6aa83ba1", + "91a15981", + "20071352", "e2bac672", "71a2a58", - "9182d691", + "d3f51453", + "a3c5b92", "206a5a5b", - "5fffab6e", + "9a27365c", "686cd762", - "12ba9aaa", + "eeb9a3b2", "51300c2d", - "193688c6", + "101a24ed", "3276416d", - "a004e1c1", + "9b54825a", "db9fea03" ] }, @@ -51,7 +54,7 @@ "b6465b86", "13cff95f", "493e8bd0", - "3410e584", + "cafc8a5", "c97eaa3d", "d48a7b71", "421ceb04", @@ -62,21 +65,24 @@ "4ca7a565", "b6dbe2f3", "bf28427a", - "1ec4f54b", + "18266525", + "eb62450d", "2b74a214", "e1befcaf", - "6aa83ba1", + "91a15981", + "20071352", "e2bac672", "71a2a58", - "9182d691", + "d3f51453", + "a3c5b92", "206a5a5b", - "5fffab6e", + "9a27365c", "686cd762", - "12ba9aaa", + "eeb9a3b2", "51300c2d", - "193688c6", + "101a24ed", "3276416d", - "a004e1c1", + "9b54825a", "db9fea03" ] } diff --git a/packages/front-end-interview-guidebook/contents/algorithms/en-US.mdx b/packages/front-end-interview-guidebook/contents/algorithms/en-US.mdx index 19bd674bf..8766357d6 100644 --- a/packages/front-end-interview-guidebook/contents/algorithms/en-US.mdx +++ b/packages/front-end-interview-guidebook/contents/algorithms/en-US.mdx @@ -18,9 +18,9 @@ There are a ton of resources out there that cover algorithmic coding interviews ## Examples -- Reverse a linked list. -- Determine if a string contains balanced brackets. -- Determine how many substrings in a string are palindromes. +- Reverse a linked list +- Determine if a string contains balanced brackets +- Determine how many substrings in a string are palindromes ## How to prepare @@ -48,78 +48,78 @@ Be aware of the common JavaScript operations and their time complexities. ### `Array` -| Operation | Time complexity | -| --------------------------- | --------------- | -| `Array.prototype.concat()` | O(m + n) | -| `Array.prototype.every()` | O(n) | -| `Array.prototype.fill()` | O(n) | -| `Array.prototype.filter()` | O(n) | -| `Array.prototype.find()` | O(n) | -| `Array.prototype.pop()` | O(1) | -| `Array.prototype.push()` | O(1) | -| `Array.prototype.reduce()` | O(n) | -| `Array.prototype.reverse()` | O(n) | -| `Array.prototype.shift()` | O(n) | -| `Array.prototype.slice()` | O(n) | -| `Array.prototype.some()` | O(n) | -| `Array.prototype.sort()` | O(nlgn) | -| `Array.prototype.splice()` | O(n) | -| `Array.prototype.unshift()` | O(m + n) | +Array operations and their time complexity: + +- `Array.prototype.concat()`: O(m + n) +- `Array.prototype.every()`: O(n) +- `Array.prototype.fill()`: O(n) +- `Array.prototype.filter()`: O(n) +- `Array.prototype.find()`: O(n) +- `Array.prototype.pop()`: O(1) +- `Array.prototype.push()`: O(1) +- `Array.prototype.reduce()`: O(n) +- `Array.prototype.reverse()`: O(n) +- `Array.prototype.shift()`: O(n) +- `Array.prototype.slice()`: O(n) +- `Array.prototype.some()`: O(n) +- `Array.prototype.sort()`: O(nlgn) +- `Array.prototype.splice()`: O(n) +- `Array.prototype.unshift()`: O(m + n) * `n` is the number of elements in the array and `m` is the number of elements to be added. ### `Map` -| Operation | Time complexity | -| --- | --- | -| `Map.prototype.clear()` | O(n) | -| `Map.prototype.delete()` | O(1) | -| `Map.prototype.entries()` | O(1) because it returns an iterator. Getting all the entries will take O(n) time. | -| `Map.prototype.forEach()` | O(n) | -| `Map.prototype.get()` | O(1) | -| `Map.prototype.has()` | O(1) | -| `Map.prototype.keys()` | O(1) because it returns an iterator. Getting all the keys will take O(n) time. | -| `Map.prototype.set()` | O(1) | -| `Map.prototype.values()` | O(1) because it returns an iterator. Getting all the values will take O(n) time. | +Map operations and their time complexity: + +- `Map.prototype.clear()`: O(n) +- `Map.prototype.delete()`: O(1) +- `Map.prototype.entries()`: O(1) because it returns an iterator. Getting all the entries will take O(n) time +- `Map.prototype.forEach()`: O(n) +- `Map.prototype.get()`: O(1) +- `Map.prototype.has()`: O(1) +- `Map.prototype.keys()`: O(1) because it returns an iterator. Getting all the keys will take O(n) time +- `Map.prototype.set()`: O(1) +- `Map.prototype.values()`: O(1) because it returns an iterator. Getting all the values will take O(n) time * `n` is the number of keys in the map. ### `Set` -| Operation | Time complexity | -| --- | --- | -| `Set.prototype.add()` | O(1) | -| `Set.prototype.clear()` | O(n) | -| `Set.prototype.delete()` | O(1) | -| `Set.prototype.entries()` | O(1) because it returns an iterator. Getting all the entries will take O(n) time. | -| `Set.prototype.forEach()` | O(n) | -| `Set.prototype.has()` | O(1) | -| `Set.prototype.keys()` | O(1) because it returns an iterator. Getting all the keys will take O(n) time. | -| `Set.prototype.values()` | O(1) because it returns an iterator. Getting all the values will take O(n) time. | +Set operations and their time complexity: + +- `Set.prototype.add()`: O(1) +- `Set.prototype.clear()`: O(n) +- `Set.prototype.delete()`: O(1) +- `Set.prototype.entries()`: O(1) because it returns an iterator. Getting all the entries will take O(n) time +- `Set.prototype.forEach()`: O(n) +- `Set.prototype.has()`: O(1) +- `Set.prototype.keys()`: O(1) because it returns an iterator. Getting all the keys will take O(n) time +- `Set.prototype.values()`: O(1) because it returns an iterator. Getting all the values will take O(n) time * `n` is the number of elements in the set. -## Algorithmic coding interview rubrics +## Evaluation axes During algorithmic coding interviews, interviewers are evaluating candidates on the following skills: -- **Problem solving**: Use a systematic and logical approach to understanding and addressing a problem. Break down the problem into smaller independent problems. Evaluate different approaches and their tradeoffs. -- **Technical competence**: Ability to translate solutions into working code and demonstrating a strong understanding of the language being used. -- **Communication**: Ask questions to clarify details and clearly explain one's approach and considerations. -- **Verification**: Identify various scenarios to test the code against, including edge cases. Be able to diagnose and fix any issues that arise. +- **Problem solving**: Use a systematic and logical approach to understanding and addressing a problem. Break down the problem into smaller independent problems. Evaluate different approaches and their tradeoffs +- **Technical competence**: Ability to translate solutions into working code and demonstrating a strong understanding of the language being used +- **Communication**: Ask questions to clarify details and clearly explain one's approach and considerations +- **Verification**: Identify various scenarios to test the code against, including edge cases. Be able to diagnose and fix any issues that arise ## Useful tips -- **Wishful thinking**. JavaScript's standard library doesn't have some useful data structures and algorithms like queue, heap, binary search, which can make your life easier during JavaScript coding interviews. However, you can ask the interviewer if you can pretend such a data structure/algorithm exists and use it directly in your solution without implementing it. -- **Pure functions**. Aim to write pure functions which have the benefit of reusability and modularity, aka functions which don't rely on state outside of the function and doesn't cause side effects. -- **Choose data structures wisely.** Pay attention to your choice of data structures and be aware of the time complexities of the code. Be familiar with the time/space complexities of the basic JavaScript Array, Object, Set, Map operations should you want to use them in your solution. Some of these time/space complexities differ across languages. Don't write code that runs in O(n2) if it can accomplished in O(n) runtime with the use of hash maps. -- **Recursion edge cases**. - - If you have identified that solving the question requires recursion, ask about the input size and how to handle the case of recursion stack overflow. Usually you won't have to handle it but raising this issue is a good signal. - - Nested deep data structures can have recursive references to itself, which makes certain operations like serialization much trickier. Ask the interviewer if you have to handle such cases. Usually you won't have to handle it but raising this issue is a good signal. +- **Wishful thinking**: JavaScript's standard library doesn't have some useful data structures and algorithms like queue, heap, binary search, which can make your life easier during JavaScript coding interviews. However, you can ask the interviewer if you can pretend such a data structure/algorithm exists and use it directly in your solution without implementing it. +- **Pure functions**: Aim to write pure functions which have the benefit of reusability and modularity, aka functions which don't rely on state outside of the function and doesn't cause side effects. +- **Choose data structures wisely**: Pay attention to your choice of data structures and be aware of the time complexities of the code. Be familiar with the time/space complexities of the basic JavaScript Array, Object, Set, Map operations should you want to use them in your solution. Some of these time/space complexities differ across languages. Don't write code that runs in O(n2) if it can accomplished in O(n) runtime with the use of hash maps. +- **Recursion edge cases**: + - **Clarifying input size**: If you have identified that solving the question requires recursion, ask about the input size and how to handle the case of recursion stack overflow. Usually you won't have to handle it but raising this issue demonstrates thoughtfulness. + - **Cyclic structures**: Nested deep data structures can have recursive references to itself, which makes certain operations like serialization and traversal more tricky. Ask the interviewer if you have to handle such cases. Usually you won't have to handle it but raising this issue demonstrates thoughtfulness. ## Practice questions -Blind 75 is a famous and concise list of algorithm questions by Yangshun Tay. You can practice the [Blind 75 question list on GreatFrontEnd](/interviews/blind75). +Blind 75 is a famous and concise list of algorithm questions curated by [Yangshun Tay](https://www.linkedin.com/in/yangshun/). You can practice the [Blind 75 question list on GreatFrontEnd](/interviews/blind75). GreatFrontEnd also provides some [general practice questions for Data Structures and Algorithms](/questions/formats/algo-coding) where you can practice implementing common data structures ([Stack](/questions/algo/stack), [Queue](/questions/algo/queue)) and algorithms ([Binary Search](/questions/algo/binary-search), [Merge Sort](/questions/algo/merge-sort)), etc in JavaScript. diff --git a/packages/front-end-interview-guidebook/contents/algorithms/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/algorithms/zh-CN.mdx index a8f8f625e..d3deb9fc3 100644 --- a/packages/front-end-interview-guidebook/contents/algorithms/zh-CN.mdx +++ b/packages/front-end-interview-guidebook/contents/algorithms/zh-CN.mdx @@ -18,9 +18,9 @@ social_title: 破解数据结构与算法 | 前端面试手册 ## 示例 -* 反转链表。 -* 确定字符串是否包含平衡括号。 -* 确定字符串中有多少个子字符串是回文。 +* 反转链表 +* 确定一个字符串是否包含平衡括号 +* 确定一个字符串中有多少个子字符串是回文 ## 如何准备 @@ -48,77 +48,77 @@ social_title: 破解数据结构与算法 | 前端面试手册 ### `Array` -| Operation | Time complexity | -| --------------------------- | --------------- | -| `Array.prototype.concat()` | O(m + n) | -| `Array.prototype.every()` | O(n) | -| `Array.prototype.fill()` | O(n) | -| `Array.prototype.filter()` | O(n) | -| `Array.prototype.find()` | O(n) | -| `Array.prototype.pop()` | O(1) | -| `Array.prototype.push()` | O(1) | -| `Array.prototype.reduce()` | O(n) | -| `Array.prototype.reverse()` | O(n) | -| `Array.prototype.shift()` | O(n) | -| `Array.prototype.slice()` | O(n) | -| `Array.prototype.some()` | O(n) | -| `Array.prototype.sort()` | O(nlgn) | -| `Array.prototype.splice()` | O(n) | -| `Array.prototype.unshift()` | O(m + n) | +数组操作及其时间复杂度： + +* `Array.prototype.concat()`: O(m + n) +* `Array.prototype.every()`: O(n) +* `Array.prototype.fill()`: O(n) +* `Array.prototype.filter()`: O(n) +* `Array.prototype.find()`: O(n) +* `Array.prototype.pop()`: O(1) +* `Array.prototype.push()`: O(1) +* `Array.prototype.reduce()`: O(n) +* `Array.prototype.reverse()`: O(n) +* `Array.prototype.shift()`: O(n) +* `Array.prototype.slice()`: O(n) +* `Array.prototype.some()`: O(n) +* `Array.prototype.sort()`: O(nlgn) +* `Array.prototype.splice()`: O(n) +* `Array.prototype.unshift()`: O(m + n) \* `n` 是数组中的元素数量，`m` 是要添加的元素数量。 ### `Map` -| Operation | Time complexity | -| --- | --- | -| `Map.prototype.clear()` | O(n) | -| `Map.prototype.delete()` | O(1) | -| `Map.prototype.entries()` | O(1) 因为它返回一个迭代器。获取所有条目将花费 O(n) 时间。 | -| `Map.prototype.forEach()` | O(n) | -| `Map.prototype.get()` | O(1) | -| `Map.prototype.has()` | O(1) | -| `Map.prototype.keys()` | O(1) 因为它返回一个迭代器。获取所有键将花费 O(n) 时间。 | -| `Map.prototype.set()` | O(1) | -| `Map.prototype.values()` | O(1) 因为它返回一个迭代器。获取所有值将花费 O(n) 时间。 | +Map 操作及其时间复杂度： + +* `Map.prototype.clear()`: O(n) +* `Map.prototype.delete()`: O(1) +* `Map.prototype.entries()`: O(1) 因为它返回一个迭代器。获取所有条目将花费 O(n) 时间 +* `Map.prototype.forEach()`: O(n) +* `Map.prototype.get()`: O(1) +* `Map.prototype.has()`: O(1) +* `Map.prototype.keys()`: O(1) 因为它返回一个迭代器。获取所有键将花费 O(n) 时间 +* `Map.prototype.set()`: O(1) +* `Map.prototype.values()`: O(1) 因为它返回一个迭代器。获取所有值将花费 O(n) 时间 \* `n` 是 map 中的键的数量。 ### `Set` -| Operation | Time complexity | -| --- | --- | -| `Set.prototype.add()` | O(1) | -| `Set.prototype.clear()` | O(n) | -| `Set.prototype.delete()` | O(1) | -| `Set.prototype.entries()` | O(1) 因为它返回一个迭代器。获取所有条目将花费 O(n) 时间。 | -| `Set.prototype.forEach()` | O(n) | -| `Set.prototype.has()` | O(1) | -| `Set.prototype.keys()` | O(1) 因为它返回一个迭代器。获取所有键将花费 O(n) 时间。 | -| `Set.prototype.values()` | O(1) 因为它返回一个迭代器。获取所有值将花费 O(n) 时间。 | +Set 操作及其时间复杂度： + +* `Set.prototype.add()`: O(1) +* `Set.prototype.clear()`: O(n) +* `Set.prototype.delete()`: O(1) +* `Set.prototype.entries()`: O(1) 因为它返回一个迭代器。获取所有条目将花费 O(n) 时间 +* `Set.prototype.forEach()`: O(n) +* `Set.prototype.has()`: O(1) +* `Set.prototype.keys()`: O(1) 因为它返回一个迭代器。获取所有键将花费 O(n) 时间 +* `Set.prototype.values()`: O(1) 因为它返回一个迭代器。获取所有值将花费 O(n) 时间 \* `n` 是集合中的元素数量。 -## 算法编码面试标准 +## 评估标准 在算法编码面试中，面试官会根据以下技能评估候选人： -* **解决问题**：使用系统和逻辑的方法来理解和解决问题。将问题分解为更小的独立问题。评估不同的方法及其权衡。 -* **技术能力**：将解决方案转化为可运行的代码，并展示对所用语言的深刻理解。 -* **沟通**：提问以澄清细节，并清楚地解释自己的方法和考虑因素。 -* **验证**：确定各种场景来测试代码，包括边缘情况。能够诊断和修复出现的任何问题。 +* **解决问题**：使用系统和逻辑方法来理解和解决问题。将问题分解为更小的独立问题。评估不同的方法及其权衡 +* **技术能力**：将解决方案转化为可运行的代码，并展示对所用语言的深刻理解 +* **沟通**：提问以澄清细节，并清楚地解释自己的方法和考虑因素 +* **验证**：确定各种场景来测试代码，包括边缘情况。能够诊断和修复出现的任何问题 ## 有用的提示 -* **一厢情愿**。JavaScript 的标准库没有一些有用的数据结构和算法，如队列、堆、二分查找，这可以在 JavaScript 编码面试中让你的生活更轻松。但是，你可以问面试官是否可以假装存在这样的数据结构/算法，并在你的解决方案中直接使用它，而无需实现它。 -* **纯函数**。 旨在编写纯函数，这些函数具有可重用性和模块化的好处，也就是不依赖于函数之外的状态且不会引起副作用的函数。 -* **明智地选择数据结构。** 注意你对数据结构的选择，并注意代码的时间复杂度。 熟悉基本的 JavaScript Array、Object、Set、Map 操作的时间/空间复杂度，以备你希望在你的解决方案中使用它们。 某些时间/空间复杂度在不同语言之间有所不同。 如果可以使用哈希映射在 O(n) 运行时内完成，请不要编写以 O(n2) 运行的代码。 -* **递归边缘情况**。 - * 如果你已经确定解决问题需要递归，请询问输入大小以及如何处理递归堆栈溢出的情况。 通常你不需要处理它，但提出这个问题是一个好信号。 - * 嵌套的深层数据结构可以对自身进行递归引用，这使得某些操作（如序列化）更加棘手。 询问面试官是否必须处理此类情况。 通常你不需要处理它，但提出这个问题是一个好信号。 +* **一厢情愿**：JavaScript 的标准库没有一些有用的数据结构和算法，如队列、堆、二分查找，这可以在 JavaScript 编码面试中让你的生活更轻松。但是，你可以询问面试官是否可以假装存在这样的数据结构/算法，并在你的解决方案中直接使用它，而无需实现它。 +* **纯函数**：旨在编写纯函数，这些函数具有可重用性和模块化的好处，也就是不依赖于函数之外的状态且不会引起副作用的函数。 +* **明智地选择数据结构**：注意你对数据结构的选择，并了解代码的时间复杂度。熟悉基本的 JavaScript Array、Object、Set、Map 操作的时间/空间复杂度，以备你希望在你的解决方案中使用它们。其中一些时间/空间复杂度因语言而异。如果使用哈希映射可以在 O(n) 运行时完成，请不要编写以 O(n2) 运行的代码。 +* **递归边缘情况**： + * **澄清输入大小**：如果你已经确定解决问题需要递归，请询问输入大小以及如何处理递归堆栈溢出的情况。通常你不需要处理它，但提出这个问题表明你很周到。 + * **循环结构**：嵌套的深层数据结构可以对自身进行递归引用，这使得某些操作（如序列化和遍历）更加棘手。询问面试官你是否必须处理此类情况。通常你不需要处理它，但提出这个问题表明你很周到。 ## 练习题 -Blind 75 是 Yangshun Tay 编写的著名且简洁的算法问题列表。你可以在 [GreatFrontEnd 上的 Blind 75 问题列表](/interviews/blind75) 中练习。 +Blind 75 是由 [Yangshun Tay](https://www.linkedin.com/in/yangshun/) 策划的著名且简洁的算法问题列表。你可以在 [GreatFrontEnd](/interviews/blind75) 上练习 [Blind 75 问题列表]。 GreatFrontEnd 还提供了一些 [数据结构和算法的通用练习题](/questions/formats/algo-coding)，你可以在其中练习用 JavaScript 实现常见的数据结构（[Stack](/questions/algo/stack)、[Queue](/questions/algo/queue)）和算法（[二分查找](/questions/algo/binary-search)、[归并排序](/questions/algo/merge-sort)）等。 diff --git a/packages/front-end-interview-guidebook/contents/coding/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/coding/en-US.langnostic.json index d21dbfc01..81eabf874 100644 --- a/packages/front-end-interview-guidebook/contents/coding/en-US.langnostic.json +++ b/packages/front-end-interview-guidebook/contents/coding/en-US.langnostic.json @@ -12,14 +12,14 @@ "hashes": [ "df39301b", "f43009db", - "ce8a3251", + "82cf3a13", "b799ac87", "f3a6fb60", "86fbba68", "f2b13208", "4767e65e", "24094bd8", - "d47ea373", + "4a61c6af", "1c35d4db", "67dc567f", "904f055b", @@ -28,10 +28,10 @@ "86ae5ea", "aba7aeae", "aa4e97ec", - "663dd5eb", + "691686a9", "c25cc2cf", "ef51026e", - "13cd49a7", + "2cb0463c", "3276416d", "a92ddc10", "55a3f186", @@ -42,14 +42,14 @@ "zh-CN": [ "df39301b", "f43009db", - "ce8a3251", + "82cf3a13", "b799ac87", "f3a6fb60", "86fbba68", "f2b13208", "4767e65e", "24094bd8", - "d47ea373", + "4a61c6af", "1c35d4db", "67dc567f", "904f055b", @@ -58,10 +58,10 @@ "86ae5ea", "aba7aeae", "aa4e97ec", - "663dd5eb", + "691686a9", "c25cc2cf", "ef51026e", - "13cd49a7", + "2cb0463c", "3276416d", "a92ddc10", "55a3f186", diff --git a/packages/front-end-interview-guidebook/contents/coding/en-US.mdx b/packages/front-end-interview-guidebook/contents/coding/en-US.mdx index b0ff7e1c8..a761ed065 100644 --- a/packages/front-end-interview-guidebook/contents/coding/en-US.mdx +++ b/packages/front-end-interview-guidebook/contents/coding/en-US.mdx @@ -10,9 +10,9 @@ Coding interviews is the primary way in which Front End Engineers are being eval To recap, here are the three types of coding questions you can be asked: -- **Algorithmic coding**: Solve tricky algorithmic questions that evaluates your understanding of data structures, algorithms and time complexity. -- **JavaScript coding**: Implement functions or data structures in JavaScript that are related to front end domain and commonly used during front end development. -- **User interface coding**: Build user interfaces (components, widgets, apps) using HTML, CSS, and JavaScript, sometimes even using JavaScript frameworks. +- **Algorithmic coding**: Solve tricky algorithmic questions that evaluates your understanding of data structures, algorithms and time complexity +- **JavaScript coding**: Implement functions or data structures in JavaScript that are related to front end domain and commonly used during front end development +- **User interface coding**: Build user interfaces (components, widgets, apps) using HTML, CSS, and JavaScript, sometimes even using JavaScript frameworks ## Coding environment @@ -26,10 +26,10 @@ You will be given a URL of an in-browser code editor. The editor either has real The difference between basic code editor and IDEs is that IDEs allow toggling between multiple files. They can either be in-browser or native apps on your laptop. You will usually be asked to use IDEs when you have to build user interfaces and have to use multiple files or type in more than just a single language. This is the best environment available as it closely resembles how most engineers develop. Subject to interviewer approval, you should be able to: -- Preview the in-progress UI and see updates live. -- Use the browser console for debugging. -- Use IDE features like syntax highlighting, keyboard shortcuts, autocomplete, intellisense, extensions to boost your productivity. -- Add any necessary 3rd party dependencies. +- Preview the in-progress UI and see updates live +- Use the browser console for debugging +- Use IDE features like syntax highlighting, keyboard shortcuts, autocomplete, intellisense, extensions to boost your productivity +- Add any necessary 3rd party dependencies Always choose to use an IDE if you are given a choice. @@ -52,10 +52,10 @@ Here's a summary of the various coding environments and what you can do: ## General coding tips - Be familiar with the useful editor keyboard shortcuts because time is of essence during interviews and every keystroke counts. Know how to: - - Jump to start/end of line. - - Shift lines up/down. - - Duplicate a line. - - Rename a symbol easily. + - Jump to start/end of line + - Shift lines up/down + - Duplicate a line + - Rename a symbol easily - Find out beforehand if you will be coding on your own laptop, a laptop given to you, or the whiteboard. - If you will be coding on your own laptop and can use your own IDE, ensure that the IDE is functioning properly, Node.js and npm are installed correctly, and that you can run local web servers on `localhost` and access them within your browser. - Do not be too reliant on preview and execution of code. This suggests to your interviewer that you aren't sure of what you typed and develop via trial-and-error, which is not a positive signal. @@ -64,9 +64,9 @@ Here's a summary of the various coding environments and what you can do: Read on for tips for each coding interview type: -- [Algorithmic Coding](/front-end-interview-playbook/algorithms) -- [JavaScript Coding](/front-end-interview-playbook/javascript) -- [User Interface Coding](/front-end-interview-playbook/user-interface) +- [Algorithmic coding](/front-end-interview-playbook/algorithms) +- [JavaScript coding](/front-end-interview-playbook/javascript) +- [User interface coding](/front-end-interview-playbook/user-interface) ## Practice questions diff --git a/packages/front-end-interview-guidebook/contents/coding/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/coding/zh-CN.mdx index cb9abb9bf..34290750d 100644 --- a/packages/front-end-interview-guidebook/contents/coding/zh-CN.mdx +++ b/packages/front-end-interview-guidebook/contents/coding/zh-CN.mdx @@ -10,9 +10,9 @@ social_title: 破解编码面试 | 前端面试手册 总而言之，您可以被问到以下三种类型的编码问题： -* **算法编码**：解决棘手的算法问题，评估您对数据结构、算法和时间复杂度的理解。 -* **JavaScript 编码**：用 JavaScript 实现与前端领域相关的函数或数据结构，并在前端开发过程中常用。 -* **用户界面编码**：使用 HTML、CSS 和 JavaScript 构建用户界面（组件、小部件、应用程序），有时甚至使用 JavaScript 框架。 +* **算法编码**: 解决棘手的算法问题，评估您对数据结构、算法和时间复杂度的理解 +* **JavaScript 编码**: 用 JavaScript 实现与前端领域相关并在前端开发中常用的函数或数据结构 +* **用户界面编码**: 使用 HTML、CSS 和 JavaScript 构建用户界面（组件、小部件、应用程序），有时甚至使用 JavaScript 框架 ## 编码环境 @@ -26,10 +26,10 @@ social_title: 破解编码面试 | 前端面试手册 基本代码编辑器和 IDE 之间的区别在于，IDE 允许在多个文件之间切换。 它们可以是在浏览器中，也可以是您笔记本电脑上的原生应用程序。 当您必须构建用户界面并且必须使用多个文件或键入不仅仅是一种语言时，通常会要求您使用 IDE。 这是可用的最佳环境，因为它与大多数工程师的开发方式非常相似。 在面试官的批准下，您应该能够： -* 预览正在进行中的 UI 并实时查看更新。 -* 使用浏览器控制台进行调试。 -* 使用 IDE 功能，如语法高亮显示、键盘快捷键、自动完成、智能感知、扩展来提高您的工作效率。 -* 添加任何必要的第三方依赖项。 +* 预览正在进行的用户界面并实时查看更新 +* 使用浏览器控制台进行调试 +* 使用 IDE 功能，如语法高亮显示、键盘快捷键、自动完成、智能感知、扩展程序来提高您的工作效率 +* 添加任何必要的第三方依赖项 如果可以选择，请始终选择使用 IDE。 @@ -51,14 +51,14 @@ social_title: 破解编码面试 | 前端面试手册 ## 一般编码技巧 -* 熟悉有用的编辑器键盘快捷键，因为在面试期间时间至关重要，并且每次按键都很重要。 知道如何： - * 跳转到行首/行尾。 - * 将行上移/下移。 - * 复制一行。 - * 轻松重命名符号。 -* 事先了解您是否将在自己的笔记本电脑、给您的笔记本电脑或白板上进行编码。 - * 如果您将在自己的笔记本电脑上进行编码并且可以使用自己的 IDE，请确保 IDE 正常运行，Node.js 和 npm 已正确安装，并且您可以在 `localhost` 上运行本地 Web 服务器并在浏览器中访问它们。 -* 不要过分依赖代码的预览和执行。 这向您的面试官表明您不确定自己输入的内容，并且通过反复试验进行开发，这不是一个积极的信号。 +* 熟悉有用的编辑器键盘快捷键，因为在面试中时间至关重要，并且每次击键都很重要。 知道如何： + * 跳转到行首/行尾 + * 将行上移/下移 + * 复制一行 + * 轻松重命名符号 +* 提前了解您是否将在自己的笔记本电脑、给您的笔记本电脑或白板上进行编码。 + * 如果您将在自己的笔记本电脑上进行编码并且可以使用自己的 IDE，请确保 IDE 正常运行，已正确安装 Node.js 和 npm，并且您可以在 `localhost` 上运行本地 Web 服务器并在浏览器中访问它们。 +* 不要太依赖代码的预览和执行。 这向您的面试官表明您不确定自己输入的内容，并通过反复试验进行开发，这不是一个积极的信号。 ## 特定于类型的提示 diff --git a/packages/front-end-interview-guidebook/contents/javascript/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/javascript/en-US.langnostic.json index 51fcb5c17..17edb0824 100644 --- a/packages/front-end-interview-guidebook/contents/javascript/en-US.langnostic.json +++ b/packages/front-end-interview-guidebook/contents/javascript/en-US.langnostic.json @@ -12,30 +12,30 @@ "hashes": [ "35c53c11", "2bf0e959", - "cc47c3e5", + "c5e29d2e", "493e8bd0", "3a6772ae", "88b10912", - "158e6f2f", + "2f99e919", "84cfe32f", - "e37720df", + "7e7ffd8b", "b6d503a8", "2edbb909", "f4eb7140", - "479d88a5", + "a810155f", "2c871597", "ddef7dac", "9579c455", - "12238f3f", + "ad3693f7", "c0c09aea", "a166c3ae", "7e75ddb2", "f0c57ca9", - "dbd74015", + "9a27365c", "dcdaeeb9", - "a1792050", + "f44a274f", "51300c2d", - "83e4297b", + "bad7a16f", "55890346", "4466a204", "87e4a903", @@ -47,30 +47,30 @@ "zh-CN": [ "35c53c11", "2bf0e959", - "cc47c3e5", + "c5e29d2e", "493e8bd0", "3a6772ae", "88b10912", - "158e6f2f", + "2f99e919", "84cfe32f", - "e37720df", + "7e7ffd8b", "b6d503a8", "2edbb909", "f4eb7140", - "479d88a5", + "a810155f", "2c871597", "ddef7dac", "9579c455", - "12238f3f", + "ad3693f7", "c0c09aea", "a166c3ae", "7e75ddb2", "f0c57ca9", - "dbd74015", + "9a27365c", "dcdaeeb9", - "a1792050", + "f44a274f", "51300c2d", - "83e4297b", + "bad7a16f", "55890346", "4466a204", "87e4a903", diff --git a/packages/front-end-interview-guidebook/contents/javascript/en-US.mdx b/packages/front-end-interview-guidebook/contents/javascript/en-US.mdx index cfa20e23b..63dc719a2 100644 --- a/packages/front-end-interview-guidebook/contents/javascript/en-US.mdx +++ b/packages/front-end-interview-guidebook/contents/javascript/en-US.mdx @@ -10,8 +10,8 @@ The difference between coding JavaScript coding questions vs algorithmic coding These JavaScript coding questions tend to be practical in nature and can come in one or more of the following categories: -1. Implement standard built-in classes or methods in the JavaScript language. -1. Implement a utility function/class commonly found in popular libraries. +1. Implement standard built-in classes or methods in the JavaScript language +1. Implement a utility function/class commonly found in popular libraries ## Examples @@ -19,14 +19,14 @@ These JavaScript coding questions tend to be practical in nature and can come in It may seem redundant to implement standard classes/methods when they are already part of the language. However, browsers inconsistencies used to be a rampant problem and some language APIs are not found in older browsers. Hence developers had to resort to polyfilling, the act of providing modern functionality on older browsers that do not natively support it by implementing these APIs in downloaded JavaScript. Being able to implement these native functions also shows good understanding of front end fundamentals. -- `Array` methods: [`Array.prototype.map`](/questions/javascript/array-map), [`Array.prototype.reduce`](/questions/javascript/array-reduce), [`Array.prototype.filter`](/questions/javascript/array-filter). -- `Promise` and other `Promise`-related functions: [`Promise.all`](/questions/javascript/promise-all), [`Promise.any`](/questions/javascript/promise-any). -- DOM methods: [`document.getElementsByTagName`](/questions/javascript/get-elements-by-tag-name), [`document.getElementsByClassName`](/questions/javascript/get-elements-by-class-name). +- **`Array` methods**: [`Array.prototype.map`](/questions/javascript/array-map), [`Array.prototype.reduce`](/questions/javascript/array-reduce), [`Array.prototype.filter`](/questions/javascript/array-filter) +- **`Promise` and other `Promise`-related functions**: [`Promise.all`](/questions/javascript/promise-all), [`Promise.any`](/questions/javascript/promise-any) +- **DOM methods**: [`document.getElementsByTagName`](/questions/javascript/get-elements-by-tag-name), [`document.getElementsByClassName`](/questions/javascript/get-elements-by-class-name) There's more to these functions than meets the eye. Let's take the innocent `Array.prototype.map` for example. Are you aware that: 1. It passes 4 arguments to the callback, including the `index` and `this`? -1. It keeps the "holes" in sparse arrays, aka `[1, 2, , 4].map(val => val * val) === [1, 4, , 16]`. +1. It keeps the "holes" in sparse arrays, aka `[1, 2, , 4].map(val => val * val) === [1, 4, , 16]` 1. The range of elements processed by `map` is set before the first call to _callbackfn_. Elements which are appended to the array after the call to `map` begins will not be visited by _callbackfn_. If existing elements of the array are changed, their value as passed to _callbackfn_ will be the value at the time `map` visits them; elements that are deleted after the call to `map` begins and before being visited are not visited. Source: [`Array.prototype.map` ECMAScript specification](https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.map) Your implementation doesn't have to handle all of these cases, especially the array mutation one. However, it's a positive signal if you mentioned these cases. The closer your implementation is to the specification, the more senior/experienced you will appear to be. @@ -35,11 +35,11 @@ Your implementation doesn't have to handle all of these cases, especially the ar These functions/classes are commonly needed when building software with JavaScript but aren't in the standard language (for now). -- Lodash/Underscore functions: [`debounce`](/questions/javascript/debounce), [`throttle`](/questions/javascript/throttle), [`flatten`](/questions/javascript/flatten), [`curry`](/questions/javascript/curry), [`cloneDeep`](/questions/javascript/deep-clone). -- jQuery methods: [`jQuery.css`](/questions/javascript/jquery-css), [`jQuery.toggleClass`](/questions/javascript/jquery-class-manipulation). -- Popular libraries: +- **Lodash/Underscore functions**: [`debounce`](/questions/javascript/debounce), [`throttle`](/questions/javascript/throttle), [`flatten`](/questions/javascript/flatten), [`curry`](/questions/javascript/curry), [`cloneDeep`](/questions/javascript/deep-clone) +- **jQuery methods**: [`jQuery.css`](/questions/javascript/jquery-css), [`jQuery.toggleClass`](/questions/javascript/jquery-class-manipulation) +- **Popular libraries**: - [`classnames`](/questions/javascript/classnames) - - `test`/`expect` functions from testing frameworks like [Jest](https://jestjs.io/)/[Mocha](https://mochajs.org/) + - `test`/`expect` functions from testing frameworks like [Jest](https://jestjs.io/)/[Mocha](https://mochajs.org/)/[Vitest](https://vitest.dev/) - [`Emitter`](/questions/javascript/event-emitter) (which exists as part of Node.js and many third party libraries) - [Immutable.js](https://immutable-js.com/) - [Backbone.js](https://backbonejs.org/) @@ -51,14 +51,14 @@ If you take a look at the source code of these libraries, you might find some of JavaScript coding interviews share a lot of similarities with algorithmic coding interviews. In general, you should: 1. Find out what platform you are coding on and familiarize yourself with the coding environment: - - The supported editor shortcuts. - - Whether you can execute code. - - Whether you can install 3rd party dependencies. + - The supported editor shortcuts + - Whether you can execute code + - Whether you can install 3rd party dependencies 1. Make your self introduction under a minute. Unless requested, do not take longer than this otherwise you might not have enough time to code. 1. Ask clarifying questions upon receiving the question. Clarify the following: - Can you use newer JavaScript syntax (ES2016 and beyond)? - - Whether the code is meant to run in the browser or on the server (e.g. Node.js). - - Browser support, as this will affect the browser APIs you can use. + - Whether the code is meant to run in the browser or on the server (e.g. Node.js) + - Browser support, as this will affect the browser APIs you can use 1. Propose a solution to your interviewer. Unlike coding interviews, the focus of JavaScript coding interviews is usually not on complex data structures and algorithms. It's possible and likely you can jump straight to the optimal solution with the best choice of data structures and algorithms. 1. Code out your solution and explain your code to your interviewer while you are coding. 1. After coding, read through your code once and try to spot basic errors like typos, using variables before initializing them, using APIs incorrectly, etc. @@ -82,26 +82,26 @@ JavaScript coding interviews share a lot of similarities with algorithmic coding | DOM | DOM traversal, DOM creation, DOM manipulation, Accessing element/node properties, Event delegation | | Runtime APIs | Timer (`setTimeout()`, `setInterval()`) | -## JavaScript coding interview rubrics +## Evaluation axes JavaScript coding interviews are similar to algorithmic coding interviews and the way to go about the interviews should be similar. Naturally, there will be some overlaps with algorithmic coding interviews regarding how candidates are evaluated during JavaScript coding interviews. -- **Problem Solving**: Use a systematic and logical approach to understanding and addressing a problem. Break down the problem into smaller independent problems. Evaluate different approaches and their tradeoffs. -- **Software Engineering Foundation**: Familiarity with data structures, algorithms, runtime complexity analysis, use of design patterns, design solution with clean abstractions. -- **Domain Expertise**: Understanding of the front end domain and the relevant languages: Browser (DOM and DOM APIs), HTML, CSS, JavaScript, Performance. -- **Communication**: Ask questions to clarify details and clearly explaining one's approach and considerations. -- **Verification**: Identify various scenarios to test the code against, including edge cases. Be able to diagnose and fix any issues that arise. +- **Problem solving**: Use a systematic and logical approach to understanding and addressing a problem. Break down the problem into smaller independent problems. Evaluate different approaches and their tradeoffs +- **Software engineering foundation**: Familiarity with data structures, algorithms, runtime complexity analysis, use of design patterns, design solution with clean abstractions +- **Domain expertise**: Understanding of the front end domain and the relevant languages: Browser (DOM and DOM APIs), HTML, CSS, JavaScript, Performance +- **Communication**: Ask questions to clarify details and clearly explaining one's approach and considerations +- **Verification**: Identify various scenarios to test the code against, including edge cases. Be able to diagnose and fix any issues that arise ## Useful tips -- **Wishful thinking**. JavaScript's standard library doesn't have some useful data structures and algorithms like queue, heap, binary search, which can make your life easier during JavaScript coding interviews. However, you can ask the interviewer if you can pretend such a data structure/algorithm exists and use it directly in your solution without implementing it. -- **Pure functions**. Aim to write pure functions which have the benefit of reusability and modularity, aka functions which don't rely on state outside of the function and doesn't cause side effects. +- **Wishful thinking**: JavaScript's standard library doesn't have some useful data structures and algorithms like queue, heap, binary search, which can make your life easier during JavaScript coding interviews. However, you can ask the interviewer if you can pretend such a data structure/algorithm exists and use it directly in your solution without implementing it. +- **Pure functions**: Aim to write pure functions which have the benefit of reusability and modularity, aka functions which don't rely on state outside of the function and doesn't cause side effects. - **Choose data structures wisely.** Pay attention to your choice of data structures and be aware of the time complexities of the code. Be familiar with the time/space complexities of the basic JavaScript Array, Object, Set, Map operations should you want to use them in your solution. Some of these time/space complexities differ across languages. Don't write code that runs in O(n2) if it can accomplished in O(n) runtime with the use of hash maps. -- **`this` matters**. If a function accepts a callback function as a parameter, consider how the `this` variable should behave. For many built-in functions, `this` is provided as one of the arguments the callback function is invoked with. +- **`this` matters**: If a function accepts a callback function as a parameter, consider how the `this` variable should behave. For many built-in functions, `this` is provided as one of the arguments the callback function is invoked with. - **Mutations within callback functions.** Beware of callback functions mutating the data structure it is operating on. You probably do not need to handle this case during interviews but you should explicitly mention such cases if it's relevant. -- **Recursion edge cases**. - - If you have identified that solving the question requires recursion, ask about the input size and how to handle the case of recursion stack overflow. Usually you won't have to handle it but raising this issue is a good signal. - - Nested deep data structures can have recursive references to itself, which makes certain operations like serialization much trickier. Ask the interviewer if you have to handle such cases. Usually you won't have to handle it but raising this issue is a good signal. +- **Recursion edge cases**: + - **Clarifying input size**: If you have identified that solving the question requires recursion, ask about the input size and how to handle the case of recursion stack overflow. Usually you won't have to handle it but raising this issue demonstrates thoughtfulness. + - **Cyclic structures**: Nested deep data structures can have recursive references to itself, which makes certain operations like serialization and traversal more tricky. Ask the interviewer if you have to handle such cases. Usually you won't have to handle it but raising this issue demonstrates thoughtfulness. ## Best practice questions diff --git a/packages/front-end-interview-guidebook/contents/javascript/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/javascript/zh-CN.mdx index bd6582cb1..625042379 100644 --- a/packages/front-end-interview-guidebook/contents/javascript/zh-CN.mdx +++ b/packages/front-end-interview-guidebook/contents/javascript/zh-CN.mdx @@ -10,8 +10,8 @@ social_title: 破解 JavaScript 编码面试 | 前端面试手册 这些 JavaScript 编码问题往往具有实践性，可以分为以下一个或多个类别： -1. 在 JavaScript 语言中实现标准的内置类或方法。 -2. 实现常用库中常见的实用函数/类。 +1. 在 JavaScript 语言中实现标准的内置类或方法 +2. 实现常用库中常见的实用函数/类 ## 示例 @@ -19,15 +19,15 @@ social_title: 破解 JavaScript 编码面试 | 前端面试手册 实现标准类/方法似乎是多余的，因为它们已经是语言的一部分。 然而，浏览器不一致曾经是一个猖獗的问题，并且在旧的浏览器中找不到一些语言 API。 因此，开发人员不得不求助于 polyfilling，即通过在下载的 JavaScript 中实现这些 API 来在不支持它的旧浏览器上提供现代功能。 能够实现这些原生函数也表明对前端基础知识有很好的理解。 -* `Array` 方法：[`Array.prototype.map`](/questions/javascript/array-map), [`Array.prototype.reduce`](/questions/javascript/array-reduce), [`Array.prototype.filter`](/questions/javascript/array-filter)。 -* `Promise` 和其他与 `Promise` 相关的函数：[`Promise.all`](/questions/javascript/promise-all), [`Promise.any`](/questions/javascript/promise-any)。 -* DOM 方法：[`document.getElementsByTagName`](/questions/javascript/get-elements-by-tag-name), [`document.getElementsByClassName`](/questions/javascript/get-elements-by-class-name)。 +* **`Array` 方法**: [`Array.prototype.map`](/questions/javascript/array-map), [`Array.prototype.reduce`](/questions/javascript/array-reduce), [`Array.prototype.filter`](/questions/javascript/array-filter) +* **`Promise` 和其他 `Promise` 相关函数**: [`Promise.all`](/questions/javascript/promise-all), [`Promise.any`](/questions/javascript/promise-any) +* **DOM 方法**: [`document.getElementsByTagName`](/questions/javascript/get-elements-by-tag-name), [`document.getElementsByClassName`](/questions/javascript/get-elements-by-class-name) 这些函数比看起来的要多。 让我们以无辜的 `Array.prototype.map` 为例。 你知道吗： -1. 它向回调函数传递 4 个参数，包括 `index` 和 `this`？ -2. 它保留稀疏数组中的“空洞”，又名 `[1, 2, , 4].map(val => val * val) === [1, 4, , 16]`。 -3. `map` 处理的元素范围在第一次调用 *callbackfn* 之前设置。 在调用 `map` 开始后添加到数组中的元素将不会被 *callbackfn* 访问。 如果更改了数组的现有元素，则传递给 *callbackfn* 的值将是 `map` 访问它们时的值； 在调用 `map` 开始后但在访问之前删除的元素不会被访问。 来源：[`Array.prototype.map` ECMAScript 规范](https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.map) +1. 它向回调函数传递 4 个参数，包括 `index` 和 `this`? +2. 它保留稀疏数组中的“空洞”，即 `[1, 2, , 4].map(val => val * val) === [1, 4, , 16]` +3. `map` 处理的元素范围在首次调用 *callbackfn* 之前设置。在调用 `map` 开始后添加到数组中的元素将不会被 *callbackfn* 访问。如果更改了数组的现有元素，则它们作为 *callbackfn* 传递的值将是 `map` 访问它们时的值；在调用 `map` 开始后但在访问之前删除的元素不会被访问。 来源：[`Array.prototype.map` ECMAScript 规范](https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.map) 您的实现不必处理所有这些情况，尤其是数组变异情况。 但是，如果您提到了这些情况，这是一个积极的信号。 您的实现越接近规范，您看起来就越资深/经验丰富。 @@ -35,11 +35,11 @@ social_title: 破解 JavaScript 编码面试 | 前端面试手册 这些函数/类在用 JavaScript 构建软件时通常是必需的，但（目前）不在标准语言中。 -* Lodash/Underscore 函数：[`debounce`](/questions/javascript/debounce), [`throttle`](/questions/javascript/throttle), [`flatten`](/questions/javascript/flatten), [`curry`](/questions/javascript/curry), [`cloneDeep`](/questions/javascript/deep-clone)。 -* jQuery 方法：[`jQuery.css`](/questions/javascript/jquery-css), [`jQuery.toggleClass`](/questions/javascript/jquery-class-manipulation)。 -* 流行库： +* **Lodash/Underscore 函数**: [`debounce`](/questions/javascript/debounce), [`throttle`](/questions/javascript/throttle), [`flatten`](/questions/javascript/flatten), [`curry`](/questions/javascript/curry), [`cloneDeep`](/questions/javascript/deep-clone) +* **jQuery 方法**: [`jQuery.css`](/questions/javascript/jquery-css), [`jQuery.toggleClass`](/questions/javascript/jquery-class-manipulation) +* **常用库**: * [`classnames`](/questions/javascript/classnames) - * 来自测试框架（如 [Jest](https://jestjs.io/) / [Mocha](https://mochajs.org/)）的 `test`/`expect` 函数 + * 来自测试框架（如 [Jest](https://jestjs.io/)/[Mocha](https://mochajs.org/)/[Vitest](https://vitest.dev/)）的 `test`/`expect` 函数 * [`Emitter`](/questions/javascript/event-emitter)（作为 Node.js 和许多第三方库的一部分存在） * [Immutable.js](https://immutable-js.com/) * [Backbone.js](https://backbonejs.org/) @@ -50,22 +50,22 @@ social_title: 破解 JavaScript 编码面试 | 前端面试手册 JavaScript 编码面试与算法编码面试有很多相似之处。总的来说，你应该： -1. 找出你正在使用的平台，并熟悉编码环境： - * 支持的编辑器快捷键。 - * 你是否可以执行代码。 - * 你是否可以安装第三方依赖项。 -2. 在一分钟内做自我介绍。除非被要求，否则不要超过这个时间，否则你可能没有足够的时间来编码。 -3. 收到问题后，提出澄清问题。澄清以下内容： - * 你可以使用较新的 JavaScript 语法（ES2016 及以后版本）吗？ - * 代码是打算在浏览器中运行还是在服务器上运行（例如 Node.js）。 - * 浏览器支持，因为这将影响你可以使用的浏览器 API。 -4. 向面试官提出解决方案。与编码面试不同，JavaScript 编码面试的重点通常不在于复杂的数据结构和算法。你很有可能可以直接跳到具有最佳数据结构和算法选择的最优解决方案。 -5. 编写你的解决方案，并在编码时向面试官解释你的代码。 -6. 编码后，通读你的代码一次，并尝试发现基本错误，例如拼写错误、在使用变量之前初始化它们、不正确地使用 API 等。 -7. 概述一些基本测试用例和一些边缘情况。使用这些用例测试你的代码，并确定你的代码是否通过了它们。如果失败，请调试问题并修复它们。 +1. 找出您正在使用的平台，并熟悉编码环境： + * 支持的编辑器快捷方式 + * 您是否可以执行代码 + * 您是否可以安装第三方依赖项 +2. 在一分钟内进行自我介绍。 除非有要求，否则不要超过此时间，否则您可能没有足够的时间来编写代码。 +3. 收到问题后，提出澄清问题。 澄清以下内容： + * 您可以使用较新的 JavaScript 语法（ES2016 及更高版本）吗？ + * 代码是打算在浏览器中运行还是在服务器上运行（例如 Node.js） + * 浏览器支持，因为这会影响您可以使用的浏览器 API +4. 向面试官提出解决方案。 与编码面试不同，JavaScript 编码面试的重点通常不在于复杂的数据结构和算法。 您可以并且很可能可以直接跳到具有最佳数据结构和算法选择的最佳解决方案。 +5. 编写您的解决方案，并在您编写代码时向面试官解释您的代码。 +6. 编码后，通读您的代码一次，并尝试发现基本错误，例如拼写错误、在使用变量之前初始化它们、不正确地使用 API 等。 +7. 概述一些基本测试用例和一些边缘情况。 使用这些用例测试您的代码，并确定您的代码是否通过了它们。 如果失败，请调试问题并修复它们。 8. 可选：如果代码涉及算法优化和智能数据结构选择，请解释时间和空间复杂度。 -9. 解释你所做的任何权衡、你明确没有处理的案例，以及如果你有更多时间，你将如何改进代码。 -10. 面试可能不会在这里结束，面试官可能会就这个问题向你提出后续问题或给你另一个问题。为他们做好准备。 +9. 解释您所做的任何权衡、您明确未处理的案例以及如果您有更多时间将如何改进代码。 +10. 面试可能不会在这里结束，面试官可能会就此问题向您提出后续问题或给您另一个问题。 为他们做好准备。 ## 如何准备 JavaScript 编码面试 @@ -82,26 +82,26 @@ JavaScript 编码面试与算法编码面试有很多相似之处。总的来说 | DOM | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托 | | 运行时 API | 计时器 (`setTimeout()`、`setInterval()`) | -## JavaScript 编码面试评分标准 +## 评估轴 JavaScript 编码面试类似于算法编码面试，进行面试的方式也应该类似。当然，在候选人在 JavaScript 编码面试中如何被评估方面，将与算法编码面试有一些重叠。 -* **问题解决**：使用系统和逻辑的方法来理解和解决问题。将问题分解为较小的独立问题。评估不同的方法及其权衡。 -* **软件工程基础**：熟悉数据结构、算法、运行时复杂度分析、设计模式的使用、使用干净的抽象设计解决方案。 -* **领域专业知识**：了解前端领域和相关语言：浏览器（DOM 和 DOM API）、HTML、CSS、JavaScript、性能。 -* **沟通**：提问以澄清细节，并清楚地解释自己的方法和考虑因素。 -* **验证**：确定各种场景以测试代码，包括边缘情况。能够诊断和修复出现的任何问题。 +* **解决问题**：使用系统和逻辑方法来理解和解决问题。 将问题分解为较小的独立问题。 评估不同的方法及其权衡 +* **软件工程基础**：熟悉数据结构、算法、运行时复杂度分析、设计模式的使用、使用干净的抽象设计解决方案 +* **领域专业知识**：了解前端领域和相关语言：浏览器（DOM 和 DOM API）、HTML、CSS、JavaScript、性能 +* **沟通**：提问以澄清细节，并清楚地解释自己的方法和考虑因素 +* **验证**：确定各种场景以测试代码，包括边缘情况。 能够诊断和修复出现的任何问题 ## 有用的提示 -* **一厢情愿**。 JavaScript 的标准库没有一些有用的数据结构和算法，如队列、堆、二分查找，这可以使你在 JavaScript 编码面试中更轻松。但是，你可以询问面试官是否可以假装存在这样的数据结构/算法，并在你的解决方案中直接使用它，而无需实现它。 -* **纯函数**。 旨在编写纯函数，这些函数具有可重用性和模块化的好处，即不依赖于函数外部的状态且不会引起副作用的函数。 -* **明智地选择数据结构。** 注意你对数据结构的选择，并注意代码的时间复杂度。 熟悉基本 JavaScript 数组、对象、集合、映射操作的时间/空间复杂度，以防你希望在你的解决方案中使用它们。 其中一些时间/空间复杂度因语言而异。 如果可以使用哈希映射在 O(n) 运行时完成，则不要编写以 O(n2) 运行的代码。 -* **`this`很重要**。 如果一个函数接受一个回调函数作为参数，请考虑 `this` 变量应该如何表现。 对于许多内置函数，`this` 作为回调函数被调用的参数之一提供。 -* **回调函数中的突变。** 谨防回调函数改变其操作的数据结构。 你可能不需要在面试期间处理这种情况，但如果相关，你应该明确提及此类情况。 -* **递归边缘情况**。 - * 如果你已经确定解决这个问题需要递归，请询问输入大小以及如何处理递归堆栈溢出的情况。 通常你不需要处理它，但提出这个问题是一个好信号。 - * 嵌套的深层数据结构可能具有对自身的递归引用，这使得某些操作（如序列化）更加棘手。 询问面试官你是否必须处理此类情况。 通常你不需要处理它，但提出这个问题是一个好信号。 +* **一厢情愿**：JavaScript 的标准库没有一些有用的数据结构和算法，如队列、堆、二分查找，这可以在 JavaScript 编码面试期间让您的生活更轻松。 但是，您可以询问面试官是否可以假装存在这样的数据结构/算法，并在您的解决方案中直接使用它，而无需实现它。 +* **纯函数**：旨在编写纯函数，这些函数具有可重用性和模块化的好处，又名不依赖于函数外部状态且不会引起副作用的函数。 +* **明智地选择数据结构。** 注意您选择的数据结构，并注意代码的时间复杂度。 熟悉基本 JavaScript 数组、对象、集合、映射操作的时间/空间复杂度，如果您想在您的解决方案中使用它们。 其中一些时间/空间复杂度因语言而异。 如果可以使用哈希映射在 O(n) 运行时完成，请不要编写以 O(n2) 运行的代码。 +* **`this`很重要**：如果一个函数接受一个回调函数作为参数，请考虑 `this` 变量应该如何表现。 对于许多内置函数，`this` 作为回调函数被调用的参数之一提供。 +* **回调函数中的突变。** 谨防回调函数改变其操作的数据结构。 您可能不需要在面试期间处理这种情况，但如果相关，您应该明确提及此类情况。 +* **递归边缘情况**： + * **澄清输入大小**：如果您已确定解决问题需要递归，请询问输入大小以及如何处理递归堆栈溢出的情况。 通常您不必处理它，但提出这个问题表明了深思熟虑。 + * **循环结构**：嵌套的深层数据结构可以对自身进行递归引用，这使得某些操作（如序列化和遍历）更加棘手。 询问面试官您是否必须处理此类情况。 通常您不必处理它，但提出这个问题表明了深思熟虑。 ## 最佳实践问题 diff --git a/packages/front-end-interview-guidebook/contents/overview/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/overview/en-US.langnostic.json index e2614ae78..34bf6d844 100644 --- a/packages/front-end-interview-guidebook/contents/overview/en-US.langnostic.json +++ b/packages/front-end-interview-guidebook/contents/overview/en-US.langnostic.json @@ -50,9 +50,9 @@ "6948f229", "c39d20cb", "14af9fbb", - "2d1f52c8", + "10ef9cad", "3607fb25", - "e8f904c", + "74bdb403", "fe6b5994", "e10248d9", "70cd2c67" @@ -100,9 +100,9 @@ "6948f229", "c39d20cb", "14af9fbb", - "2d1f52c8", + "10ef9cad", "3607fb25", - "e8f904c", + "74bdb403", "fe6b5994", "e10248d9", "70cd2c67" diff --git a/packages/front-end-interview-guidebook/contents/overview/en-US.mdx b/packages/front-end-interview-guidebook/contents/overview/en-US.mdx index e9e4d1d6f..3e3afa47f 100644 --- a/packages/front-end-interview-guidebook/contents/overview/en-US.mdx +++ b/packages/front-end-interview-guidebook/contents/overview/en-US.mdx @@ -122,17 +122,18 @@ Here's a summary of the question types asked by the top US companies. | LinkedIn | Yes | Yes | Yes | Yes | Unknown | Yes | | Lyft | No | No | Yes | Yes | Yes | Yes | | Microsoft | Yes | Yes | Yes | Yes | Yes | Yes | -| Twitter | Yes | Yes | Yes | Yes | Yes | Yes | +| OpenAI | Yes | Maybe | No | Yes | Yes | Yes | +| X | Yes | Yes | Yes | Yes | Yes | Yes | | Uber | Unknown | Unknown | Yes | Yes | Unknown | Yes | **Question type legend** -- **Quiz**: Closed ended quiz/trivia-style question. -- **Algorithms**: Implement a function that solves an algorithmic problem. It is usually not front end domain specific. -- **JavaScript**: Implement a function/class in JavaScript that is related to the front end domain. -- **UI**: Build a user interface using HTML/CSS/JavaScript. Some companies allow you to use a framework of your choice while some only allow Vanilla JS/certain frameworks. -- **System design**: Design a system and discuss the architecture and its components. -- **Behavioral**: Discuss your specific experience working with others and how you handled difficult scenarios. +- **Quiz**: Closed ended quiz/trivia-style question +- **Algorithms**: Implement a function that solves an algorithmic problem. It is usually not front end domain specific +- **JavaScript**: Implement a function/class in JavaScript that is related to the front end domain +- **UI**: Build a user interface using HTML/CSS/JavaScript. Some companies allow you to use a framework of your choice while some only allow Vanilla JS/certain frameworks +- **System design**: Design a system and discuss the architecture and its components +- **Behavioral**: Discuss your specific experience working with others and how you handled difficult scenarios ## Study and practice diff --git a/packages/front-end-interview-guidebook/contents/overview/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/overview/zh-CN.mdx index a4a7f6ee9..9305f2308 100644 --- a/packages/front-end-interview-guidebook/contents/overview/zh-CN.mdx +++ b/packages/front-end-interview-guidebook/contents/overview/zh-CN.mdx @@ -113,26 +113,27 @@ social_title: 前端面试 - 快速入门指南 | GreatFrontEnd | 公司 | 测验 | 算法 | JavaScript | UI | 系统设计 | 行为 | | :-- | :-: | :-: | :-: | :-: | :-: | :-: | | Airbnb | 否 | 是 | 是 | 是 | 否 | 是 | -| 亚马逊 | 是 | 是 | 是 | 是 | 是 | 是 | -| 苹果 | 是 | 是 | 是 | 是 | 未知 | 是 | -| 字节跳动 | 是 | 是 | 是 | 是 | 否 | 是 | +| Amazon | 是 | 是 | 是 | 是 | 是 | 是 | +| Apple | 是 | 是 | 是 | 是 | 未知 | 是 | +| ByteDance | 是 | 是 | 是 | 是 | 否 | 是 | | Dropbox | 否 | 是 | 是 | 是 | 是 | 是 | | Facebook/Meta | 是 | 否 | 是 | 否 | 是 | 是 | -| 谷歌 | 是 | 是 | 是 | 是 | 是 | 是 | -| 领英 | 是 | 是 | 是 | 是 | 未知 | 是 | +| Google | 是 | 是 | 是 | 是 | 是 | 是 | +| LinkedIn | 是 | 是 | 是 | 是 | 未知 | 是 | | Lyft | 否 | 否 | 是 | 是 | 是 | 是 | -| 微软 | 是 | 是 | 是 | 是 | 是 | 是 | -| 推特 | 是 | 是 | 是 | 是 | 是 | 是 | +| Microsoft | 是 | 是 | 是 | 是 | 是 | 是 | +| OpenAI | 是 | 也许 | 否 | 是 | 是 | 是 | +| X | 是 | 是 | 是 | 是 | 是 | 是 | | Uber | 未知 | 未知 | 是 | 是 | 未知 | 是 | **问题类型图例** -* **测验**: 封闭式测验/琐事风格的问题。 -* **算法**: 实现一个解决算法问题的函数。它通常不是前端特定领域。 -* **JavaScript**: 用 JavaScript 实现一个与前端领域相关的函数/类。 -* **UI**: 使用 HTML/CSS/JavaScript 构建用户界面。一些公司允许您使用您选择的框架，而另一些公司只允许 Vanilla JS/某些框架。 -* **系统设计**: 设计一个系统并讨论架构及其组件。 -* **行为**: 讨论您与他人合作的具体经验以及您如何处理困难的情况。 +* **测验**：封闭式测验/琐事风格的问题 +* **算法**：实现一个解决算法问题的函数。它通常不是前端特定领域 +* **JavaScript**：用 JavaScript 实现一个与前端领域相关的函数/类 +* **UI**：使用 HTML/CSS/JavaScript 构建用户界面。一些公司允许您使用您选择的框架，而另一些公司只允许 Vanilla JS/某些框架 +* **系统设计**：设计一个系统并讨论架构及其组件 +* **行为**：讨论您与他人合作的具体经验以及您如何处理困难的情况 ## 学习和实践 diff --git a/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.langnostic.json index 49533f079..d1c33217f 100644 --- a/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.langnostic.json +++ b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.langnostic.json @@ -59,7 +59,7 @@ "5893ceca", "7f924670", "fa8708e", - "9fda273d", + "cebb0b52", "be0161de", "c35725d4", "c726a5d4", @@ -148,7 +148,7 @@ "5893ceca", "7f924670", "fa8708e", - "9fda273d", + "cebb0b52", "be0161de", "c35725d4", "c726a5d4", diff --git a/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/zh-CN.mdx index 624b5d59d..850b50af0 100644 --- a/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/zh-CN.mdx +++ b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/zh-CN.mdx @@ -219,7 +219,7 @@ function Slider({ className, value }) { ### CSS 选择器钩子 -从技术上讲，如果开发人员阅读组件的源代码并通过使用相同的类来定义他们的自定义样式，他们可以实现自定义。但是，这样做很危险，因为它依赖于组件的内部结构，并且不能保证类名将来不会改变。 +从技术上讲，如果开发人员阅读组件的源代码并通过使用相同的类来定义他们的自定义样式，就可以实现自定义。然而，这样做是危险的，因为它依赖于组件的内部结构，而且不能保证类名将来不会改变。 如果 UI 库作者可以将这些类/属性作为其 API 的一部分，并提供以下保证： diff --git a/packages/front-end-interview-guidebook/contents/user-interface/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/user-interface/en-US.langnostic.json index c750d4a90..92cc99534 100644 --- a/packages/front-end-interview-guidebook/contents/user-interface/en-US.langnostic.json +++ b/packages/front-end-interview-guidebook/contents/user-interface/en-US.langnostic.json @@ -27,7 +27,7 @@ "7e75ddb2", "e0d8bb38", "4c266b7c", - "ede597ea", + "9a27365c", "9e022488", "a751801d", "55890346", @@ -59,7 +59,7 @@ "7e75ddb2", "e0d8bb38", "4c266b7c", - "ede597ea", + "9a27365c", "9e022488", "a751801d", "55890346", diff --git a/packages/front-end-interview-guidebook/contents/user-interface/en-US.mdx b/packages/front-end-interview-guidebook/contents/user-interface/en-US.mdx index d78a5b153..fb5e08515 100644 --- a/packages/front-end-interview-guidebook/contents/user-interface/en-US.mdx +++ b/packages/front-end-interview-guidebook/contents/user-interface/en-US.mdx @@ -81,7 +81,7 @@ Be familiar with these web development concepts: | Runtime APIs | Timer — `setTimeout()`, `setInterval()`, Networking — Ajax, `fetch()` | | Accessibility | ARIA roles, states & properties, Keyboard interactions | -## User interface coding interview rubrics +## Evaluation axes User interface coding interviews have similar rubrics as JavaScript coding interviews as both involve coding in the front end domain. However, user interface coding questions will have even more emphasis on domain expertise and the various front end topics. diff --git a/packages/front-end-interview-guidebook/contents/user-interface/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/user-interface/zh-CN.mdx index 3f9724343..e710b9ddd 100644 --- a/packages/front-end-interview-guidebook/contents/user-interface/zh-CN.mdx +++ b/packages/front-end-interview-guidebook/contents/user-interface/zh-CN.mdx @@ -81,7 +81,7 @@ social_title: 破解用户界面问题 | 前端面试手册 | 运行时 API | 计时器 — `setTimeout()`、`setInterval()`、网络 — Ajax、`fetch()` | | 可访问性 | ARIA 角色、状态和属性、键盘交互 | -## 用户界面编码面试标准 +## 评估维度 用户界面编码面试与 JavaScript 编码面试的评分标准类似，因为两者都涉及前端领域的编码。 然而，用户界面编码问题将更加侧重于领域专业知识和各种前端主题。 diff --git a/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/en-US.langnostic.json b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/en-US.langnostic.json index 821d63441..f078b268c 100644 --- a/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/en-US.langnostic.json +++ b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/en-US.langnostic.json @@ -6,12 +6,12 @@ "source": { "locale": "en-US", "hashes": [ - "72ec4d1d" + "b0b74555" ] }, "targets": { "zh-CN": [ - "72ec4d1d" + "b0b74555" ] } } diff --git a/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/zh-CN.mdx b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/zh-CN.mdx index 646607210..aae31f8c9 100644 --- a/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/zh-CN.mdx +++ b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/zh-CN.mdx @@ -7,6 +7,6 @@ title: 将 HTML5 视为一个开放的 Web 平台。HTML5 的构建块是什么 * **连接性**: 以新的和创新的方式与服务器通信。 * **离线和存储**: 允许网页在客户端本地存储数据，并更有效地离线运行。 * **多媒体**: 使视频和音频成为开放 Web 中的一流公民。 -* **2D/3D 图形和效果**: 允许更多样化的演示选项。 -* **性能 和集成**：提供更高的速度优化和更好的计算机硬件使用。 +* **2D/3D 图形和效果**: 允许更多样化的呈现选项。 +* **性能和集成**: 提供更高的速度优化和更好的计算机硬件使用。 * **设备访问**: 允许使用各种输入和输出设备。