From 87aaf941b9e2f299fa167bce38e813a2de1738db Mon Sep 17 00:00:00 2001 From: Yangshun Date: Fri, 4 Apr 2025 17:17:14 +0800 Subject: [PATCH] i18n: translate --- .../collaboration/en-US.langnostic.json | 142 ++++ .../contents/collaboration/zh-CN.mdx | 267 +++--- .../growth-mindset/en-US.langnostic.json | 86 ++ .../contents/growth-mindset/zh-CN.mdx | 173 ++-- .../contents/overview/en-US.langnostic.json | 186 ++++ .../contents/overview/zh-CN.mdx | 299 +++---- .../problem-solving/en-US.langnostic.json | 114 +++ .../contents/problem-solving/zh-CN.mdx | 256 +++--- .../questions-to-ask/en-US.langnostic.json | 160 ++++ .../contents/questions-to-ask/zh-CN.mdx | 179 ++-- .../contents/questions/en-US.langnostic.json | 44 + .../contents/questions/zh-CN.mdx | 87 +- .../self-introduction/en-US.langnostic.json | 102 +++ .../contents/self-introduction/zh-CN.mdx | 166 ++-- .../why-work-here/en-US.langnostic.json | 62 ++ .../contents/why-work-here/zh-CN.mdx | 71 +- .../contents/algorithms/en-US.langnostic.json | 84 ++ .../contents/algorithms/zh-CN.mdx | 135 +-- .../contents/coding/en-US.langnostic.json | 72 ++ .../contents/coding/zh-CN.mdx | 89 +- .../contents/javascript/en-US.langnostic.json | 82 ++ .../contents/javascript/zh-CN.mdx | 157 ++-- .../contents/overview/en-US.langnostic.json | 112 +++ .../contents/overview/zh-CN.mdx | 183 ++-- .../contents/quiz/en-US.langnostic.json | 54 ++ .../contents/quiz/zh-CN.mdx | 63 +- .../contents/resume/en-US.langnostic.json | 94 +++ .../contents/resume/zh-CN.mdx | 111 +-- .../system-design/en-US.langnostic.json | 34 + .../contents/system-design/zh-CN.mdx | 28 +- .../en-US.langnostic.json | 190 +++++ .../zh-CN.mdx | 154 ++-- .../en-US.langnostic.json | 110 +++ .../zh-CN.mdx | 207 ++--- .../user-interface/en-US.langnostic.json | 76 ++ .../contents/user-interface/zh-CN.mdx | 162 ++-- .../en-US.langnostic.json | 24 + .../zh-CN.mdx | 8 +- .../en-US.langnostic.json | 28 + .../zh-CN.mdx | 10 +- .../en-US.langnostic.json | 24 + .../zh-CN.mdx | 14 +- .../en-US.langnostic.json | 37 + .../zh-CN.mdx | 26 +- .../en-US.langnostic.json | 28 + .../zh-CN.mdx | 20 +- .../en-US.langnostic.json | 38 + .../zh-CN.mdx | 20 +- .../en-US.langnostic.json | 28 + .../zh-CN.mdx | 20 +- .../en-US.langnostic.json | 24 + .../zh-CN.mdx | 14 +- .../en-US.langnostic.json | 26 + .../zh-CN.mdx | 12 +- .../en-US.langnostic.json | 64 ++ .../zh-CN.mdx | 49 +- .../en-US.langnostic.json | 40 + .../zh-CN.mdx | 26 +- .../en-US.langnostic.json | 20 + .../zh-CN.mdx | 6 +- .../en-US.langnostic.json | 38 + .../zh-CN.mdx | 44 +- .../en-US.langnostic.json | 22 + .../zh-CN.mdx | 8 +- .../en-US.langnostic.json | 31 + .../zh-CN.mdx | 16 +- .../en-US.langnostic.json | 22 + .../zh-CN.mdx | 8 +- .../en-US.langnostic.json | 18 + .../zh-CN.mdx | 4 +- .../en-US.langnostic.json | 28 + .../zh-CN.mdx | 14 +- .../en-US.langnostic.json | 21 + .../zh-CN.mdx | 16 +- .../en-US.langnostic.json | 26 + .../zh-CN.mdx | 14 +- .../en-US.langnostic.json | 18 + .../zh-CN.mdx | 12 +- .../en-US.langnostic.json | 18 + .../zh-CN.mdx | 18 +- .../en-US.langnostic.json | 20 + .../zh-CN.mdx | 6 +- .../en-US.langnostic.json | 26 + .../zh-CN.mdx | 14 +- .../en-US.langnostic.json | 22 + .../zh-CN.mdx | 8 +- .../en-US.langnostic.json | 24 + .../zh-CN.mdx | 18 +- .../en-US.langnostic.json | 60 ++ .../zh-CN.mdx | 34 +- .../en-US.langnostic.json | 20 + .../zh-CN.mdx | 10 +- .../en-US.langnostic.json | 24 + .../what-does-a-doctype-do/zh-CN.mdx | 10 +- .../en-US.langnostic.json | 35 + .../zh-CN.mdx | 28 +- .../en-US.langnostic.json | 19 + .../zh-CN.mdx | 10 +- .../en-US.langnostic.json | 26 + .../zh-CN.mdx | 18 +- .../en-US.langnostic.json | 38 + .../what-is-progressive-rendering/zh-CN.mdx | 24 +- .../en-US.langnostic.json | 26 + .../zh-CN.mdx | 28 +- .../en-US.langnostic.json | 20 + .../zh-CN.mdx | 14 +- .../en-US.langnostic.json | 36 + .../zh-CN.mdx | 20 +- .../en-US.langnostic.json | 18 + .../zh-CN.mdx | 17 +- .../en-US.langnostic.json | 23 + .../zh-CN.mdx | 10 +- .../en-US.langnostic.json | 21 + .../zh-CN.mdx | 8 +- .../en-US.langnostic.json | 27 + .../zh-CN.mdx | 18 +- .../introduction/en-US.langnostic.json | 133 +++ .../contents/introduction/zh-CN.mdx | 177 ++++ .../en-US.langnostic.json | 161 ++++ .../contents/react-basic-concepts/zh-CN.mdx | 238 ++++++ .../react-data-fetching/en-US.langnostic.json | 137 +++ .../contents/react-data-fetching/zh-CN.mdx | 314 +++++++ .../en-US.langnostic.json | 85 ++ .../contents/react-design-patterns/zh-CN.mdx | 154 ++++ .../en-US.langnostic.json | 201 +++++ .../contents/react-event-handling/zh-CN.mdx | 358 ++++++++ .../react-forms/en-US.langnostic.json | 203 +++++ .../contents/react-forms/zh-CN.mdx | 793 ++++++++++++++++++ .../react-hooks/en-US.langnostic.json | 283 +++++++ .../contents/react-hooks/zh-CN.mdx | 608 ++++++++++++++ .../en-US.langnostic.json | 117 +++ .../react-interview-preparation/en-US.mdx | 2 +- .../react-interview-preparation/zh-CN.mdx | 109 +++ .../en-US.langnostic.json | 113 +++ .../react-landscape-history/zh-CN.mdx | 127 +++ .../en-US.langnostic.json | 121 +++ .../react-signup-form-example/zh-CN.mdx | 254 ++++++ .../react-state-design/en-US.langnostic.json | 177 ++++ .../contents/react-state-design/zh-CN.mdx | 408 +++++++++ .../en-US.langnostic.json | 151 ++++ .../react-thinking-declaratively/zh-CN.mdx | 289 +++++++ .../contents/cheatsheet/en-US.langnostic.json | 32 + .../contents/cheatsheet/zh-CN.mdx | 44 +- .../common-mistakes/en-US.langnostic.json | 56 ++ .../contents/common-mistakes/zh-CN.mdx | 43 +- .../evaluation-axes/en-US.langnostic.json | 70 ++ .../contents/evaluation-axes/zh-CN.mdx | 119 +-- .../contents/framework/en-US.langnostic.json | 204 +++++ .../contents/framework/zh-CN.mdx | 247 +++--- .../introduction/en-US.langnostic.json | 50 ++ .../contents/introduction/zh-CN.mdx | 58 +- .../types-of-questions/en-US.langnostic.json | 64 ++ .../contents/types-of-questions/zh-CN.mdx | 95 ++- 153 files changed, 11174 insertions(+), 1994 deletions(-) create mode 100644 packages/behavioral-interview-guidebook/contents/collaboration/en-US.langnostic.json create mode 100644 packages/behavioral-interview-guidebook/contents/growth-mindset/en-US.langnostic.json create mode 100644 packages/behavioral-interview-guidebook/contents/overview/en-US.langnostic.json create mode 100644 packages/behavioral-interview-guidebook/contents/problem-solving/en-US.langnostic.json create mode 100644 packages/behavioral-interview-guidebook/contents/questions-to-ask/en-US.langnostic.json create mode 100644 packages/behavioral-interview-guidebook/contents/questions/en-US.langnostic.json create mode 100644 packages/behavioral-interview-guidebook/contents/self-introduction/en-US.langnostic.json create mode 100644 packages/behavioral-interview-guidebook/contents/why-work-here/en-US.langnostic.json create mode 100644 packages/front-end-interview-guidebook/contents/algorithms/en-US.langnostic.json create mode 100644 packages/front-end-interview-guidebook/contents/coding/en-US.langnostic.json create mode 100644 packages/front-end-interview-guidebook/contents/javascript/en-US.langnostic.json create mode 100644 packages/front-end-interview-guidebook/contents/overview/en-US.langnostic.json create mode 100644 packages/front-end-interview-guidebook/contents/quiz/en-US.langnostic.json create mode 100644 packages/front-end-interview-guidebook/contents/resume/en-US.langnostic.json create mode 100644 packages/front-end-interview-guidebook/contents/system-design/en-US.langnostic.json create mode 100644 packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.langnostic.json create mode 100644 packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/en-US.langnostic.json create mode 100644 packages/front-end-interview-guidebook/contents/user-interface/en-US.langnostic.json create mode 100644 packages/quiz/questions/are-you-familiar-with-styling-svg/en-US.langnostic.json create mode 100644 packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/en-US.langnostic.json create mode 100644 packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/en-US.langnostic.json create mode 100644 packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/en-US.langnostic.json create mode 100644 packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.langnostic.json create mode 100644 packages/quiz/questions/describe-floats-and-how-they-work/en-US.langnostic.json create mode 100644 packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/en-US.langnostic.json create mode 100644 packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/en-US.langnostic.json create mode 100644 packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/en-US.langnostic.json create mode 100644 packages/quiz/questions/designing-or-developing-for-multilingual-sites/en-US.langnostic.json create mode 100644 packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/en-US.langnostic.json create mode 100644 packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/en-US.langnostic.json create mode 100644 packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.langnostic.json create mode 100644 packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/en-US.langnostic.json create mode 100644 packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/en-US.langnostic.json create mode 100644 packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.langnostic.json create mode 100644 packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/en-US.langnostic.json create mode 100644 packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/en-US.langnostic.json create mode 100644 packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/en-US.langnostic.json create mode 100644 packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/en-US.langnostic.json create mode 100644 packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/en-US.langnostic.json create mode 100644 packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/en-US.langnostic.json create mode 100644 packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/en-US.langnostic.json create mode 100644 packages/quiz/questions/what-are-data-attributes-good-for/en-US.langnostic.json create mode 100644 packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.langnostic.json create mode 100644 packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.langnostic.json create mode 100644 packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.langnostic.json create mode 100644 packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/en-US.langnostic.json create mode 100644 packages/quiz/questions/what-does-a-doctype-do/en-US.langnostic.json create mode 100644 packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/en-US.langnostic.json create mode 100644 packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/en-US.langnostic.json create mode 100644 packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/en-US.langnostic.json create mode 100644 packages/quiz/questions/what-is-progressive-rendering/en-US.langnostic.json create mode 100644 packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.langnostic.json create mode 100644 packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/en-US.langnostic.json create mode 100644 packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.langnostic.json create mode 100644 packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/en-US.langnostic.json create mode 100644 packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/en-US.langnostic.json create mode 100644 packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/en-US.langnostic.json create mode 100644 packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/en-US.langnostic.json create mode 100644 packages/react-interview-playbook/contents/introduction/en-US.langnostic.json create mode 100644 packages/react-interview-playbook/contents/introduction/zh-CN.mdx create mode 100644 packages/react-interview-playbook/contents/react-basic-concepts/en-US.langnostic.json create mode 100644 packages/react-interview-playbook/contents/react-basic-concepts/zh-CN.mdx create mode 100644 packages/react-interview-playbook/contents/react-data-fetching/en-US.langnostic.json create mode 100644 packages/react-interview-playbook/contents/react-data-fetching/zh-CN.mdx create mode 100644 packages/react-interview-playbook/contents/react-design-patterns/en-US.langnostic.json create mode 100644 packages/react-interview-playbook/contents/react-design-patterns/zh-CN.mdx create mode 100644 packages/react-interview-playbook/contents/react-event-handling/en-US.langnostic.json create mode 100644 packages/react-interview-playbook/contents/react-event-handling/zh-CN.mdx create mode 100644 packages/react-interview-playbook/contents/react-forms/en-US.langnostic.json create mode 100644 packages/react-interview-playbook/contents/react-forms/zh-CN.mdx create mode 100644 packages/react-interview-playbook/contents/react-hooks/en-US.langnostic.json create mode 100644 packages/react-interview-playbook/contents/react-hooks/zh-CN.mdx create mode 100644 packages/react-interview-playbook/contents/react-interview-preparation/en-US.langnostic.json create mode 100644 packages/react-interview-playbook/contents/react-interview-preparation/zh-CN.mdx create mode 100644 packages/react-interview-playbook/contents/react-landscape-history/en-US.langnostic.json create mode 100644 packages/react-interview-playbook/contents/react-landscape-history/zh-CN.mdx create mode 100644 packages/react-interview-playbook/contents/react-signup-form-example/en-US.langnostic.json create mode 100644 packages/react-interview-playbook/contents/react-signup-form-example/zh-CN.mdx create mode 100644 packages/react-interview-playbook/contents/react-state-design/en-US.langnostic.json create mode 100644 packages/react-interview-playbook/contents/react-state-design/zh-CN.mdx create mode 100644 packages/react-interview-playbook/contents/react-thinking-declaratively/en-US.langnostic.json create mode 100644 packages/react-interview-playbook/contents/react-thinking-declaratively/zh-CN.mdx create mode 100644 packages/system-design/contents/cheatsheet/en-US.langnostic.json create mode 100644 packages/system-design/contents/common-mistakes/en-US.langnostic.json create mode 100644 packages/system-design/contents/evaluation-axes/en-US.langnostic.json create mode 100644 packages/system-design/contents/framework/en-US.langnostic.json create mode 100644 packages/system-design/contents/introduction/en-US.langnostic.json create mode 100644 packages/system-design/contents/types-of-questions/en-US.langnostic.json diff --git a/packages/behavioral-interview-guidebook/contents/collaboration/en-US.langnostic.json b/packages/behavioral-interview-guidebook/contents/collaboration/en-US.langnostic.json new file mode 100644 index 000000000..05c57e859 --- /dev/null +++ b/packages/behavioral-interview-guidebook/contents/collaboration/en-US.langnostic.json @@ -0,0 +1,142 @@ +{ + "frontmatter": { + "title": "b30d86a3", + "description": "1006d4c4", + "seo_title": "407dfda6", + "seo_description": "996df42a", + "social_title": "bd82dd8e" + }, + "content": { + "source": { + "locale": "en-US", + "hashes": [ + "3a9a8d18", + "593c6899", + "e3e74d45", + "63d3ac26", + "22934b89", + "cf56d450", + "1180e08", + "1f5b64bd", + "650a9faa", + "8f2809c3", + "35fe945d", + "1ad0280c", + "d57689f8", + "24bae375", + "5da12a67", + "19793788", + "1ad0280c", + "ea808f8", + "24bae375", + "fc22cf33", + "bd456ea8", + "f6bafdb3", + "317f3605", + "11324be4", + "b35c194c", + "9944dec7", + "6d49362f", + "c62a00b2", + "76b53359", + "f844bbb5", + "af0875ae", + "ad2643d", + "3f0165d9", + "9f11b2f4", + "65deb670", + "a5c46cf3", + "d2dd9bf5", + "803a242f", + "f1217e62", + "4f2a9533", + "8e2e4103", + "bdaf5e0", + "2f54a44c", + "1fff8c49", + "fdc098ae", + "5a595fe5", + "cb011c33", + "c36bdde0", + "a84a02f1", + "6561df72", + "ab7a7ed3", + "fcfd2fed", + "3ab47db1", + "d3f12e28", + "895ba725", + "c3ca1bc9", + "c6983f94", + "cf831a72", + "99d32457", + "ff45d4b0", + "6c44e86f" + ] + }, + "targets": { + "zh-CN": [ + "3a9a8d18", + "593c6899", + "e3e74d45", + "63d3ac26", + "22934b89", + "cf56d450", + "1180e08", + "1f5b64bd", + "650a9faa", + "8f2809c3", + "35fe945d", + "1ad0280c", + "d57689f8", + "24bae375", + "5da12a67", + "19793788", + "1ad0280c", + "ea808f8", + "24bae375", + "fc22cf33", + "bd456ea8", + "f6bafdb3", + "317f3605", + "11324be4", + "b35c194c", + "9944dec7", + "6d49362f", + "c62a00b2", + "76b53359", + "f844bbb5", + "af0875ae", + "ad2643d", + "3f0165d9", + "9f11b2f4", + "65deb670", + "a5c46cf3", + "d2dd9bf5", + "803a242f", + "f1217e62", + "4f2a9533", + "8e2e4103", + "bdaf5e0", + "2f54a44c", + "1fff8c49", + "fdc098ae", + "5a595fe5", + "cb011c33", + "c36bdde0", + "a84a02f1", + "6561df72", + "ab7a7ed3", + "fcfd2fed", + "3ab47db1", + "d3f12e28", + "895ba725", + "c3ca1bc9", + "c6983f94", + "cf831a72", + "99d32457", + "ff45d4b0", + "6c44e86f" + ] + } + } +} diff --git a/packages/behavioral-interview-guidebook/contents/collaboration/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/collaboration/zh-CN.mdx index e20310ac5..8d47b1339 100644 --- a/packages/behavioral-interview-guidebook/contents/collaboration/zh-CN.mdx +++ b/packages/behavioral-interview-guidebook/contents/collaboration/zh-CN.mdx @@ -1,203 +1,206 @@ --- -title: 回答 "告诉我什么时候...... "的协作技能 -description: 学习如何回答针对前端/网络开发人员/软件工程师的协作行为问题，包括沟通和团队工作。 参考样本答案。 +title: 回答协作行为问题 +description: 了解如何回答用于评估您的协作技能的“告诉我一个时间……”风格的问题。 +seo_title: 协作问题 | 行为面试手册 +seo_description: 了解如何回答协作行为面试问题，适用于前端工程师。参考示例答案。 +social_title: 协作行为问题 | GreatFrontEnd --- -正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，**合作**是需要准备的 8 大类问题中的一类。 +正如我们在 [行为面试准备概述](/behavioral-interview-guidebook) 中提到的，**协作**是需要准备的 8 个主要问题类别之一。 -合作问题可能是前端行为面试中最常见的行为问题，因为它们包含了大量相关的特征，为了便于故事/项目的准备，可以将其分组。 +协作问题可能是前端行为面试中最常见的行为问题，因为它们包含大量相关的特质，这些特质可以分组以便于故事/项目准备。 -在本指南中，您将学习如何处理这些问题： +在本指南中，您将学习如何解决这些问题： -1. 详细的评价标准 -2. 将可能的问题抽象为共同的主题 -3. 建议的答案框架 -4. 一个很好的样本故事示例 -5. 后续问题的可能性质 -6. 问题和回答示例 +1. 详细的评估标准 +2. 将可能的问题抽象成常见主题 +3. 建议的答案框架 +4. 一个好的示例故事 +5. 追问的可能性质 +6. 示例问题和答案 -## 详细的评价标准 +## 详细的评估标准 -在对这一类别的候选人进行评级时，面试者常常考虑以下标准： +在对该类别下的候选人进行评分时，面试官通常会关注以下标准： -- 处理分歧 -- 团队合作 -- 与具有不同性格和技能的人合作 -- 简单地传达复杂的概念 -- 提出有建设性的反馈意见。 -- 积极倾听 +* 处理分歧 +* 团队合作 +* 与不同个性和技能的人合作 +* 简单地传达复杂的想法 +* 给予建设性的反馈 +* 积极倾听 -## 抽象合作问题 +## 抽象协作问题 -正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，为那里的每一个行为问题准备具体的答案是不切实际的。 然而，通过将具体问题批量化为**类似的主题**，并准备涵盖大量问题要求的故事，我们可以将准备的故事数量减少到 3-5 个左右。 +正如我们在 [行为面试准备概述](/behavioral-interview-guidebook) 中提到的，为每个现有的行为问题专门准备答案是不切实际的。但是，通过将特定问题归入**相似的主题**并准备涵盖大量问题要求的故事情节，我们可以将需要准备的故事数量减少到大约 3-5 个故事。 -合作是这样一个主题，它可以将沟通、团队工作、适应性和指导性等子要求组合起来。 对于每个子要求，我们总结了常见的问题，也抽象出了**面试官在这些问题中所关注的特征**： +协作是这样一个主题，它可以将沟通、团队合作、适应性和可教练性等子要求组合在一起。对于每个子要求，我们总结了常见问题，并抽象出了**面试官在这些问题中寻找的特质**： ### 沟通 -#### 问题示例 +#### 示例问题 -- 你能描述一下你不得不向非技术性听众有效传达技术信息的时候，以及你是如何处理的吗？ -- 您能否描述一下你不得不调整您的通信风格以便与具有不同背景或观点的人进行有效地沟通的时候？ -- 你能举出一个例子，说明你曾在时间紧迫或高度紧张的情况下，不得不沟通重要信息？ -- 你如何确保你的信息被受众理解并得到很好的接受？ +* 您能否描述一下您必须有效地向非技术受众传达技术信息以及您如何处理这种情况？ +* 您能否描述一下您必须调整您的沟通方式才能有效地与具有不同背景或观点的人进行沟通的情况？ +* 您能否举例说明您必须在时间压力或高压情况下传达重要信息的情况？ +* 您如何确保您的信息被受众理解和接受？ -#### 面试官看重的特质 +#### 面试官寻找的特质 -- 简单地传达复杂的概念 -- 积极倾听 +* 简单地传达复杂的想法 +* 积极倾听 ### 团队合作 #### 示例问题 -- 您能否描述过去的一个项目，在这个项目中，您必须与困难的利益攸关方或团队合作，以及如何处理它？ -- 你能告诉我，你有什么时候需要向团队成员或同事提供建设性的反馈吗？ -- 你如何处理与那些没有在最后期限或职责范围内完成工作的队友合作？ -- 你能提供一个例子，当你不得不与一个团队一起工作时，成员之间存在分歧？ -- 您如何处理与具有不同技能组合和个性的团队合作？ -- 你能举一个例子，说明你为了成功完成一个项目而不得不适应团队成员的工作风格吗？ -- 您如何确保在小组讨论中听取所有团队成员的意见，并考虑他们的想法？ -- 你能否举一个例子说明你必须在一个团队项目上工作不得不与他人妥协以达成解决方案？ -- 你能描述一下你不得不与来自不同部门或组织的人合作完成一个项目的时候吗？ +* 您能否描述一个您不得不与难以相处的利益相关者或队友合作的过去项目，以及您是如何处理的？ +* 您能否告诉我您不得不向团队成员或同事提供建设性反馈的经历？ +* 您如何与未能按时完成任务或履行职责的队友一起工作？ +* 您能否提供一个您不得不与团队合作的例子，团队成员之间存在分歧？ +* 您如何处理与拥有不同技能和个性的团队成员一起工作？ +* 您能否举例说明您不得不适应团队成员的工作方式才能成功完成项目的情况？ +* 您如何确保所有团队成员都能被听到，他们的想法在小组讨论中得到考虑？ +* 您能否举例说明您不得不参与团队项目并与他人妥协以达成解决方案的情况？ +* 您能否描述一下您不得不与来自不同部门或组织的人员合作以完成项目的情况？ -#### 面试官看重的特质 +#### 面试官寻找的特质 -- 作为一个团队工作 -- 与不同的工作风格、技能和个性工作 -- 处理分歧(他人的和自己的) -- 提出有建设性的反馈意见。 +* 团队合作 +* 与不同的工作方式、技能和个性合作 +* 处理分歧（他人和自己） +* 提供建设性反馈 -## 建议的答案框架 +## 建议的回答框架 -一如既往，[STAR 格式](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 是我们推荐的最简单、最有效的框架，用于构造你的故事。 +与往常一样，我们推荐 [STAR 格式](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 作为构建您故事的最简单、最有效的框架。 -根据上述抽象，我们可以看到，面试官正在为每一项子要求寻找具体特点。 我们为了展示这些理想特征的建议方法已经创建了一个快速的小册子。 +基于上述抽象，我们可以看到，面试官正在寻找每个子要求的特定特征。我们创建了一个快速备忘单，用于建议展示这些期望特征的方法。 -理想的情况是，你应该选择能够尽可能多地涵盖以下特征的故事，这样你就不必记住太多的故事。 +理想情况下，您应该选择能够涵盖尽可能多的以下特征的故事，这样您就不必记住太多的故事。 -### 简单地传达复杂的概念 +### 简单地传达复杂的想法 -1. 首先了解你的受众的知识水平。 设身处地为他们着想，用他们的语言解释。 -2. 了解他们需要知道(和想要知道)什么，优先考虑关键要点。 -3. 仅在适当的地方深入挖掘重要细节。 -4. 将想法分解成各个组成部分。 -5. 使用视觉辅助工具，如示意图或图表。 -6. 举例说明。 +1. 首先了解您的听众的知识水平。设身处地为他们着想，用他们的语言解释。 +2. 了解他们需要知道（和想要知道）什么，并确定关键要点的优先级。 +3. 仅在适当的时候深入研究重要细节。 +4. 将想法分解成组成部分。 +5. 使用视觉辅助工具，例如图表或图表。 +6. 举例说明。 -注意：对于沟通，像简单传达复杂的想法和积极倾听这样的特质，可以通过你的实际面试表现来评估--例如，你是否打断了面试官，你是否正确地倾听和理解了他们的问题，你是否以一种易于消化的方式传达了你的思考过程。 +注意：对于沟通，像简单地传达复杂想法和积极倾听这样的特征可以通过您实际的面试表现来评估——例如，您是否打断面试官，您是否倾听并正确理解他们的问题，您是否以易于理解的方式传达您的思维过程。 ### 积极倾听 -1. 侧重于理解而不是答复。 -2. 在对方说完之前，暂不做判断。 -3. 使用非语言线索来显示你的参与。 -4. 用你自己的话来总结和重复一遍。 -5. 提出澄清的问题。 -6. 永远不要打断。 +1. 专注于理解而不是回复。 +2. 在对方说完之前不要评判。 +3. 使用非语言提示来表明您正在参与。 +4. 用您自己的话总结并重复。 +5. 提出澄清问题。 +6. 永远不要打断。 -### 作为一个团队工作 +### 团队合作 -1. 设定明确的目标并确保每个人都能理解它们。 积极主动地寻求一致和观点。 -2. 指派和交流角色和责任。 合作和授权。 -3. 设置定期的进度检查和地址拦截器。 始终让适当的利益攸关方参与进来，并与他们及时分享信息。 -4. 衡量影响并认可成就。 +1. 设定明确的目标，并确保每个人都理解它们。主动寻求一致性和观点。 +2. 分配和沟通角色和职责。协作和委派。 +3. 建立定期的进度检查并解决障碍。始终包括适当的利益相关者，并及时与他们分享信息。 +4. 衡量影响并认可成就。 -### 与不同的工作风格、技能和个性工作 +### 与不同的工作方式、技能和个性合作 -1. 公开认可每个团队成员可以带来的独特观点和技能。 -2. 鼓励公开和诚实地沟通，并积极听取意见。 -3. 创造一个欢迎和支持的环境，即使是对不同的意见。 把它们当作成长的机会。 -4. 积极主动地将各种观点和意见纳入决策。 -5. 为每个团队成员提供平等机会，包括获得渠道、资源和支助。 +1. 公开承认每个团队成员可以带来的独特观点和技能。 +2. 鼓励公开和诚实的沟通以及积极的倾听。 +3. 即使对于意见分歧，也要创造一个受欢迎和支持的环境。将它们用作成长的机会。 +4. 主动在决策中纳入各种观点和声音。 +5. 为每个团队成员提供平等的机会，包括访问渠道、资源和支持。 ### 处理分歧 -1. 促进有关各方之间公开和富有成效的沟通。 -2. 将冲突作为加强团队合作和改善当前解决方案的一种方式。 -3. 澄清冲突的根源（以及是否确实存在冲突） -4. 让每一方有平等的时间发表自己的看法和担忧而不作出判断(假定是积极的意图)。 如果需要设置基本规则来培养积极的倾听和理解。 将对话从情绪中引向解决方案。 巧妙地解决无益的对话。 -5. 总结和验证各方的立场，反思他们的观点。 -6. 确定不同立场之间冲突的根本原因。 -7. 集思广益，捋顺现有的选项，以最好地满足共同目标。 (找到共同基础的技巧和逻辑)。 使用数据和事实与他人一起驱动解析，权衡利弊，而不是仅仅依靠意见。 -8. 商定最佳解决办法，并确定每一方的责任。 召集有关各方支持决议。 +1. 促进相关方之间的开放和富有成效的沟通。 +2. 将冲突构建为增强团队合作和改进当前解决方案的一种方式。 +3. 澄清冲突的根源（以及是否真的存在冲突） +4. 给每一方同等的时间来表达他们的观点和担忧，而无需评判（假设积极的意图）。如果需要，设置基本规则以培养积极的倾听和理解。将对话从情绪转移到解决方案。巧妙地处理无效的对话。 +5. 总结并验证每一方的立场，并向他们反映。 +6. 找出立场之间的潜在冲突根源。 +7. 集思广益并运行可用的选项，以最好地实现共同目标。（展示在寻找共同点方面的技能和逻辑）。使用数据和事实来推动与他人的解决方案，权衡利弊，而不是仅仅依赖于意见。 +8. 同意最佳解决方案并确定每一方的责任。引入相关方以支持解决方案。 -### 提出有建设性的反馈意见。 +### 提供建设性反馈 -1. 私下给出反馈意见。 -2. 提醒他们你已经欣赏他们的东西。 -3. 描述直接观察到的（而不是推断的）、可以改变的具体行为，例如 "没有研究文件 "与 "没有准备"。 -4. 描述上述行为的影响。 -5. 指出它是一个成长的机会，而不是一个错误。 -6. 提供解决方案。 +1. 在私下提供反馈。 +2. 提醒他们您已经欣赏他们的内容。 +3. 描述直接观察到的（而不是推断的）并且可以改变的具体行为，例如“没有研究文档”与“未准备好”。 +4. 描述上述行为的影响。 +5. 将其指出为成长的机会，而不是错误。 +6. 提供解决方案。 -### 示例故事 +### 案例故事 -虽然看起来有大量的所需特征，但你可以用工程团队中非常常见的情况来覆盖其中的 90%： +尽管似乎有大量所需的特质，但您可以通过工程团队中非常常见的情况来涵盖其中的 90%： -- 你必须在一个跨职能的团队中工作（例如与商业利益相关者或产品经理或设计师），在一个高压的情况下，优先事项和要求迅速变化。 -- 商业/设计和工程之间存在利益冲突，例如商业/设计推动（要求）更严格的最后期限，而从工程的角度来看，急于追求这些最后期限将导致大量的技术债务。 -- 你必须就这个问题向商业/设计提供建设性的反馈。 -- 在这样做时，你需要将技术概念传达给非技术受众。 -- 此外，你还征求了他们的反馈意见，以了解工程如何能够更好地合作，避免再次出现这个问题。 这样做， 你定期与他们一起讨论需求或要求的清单，以查看是否可以放弃任何需求以加快工程交付。 此外，你通过提供定期更新，满足了他们对时间轴问责制的需求。 +* 您必须在一个跨职能团队（例如，与业务利益相关者或产品经理或设计师）中处理高压情况，在这种情况下，优先级和需求变化很快。 +* 业务/设计和工程之间存在利益冲突，例如业务/设计推动（要求）更紧的截止日期，而从工程角度来看，为了这些截止日期而仓促行事将导致大量的技术债务。 +* 您必须向业务/设计提供关于该问题的建设性反馈。 +* 在这样做时，您需要向非技术受众传达技术概念。 +* 此外，您向他们征求反馈意见，以了解工程部门如何更好地协作以避免再次出现此问题。 在这样做时，您定期浏览需求或要求的列表，看看是否可以删除任何需求以加快工程交付速度。 此外，您还满足了他们对时间线问责制的需求，提供了定期更新。 -根据您的情况在具体细节中添加。 +根据您的情况添加具体细节。 -#### 情况 +#### 情境 -- 在我目前作为开办阶段的前端工程师的工作中，我不得不领导一个非常紧迫的营销项目的发展。 在功能上与营销和设计相交叉。 -- 在某种程度上，市场部曾预计该功能将在下周内发货，但由于对合作伙伴的 API 团队的依赖，工程部出现了重大障碍，该团队的交付成果由于最近两名高级成员的离职而被推迟。 -- 这种情况变得更加激烈，因为市场部不理解工程部所面临的障碍。 +* 在我目前作为一家初创公司的前端工程师的工作中，我必须领导一个高度紧急的营销项目的开发，与营销和设计部门进行跨职能合作。 +* 在某个时候，营销部门预计该功能将在下周内发布，但由于依赖于合作伙伴 API 团队，工程部门遇到了重大障碍，该团队的交付由于最近两名高级成员的离职而延迟。 +* 这种情况变得激烈，因为营销部门不了解工程部门面临的障碍。 #### 任务 -- 我必须解决这个误解，以确保两个团队之间的工作关系顺利。 +* 我必须解决误解，以确保两个团队之间的工作关系顺利。 #### 行动 -- 为了这样做，我私下和市场部谈过，让他们有时间清楚地解释紧迫性以及市场部对工程部可能存在的担忧或误解。 -- 然后，我解释了合作伙伴团队的作用，特别关注他们对该功能的影响，而不是复杂的技术信息。 -- 在这样做的过程中，我们能够集思广益，想出不同的方法，即使没有外部的依赖性，我们也可以交付这个功能。 -- 同时， 我还与伙伴小组的经理谈到该项目对公司的重要性以及重新安排其工作的优先次序以帮助我们解除障碍的可能性。 -- 除此之外，我还征求了关于工程部如何能够更好地与市场部合作的反馈意见，以避免今后发生这种误解。 +* 为了做到这一点，我私下与营销部门进行了交谈，并给他们时间清楚地解释营销部门可能对工程部门的紧迫性、担忧或误解。 +* 然后，我解释了合作伙伴团队的作用，重点是他们对该功能的影响，而不是复杂的技术信息。 +* 在这样做时，我们能够集思广益，讨论即使没有外部依赖关系，我们也可以发布该功能的各种方法。 +* 与此同时，我还与合作伙伴团队的经理讨论了该项目对公司的重要性以及重新调整其工作优先级的可能性，以帮助我们解除障碍。 +* 除此之外，我还征求了关于工程部门如何更好地与营销部门合作以避免将来出现此类误解的反馈意见。 #### 结果 -- 由于工程部和市场部之间的紧密合作，我们能够及时地交付该功能。 -- 随着市场营销对时间表和问责制的优先考虑，我们开始定期提供更新，并讨论了每一个潜在的阻碍因素的替代方案。 -- 有了这一点，每项功能都在之后成功地顺利交付。 +* 由于工程部门和营销部门之间的紧密合作，我们能够及时发布该功能。 +* 由于营销部门优先考虑时间表和问责制，我们开始提供定期更新，并讨论了每个潜在障碍的替代方案。 +* 这样，此后每个功能都成功顺利地交付了。 -## 后续问题的可能性质 +## 可能的后续问题性质 -正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中所提到的，鼓励面试官更多地依靠后续问题来真正了解候选人的思维过程和动机，这些问题通常属于这些类别： +正如我们在 [行为面试准备概述](/behavioral-interview-guidebook) 中所暗示的那样，鼓励面试官更多地依赖后续问题来真正了解候选人的思维过程和动机，这些通常属于以下类别： -- 你为什么认为你做了(行为)？ -- 你为什么不做(行为)？ -- 事后看，你会如何以不同的方式做事？ +* 你认为你为什么做了（插入动作）？ +* 你为什么没有做（插入动作）？ +* 事后看来，你会如何做不同的事情？ -对于有关合作的问题，面试官很可能会探询一些问题，以帮助他们了解更多的情况： +对于关于协作的问题，面试官很可能会探究问题，以帮助他们更多地了解： -- **了解某些利益攸关方是否以及为何参与或不参与** - - 哪些利益攸关方参与了讨论，以及为什么？ - - 为什么某些利益攸关方如(某某) 被排除在群组之外？ -- **了解群组动态以及它如何影响处理群组的策略** - - 小组中存在哪些个性，它是如何影响动态的？ 这种理解是否影响了你驾驭小组讨论的策略？ -- **理解候选人对冲突的心态** - - 你认为这样的冲突如何影响到工作环境？ 你想要避免他们吗？ -- **了解决议是如何产生的；候选人是否只是服从他人，而不是依赖事实和数据？** - - 在做决定时，是否有任何数据和信息被利用？ - - 是否对每一种解决办法的利弊进行过分析？ +* **了解某些利益相关者是否参与以及原因** + * 哪些利益相关者参与了讨论，为什么？ + * 为什么某些利益相关者（如（插入利益相关者））被排除在小组之外？ +* **了解群体动态及其如何影响处理该群体的策略** + * 小组中存在哪些个性，它如何影响动态？ 这种理解是否影响了您驾驭小组讨论的策略？ +* **了解候选人对冲突的心态** + * 您认为这样的冲突如何影响工作环境？ 您是否更愿意避免它们？ +* **了解解决方案是如何产生的； 候选人是仅仅听从他人，而不是依赖事实和数据？** + * 在做出决定时，是否利用了任何数据和信息？ + * 是否对每个解决方案的优缺点进行了分析？ -## 合作问题和答案示例 +## 协作示例问题和答案 -上面的故事样本已经回答了上面的大部分（12 个）例子问题。 需要稍加修改的问题将在下文阐述。 如果你还没有，请查看我们的[面试处置技巧](/behavioral-interview-guidebook)，以增加你给人留下好印象的机会。 +上面的示例故事已经回答了上面大多数（12 个）示例问题。 需要稍作修改的问题将在下面介绍。 如果您尚未这样做，请查看我们的 [关于面试倾向的提示](/behavioral-interview-guidebook)，以增加您留下良好印象的机会。 -### 你如何确保你的信息被受众理解并得到很好的接受？ +### 您如何确保您的信息被受众理解和接受？ -你可以在回答这个问题时对样本故事稍作修改，重点放在技术信息的解释上： +你可以稍微修改一下示例故事来回答这个问题，重点解释技术信息： -> 为了确保我的信息被充分理解，在解释之后，我会提供一些例子来说明我的观点，同时也会向听众提出一些问题，以确认他们的理解。 在我几个月前做的一个项目中，我不得不向业务团队解释为什么一个紧急功能被外部团队的 API 延迟了，以及如何延迟的。 为了做到这一点，我把重点放在企业需要的关键收获上--也就是该功能是如何被这种延迟所影响的，并利用视觉辅助工具以及使用简单清晰的语言。 我还举了一些例子，同时提出问题以确定他们对我的解释的理解。 这使得业务团队能够很好地理解依赖性，从而集思广益，即使没有外部依赖，也能够交付功能。 +> 为了确保我的信息被很好地理解，在解释之后，我将提供一些例子来说明我的观点，并向听众提出一些问题来确认他们的理解。 在几个月前的一个项目中，我不得不向业务团队解释为什么以及如何由于外部团队的 API 延迟而导致紧急功能被延迟。 为此，我重点关注了业务团队需要了解的关键内容——即该功能如何受到这种延迟的影响，并利用视觉辅助工具以及简单明了的语言。 我还举例说明，同时提出问题以确定他们对我的解释的理解程度。 这使得业务团队能够很好地理解依赖关系，从而即使没有依赖关系，也能集思广益地交付该功能。 -### 你如何处理与那些没有在最后期限或职责范围内完成工作的队友合作？ +### 你如何与未能按时完成任务或履行职责的队友一起工作？ -> 一旦发现他们的行为可能构成一种令人担忧的模式，我会及时让他们知道。 例如，我在一个项目中的一个队友经常错过修复错误的时间，一旦发生了多次，我就安排与他私下会面，与他们讨论这个问题。 我把重点放在把谈话框定在对他来说是一个成长的机会，在他们已经被赞赏的基础上，也就是他作为一个高级开发人员的知识和指导作用。 而不是描述诸如“过迟”之类的一般行为，我提到了被遗漏的具体票据和遗漏票据所产生的影响，以及对团队士气的影响。 然后我提供了一些解决方案，例如在渠道内为即将到期的票据制定一个新的提醒机器人。 他能够理解我的想法，在那之后，我们的团队能够更好地满足我们的最后期限。 +> 一旦明确他们的行为可能构成令人担忧的模式，我就会及时让他们知道。 例如，我有一个项目团队成员经常错过修复错误的期限，一旦发生多次，我就会安排与他进行私人会议，与他们谈论此事。 我侧重于将谈话框定为他在他已经受到赞赏的方面（即他作为高级开发人员的知识和指导）之上的一个成长机会。 我没有描述诸如“迟到”之类的普遍行为，而是提到了错过的具体票证以及错过它们所产生的影响，以及它对团队士气的影响。 然后，我提供了一些解决方案，例如在渠道内制定一个新的提醒机器人，用于即将到期的票证。 他能够理解我的出发点，并且在那之后，我们的团队能够更好地按时完成任务。 diff --git a/packages/behavioral-interview-guidebook/contents/growth-mindset/en-US.langnostic.json b/packages/behavioral-interview-guidebook/contents/growth-mindset/en-US.langnostic.json new file mode 100644 index 000000000..9cccfb7df --- /dev/null +++ b/packages/behavioral-interview-guidebook/contents/growth-mindset/en-US.langnostic.json @@ -0,0 +1,86 @@ +{ + "frontmatter": { + "title": "4be5734f", + "description": "a0cbee39", + "seo_title": "59bc08de", + "seo_description": "37a2958a", + "social_title": "ebca470b" + }, + "content": { + "source": { + "locale": "en-US", + "hashes": [ + "94995da9", + "e3e74d45", + "1da50bd5", + "22934b89", + "cf56d450", + "30d20fe", + "5f3ec4ef", + "3282dad3", + "ef3cbb47", + "74535a44", + "91fbdfb4", + "c2710b5", + "1a8a698b", + "bd456ea8", + "f6bafdb3", + "f7c2150b", + "25da941b", + "7f59658a", + "ff3ffa0d", + "55d93ebf", + "779695ae", + "fc118514", + "3806bdb5", + "7ac75694", + "27617dea", + "31276d96", + "9f1726c5", + "10099f1e", + "b234533b", + "27d3bc20", + "2274d67f", + "7ceacd8c", + "ad0bed10" + ] + }, + "targets": { + "zh-CN": [ + "94995da9", + "e3e74d45", + "1da50bd5", + "22934b89", + "cf56d450", + "30d20fe", + "5f3ec4ef", + "3282dad3", + "ef3cbb47", + "74535a44", + "91fbdfb4", + "c2710b5", + "1a8a698b", + "bd456ea8", + "f6bafdb3", + "f7c2150b", + "25da941b", + "7f59658a", + "ff3ffa0d", + "55d93ebf", + "779695ae", + "fc118514", + "3806bdb5", + "7ac75694", + "27617dea", + "31276d96", + "9f1726c5", + "10099f1e", + "b234533b", + "27d3bc20", + "2274d67f", + "7ceacd8c", + "ad0bed10" + ] + } + } +} diff --git a/packages/behavioral-interview-guidebook/contents/growth-mindset/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/growth-mindset/zh-CN.mdx index 93f7290ca..dbcc4163b 100644 --- a/packages/behavioral-interview-guidebook/contents/growth-mindset/zh-CN.mdx +++ b/packages/behavioral-interview-guidebook/contents/growth-mindset/zh-CN.mdx @@ -1,129 +1,132 @@ --- -title: 回答 "告诉我什么时候...... "的成长心态 -description: 学习如何回答关于成长心态的行为问题，针对前端/网络开发者/软件工程师。 参考样本答案。 +title: 回答成长型思维行为问题 +description: 了解如何回答“告诉我一个时间……”风格的问题，以评估您是否具有强大的成长型思维。 +seo_title: 成长型思维问题 | 行为面试手册 +seo_description: 了解如何回答成长型思维行为面试问题，适用于前端工程师。参考示例答案。 +social_title: 成长型思维行为问题 | GreatFrontEnd --- -正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，**成长心态**是需要准备的 8 大类问题中的一类。 +正如我们在 [行为面试准备概述](/behavioral-interview-guidebook) 中提到的，**成长型思维**是准备的 8 个主要问题类别之一。 -在本指南中，您将学习如何处理这些问题： +在本指南中，您将学习如何解决它们： -1. 详细的评价标准 -2. 将可能的问题抽象为共同的主题 -3. 建议的答案框架 -4. 问题和回答示例 +1. 详细的评估标准 +2. 将可能的问题抽象成共同主题 +3. 建议的答案框架 +4. 示例问题和答案 -## 详细的评价标准 +## 详细的评估标准 -在对这一类别的候选人进行评级时，面试者常常考虑以下标准： +在对该类别下的候选人进行评分时，面试官通常会关注以下标准： -- 对优势和发展领域有自我意识。 -- 积极征求他人的反馈意见，并创建反馈循环。 -- 很好地利用反馈和挫折，把它们看作是机会。 -- 对失败承担个人责任。 -- 反思、示范最佳做法并将经验教训应用于新的情况。 -- 通过设定和努力实现具有挑战性的目标而感到兴奋。 -- 积极学习新技能并应用于工作。 +* 了解自己的优势和发展领域。 +* 积极征求他人的反馈并创建反馈循环。 +* 很好地接受反馈和挫折，将其视为机会。 +* 对失败承担个人责任。 +* 反思、建模最佳实践并将经验教训应用于新情况。 +* 对设定和努力实现具有挑战性的目标充满活力。 +* 积极学习新技能并应用于工作。 -## 抽象成长心态问题 +## 抽象成长型思维问题 ### 常见问题 -- 你认为最大的改进领域是什么？ -- 你能告诉我一个你在收到批评或反馈后改进工作的例子吗? -- 告诉我一个你为自己设定一个困难目标并实现了它的例子。 -- 告诉我一个你在工作之外学习了新技能并将其应用到你的工作中的例子。 -- 告诉我你在观察其他人利用它取得巨大成功后学习了一项新技能的情况。 -- 您如何不断更新最新的前端技术和技巧？ -- 你能提供一个例子说明你不得不适应一个新的技术环境或框架？ -- 想象一下你需要实现一个你没有太多经验的新系统。 你会采取哪些措施来收集资料并确保成功执行？ +* 您认为自己最大的改进领域是什么？ +* 您能否告诉我您在收到批评或反馈后改进工作的经历？ +* 告诉我您为自己设定了一个困难的目标并实现了它的经历。 +* 告诉我您在工作之外学习了一项新技能并将其应用于工作的经历。 +* 告诉我您在观察他人利用它取得巨大成功后学习了一套新技能的经历。 +* 您如何及时了解最新的前端技术和技术？ +* 您能否提供一个您必须适应新的技术环境或框架的例子？ +* 假设您需要实施一个您没有太多经验的新系统。您采取哪些步骤来收集信息并确保成功执行？ ### 确定的主题 -正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，为那里的每一个行为问题准备具体的答案是不切实际的。 然而，通过将具体问题批量化为类似的主题，并准备涵盖大量问题要求的故事，我们可以将准备的故事数量减少到 3-5 个左右。 +正如我们在 [行为面试准备概述](/behavioral-interview-guidebook) 中提到的，为每个现有的行为问题专门准备答案是不切实际的。但是，通过将特定问题归入类似的主题并准备涵盖大量问题要求的故事情节，我们可以将要准备的故事数量减少到大约 3-5 个故事。 这些是似乎反复出现的主题： -- 接收和管理反馈信息。 -- 对挑战和扩展目标的心态。 -- 持续学习 +* 接收和管理反馈。 +* 对待挑战和具有挑战性的目标的思维方式。 +* 持续学习。 ## 建议的答案框架 -一如既往，[STAR 法则](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 是我们推荐的最简单、最有效的框架，用于构造你的故事。 +与往常一样，[STAR 格式](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique)是我们推荐用于构建故事的最简单、最有效的框架。 -以下是我们为每个已确定的主题推荐的方法，你可以用这些方法构建你的故事： +以下是我们为每个已确定的主题推荐的方法，您可以使用这些方法来构建您的故事： -### 接受和管理反馈/挫折 +### 接收和管理反馈/挫折 -1. 在可能的情况下，积极征求他人的反馈意见，例如在每个大型项目之后。 -2. 对错误承担个人责任，并制定一个行动计划来解决这些问题。 -3. 对反馈/挫折抱有健康的心态。 - 1. 把它们视作提升自己的机会 - 2. 注重建设性和解决办法而不是情绪驱动的解决办法。 -4. 采取措施反思过去的经验，以便对最佳实践进行建模，并在下一个相关情况下将其付诸实践。 +1. 尽可能积极地征求他人的反馈，例如在每个大型项目之后。 +2. 对错误承担个人责任，并制定行动计划来解决这些错误。 +3. 对反馈/挫折保持健康的思维模式 + 1. 将它们视为提高自己的机会 + 2. 专注于建设性和以解决方案为导向，而不是情绪驱动。 +4. 采取措施反思过去的经验，以便为最佳实践建模，并在下一个相关情况下将它们付诸行动。 -### 对挑战和扩展目标的心态。 +### 对待挑战/拓展目标的思维模式 -1. 从设定和努力实现扩展目标中获得能量，将其视为成长的机会。 -2. 在贯彻执行详细计划方面表现出一致性和纪律性。 +1. 从设定和努力实现拓展目标中获得能量，将它们视为成长的机会。 +2. 在执行详细计划时表现出一致性和纪律性。 ### 持续学习 -一个好的答案是结合一致的时间表和对学习的努力，以及如何积极主动地将学习应用于工作。 例如：“我了解了 X，因为我在做 Y。 这影响了我在工作中处理 Z 问题的方式，因为这使我意识到 W 和 V”。 +一个好的答案结合了持续的时间表和投入到学习中的努力，以及如何主动将学习应用于工作。例如：“我学习了 X，因为我做了 Y。这影响了我处理工作中的 Z 的方式，因为它让我意识到 W 和 V”。 -以下几点是你可以围绕技术学习构建答案的关键想法；但是，你仍然应该加入你实际参与过的活动、通讯或社区的具体例子，以展示你紧跟潮流的意愿。 +以下几点是您可以围绕技术学习构建答案的关键想法；但是，您仍然应该添加您实际参与的活动、新闻通讯或社区的具体示例，以展示您紧跟潮流的意愿。 -1. 关注涵盖前端技术和技技巧最新发展的相关博客、新闻通讯和播客。 给出一些例子（你确实关注了的）以及他们提供的内容或技术。 - 1. 推特影响者 - 1. [Dan Abramov](https://twitter.com/dan_abramov) — Redux 的共同创造者，React 核心团队。 - 2. [Evan You](https://twitter.com/youyuxi) — Vue.js 和 Vite 的创建者。 - 3. [Rich Harris](https://twitter.com/Rich_Harris) — Svelte 和 Rollup 的创作者。 - 4. [Kent C. Dodds](https://twitter.com/kentcdodds) — Popular React 生态系统课程创建者。 - 5. [Josh W. Comeau](https://twitter.com/JoshWComeau) — 流行前端课程创建者。 - 2. 博客和杂志 - 1. [CSS-Tricks](https://css-tricks.com/) - 2. [ui.dev](https://ui.dev/) - 3. [JavaScript Weekly](https://javascriptweekly.com/) - 4. [Best of JavaScript](https://bestofjs.org/) - 3. 播客 - 1. [Syntax](https://syntax.fm/) - 2. [JS Party](https://changelog.com/jsparty) - 3. [The Changelog](https://changelog.com/podcast) -2. 参加技术会议和聚会，学习新的发展，建立网络，并获得最新工具和技术的实践经验。 -3. 使用最新技术和技巧实验和构建项目。 这可能需要自行构建小型项目或帮助开源项目。 -4. 通过参与在线论坛，关注相关的 Twitter 账户和标签，以及加入当地的用户组或聚会，与更广泛的前端开发社区保持联系。 +1. 关注涵盖前端技术和技术的最新发展的相关博客、新闻通讯、播客。举一些例子（您实际关注的）以及它们提供的内容或技术。 + 1. Twitter 影响者 + 1. [Dan Abramov](https://twitter.com/dan_abramov) — Redux 联合创始人，React 核心团队。 + 2. [Evan You](https://twitter.com/youyuxi) — Vue.js 和 Vite 的创建者。 + 3. [Rich Harris](https://twitter.com/Rich_Harris) — Svelte 和 Rollup 的创建者。 + 4. [Kent C. Dodds](https://twitter.com/kentcdodds) — 热门 React 生态系统课程创建者。 + 5. [Josh W. Comeau](https://twitter.com/JoshWComeau) — 热门前端课程创建者。 + 2. 博客和杂志 + 1. [CSS-Tricks](https://css-tricks.com/) + 2. [ui.dev](https://ui.dev/) + 3. [JavaScript Weekly](https://javascriptweekly.com/) + 4. [Best of JavaScript](https://bestofjs.org/) + 3. 播客 + 1. [Syntax](https://syntax.fm/) + 2. [JS Party](https://changelog.com/jsparty) + 3. [The Changelog](https://changelog.com/podcast) +2. 参加技术会议和聚会，学习新的发展，建立人脉，并获得最新工具和技术的实践经验。 +3. 使用最新的技术和技术进行实验和构建项目。这可能涉及自己构建小型项目或为开源项目做出贡献。 +4. 通过参与在线论坛、关注相关的 Twitter 帐户和标签，以及加入当地用户组或聚会，与更广泛的前端开发社区保持互动。 -## 问题和答案 +## 示例问题和答案 -### 您如何不断更新最新的前端技术和技巧？ +### 您如何及时了解最新的前端技术和技术？ -> 过去两年来我一直在一家大型科技公司工作，该公司将外部和内部技术混合用于我们的前端堆栈。 因为我们有一个巨大的代码库和既定的做事方法，所以我们往往不会经常升级库和改变我们的技术选择。 工作一年后，我才意识到，我在自己的岗位上太舒服了，因为我已经完全夯实了代码基础，在过去一年里没有学到任何新东西。 就在那时，我决定我必须积极主动地学习，以保持我的技能的敏锐性和相关性。 +> 在过去的两年里，我一直在一家大型科技公司工作，该公司使用外部和内部技术的混合来构建我们的前端堆栈。由于我们拥有庞大的代码库和既定的做事方式，我们倾向于不经常升级库和更改我们的技术选择。直到工作一年后，我才意识到我一直对自己的角色感到太舒服了，因为我已经完全掌握了代码库，并且在过去的一年里没有学到任何新东西。正是在那时，我决定必须积极主动地学习，以保持我的技能敏锐和相关。 > -> 前端生态系统发展得非常快，有一个笑话说每天都有新的 JavaScript 库出现。 值得庆幸的是，与 2015/2016 年新一波前端工具首次出现时相比，现在的生态系统更加稳定。 为了让自己保持更新而不受 JavaScript 疲劳之苦， 我每个月都会花一个周末浏览前端新闻通讯，如“React 中的这个星期”和“JavaScript 周刊”，并阅读工程博客。 如果我看到有趣的东西或与我的工作有关，我会通过尝试小的例子和在我公司的代码库中建立小的原型来深入研究它们。 例如，我最近发现了 React Query，它是 React 的一个数据获取库，使用声明式范式来获取数据，并试图将其纳入我的工作中。 我最近还发现了 tRPC，一个在客户端和服务器边界之间执行类型安全的库，这是一个给我们带来一些错误的问题。 +> 前端生态系统发展非常快，有一个笑话是每天都会出现一个新的 JavaScript 库。值得庆幸的是，与 2015/2016 年首次出现新一波前端工具时相比，生态系统更加稳定。为了让自己保持更新，而不会遭受 JavaScript 疲劳，我每个月都会花一个周末浏览前端新闻通讯，例如“本周 React”和“JavaScript Weekly”，并阅读工程博客。如果我看到一些有趣或与我的工作相关的内容，我将通过尝试小例子并在我公司的代码库中构建小型原型来更深入地研究它们。例如，我最近发现了 React Query，这是一个用于 React 的数据获取库，它使用声明式范例来获取数据，并且正在尝试将其整合到我的工作中。我还最近发现了 tRPC，这是一个在客户端和服务器边界之间强制类型安全的库，这个问题给我们带来了一些错误。 > -> 为了使学习过程更加有趣和协作，我在公司内创建了一个前端社交俱乐部，创建了一个新的 Slack 频道，并邀请了一些志同道合的同事加入。 任何人都可以在那里分享他们认为有趣的前端新闻并讨论前端技术。 它的反响相当好，目前有 30 多人在这个频道，几乎每天都有活动。 这项举措的一个副作用是，人们也开始就他们在工作中面临的前端问题提出问题。 我们创建了另一个 Slack 渠道，让人们在前端问题上获得帮助。 反馈迄今确实是正面的！ +> 为了让这个学习过程更有趣和协作性，我通过创建一个新的 Slack 频道并邀请一些志同道合的同事加入，在我公司内部创建了一个前端社交俱乐部。任何人都可以分享他们认为有趣的前端新闻并在那里讨论前端技术。它受到了很好的欢迎，目前频道中有 30 多人，几乎每天都有活动。这项计划的一个副作用是，人们也开始询问他们工作中遇到的前端问题，我们创建了另一个 Slack 频道，供人们获得有关前端问题的帮助。到目前为止，反馈一直非常积极！ -这个答案以一种微妙的方式使用了 STAR 技术，并展示了面试官希望在候选人身上看到的许多品质： +这个答案以一种微妙的方式使用了 STAR 技术，并展示了面试官希望在候选人身上看到许多品质： -- **激情**：热衷于学习更多关于前端领域的知识。 -- **成长**：确定了缺乏成长将是一个问题。 -- **倡议**：对缺乏增长的问题采取了行动。 -- **问题解决**：想出解决缺乏成长的方法，并付诸行动。 -- **建立友情**：为了一个共同的目标，召集志同道合的人。 -- **帮助提升他人**：创建 Slack 频道，分享知识和支持他人。 +* **热情**：渴望了解更多关于前端领域的信息。 +* **成长**：确定缺乏成长会成为一个问题。 +* **主动性**：针对缺乏成长的问题采取行动。 +* **解决问题**：思考解决缺乏成长的方法，并执行。 +* **建立友情**：团结志同道合的人为共同的事业而奋斗。 +* **帮助改善他人**：创建 Slack 频道以分享知识和支持他人。 -### 你能提供一个例子说明你不得不适应一个新的技术环境或框架？ +### 您能否提供一个您必须适应新的技术环境或框架的例子？ -> 当我在 2019 年加入现在的公司时，我刚从大学毕业，对公司使用的前端堆栈没有经验，他们的前端堆栈使用 React、Apollo、Styled Components、TypeScript，后端使用 Django + GraphQL。 在大学时，我主要使用 Vue.js 进行前端开发，因为它是 web 开发课上教授的 JavaScript 框架的首选，之前没有使用过 GraphQL。 +> 当我于 2019 年加入我现在的公司时，我刚从大学毕业，对公司正在使用的前端堆栈一无所知，该公司使用 React、Apollo、Styled Components、TypeScript 作为其前端堆栈，并使用 Django + GraphQL 作为后端。在大学时，我主要使用 Vue.js 进行前端开发，因为它是网络开发课程中选择的 JavaScript 框架，并且以前从未使用过 GraphQL。 > -> 一开始，这对我来说绝对是一个巨大的学习曲线，我真的害怕由于对技术栈的不熟悉而表现不佳。 值得庆幸的是，我有一个导师，他在技术堆栈方面给了我很多指导，并提出了一些入职任务，这些任务逐渐变得越来越难。 我第一次花了几天时间阅读技术的文档网站，并试用他们网站上的例子。 我特意去了解这些库所解决的问题，以及它们是如何比现有技术更好的，因为我认为了解这些对充分欣赏库和使用正确的工具进行正确的工作是很重要的。 我还寻找了一些将 Vue.js 与 React 相比较的资源，因为它们非常类似，但有一些差异。 这有助于我更快地了解 React(虽然完全掌握 React 钩子还是花了我一些时间)。 当我在晚上或周末有时间时，我会探索使用这些新技术建立小项目，也会使用 Gatsby 重建我的个人博客（因为它同时使用 React 和 GraphQL）。 +> 对我来说，一开始绝对是一个巨大的学习曲线，由于我对技术堆栈不熟悉，我真的很害怕表现不佳。值得庆幸的是，我有一位导师，他在技术堆栈方面给了我很多指导，并提出了一些逐渐变得更难的入职任务。我首先花几天时间阅读这些技术的文档网站，并在他们的网站上试用示例。我把它作为重点来理解这些库正在解决的问题以及它们如何优于现有技术，因为我认为了解这一点对于充分欣赏该库并为正确的工作使用正确的工具非常重要。我还查阅了一些将 Vue.js 与 React 进行比较的资源，因为它们非常相似，但也有一些差异。这帮助我更快地学习 React（尽管完全掌握 React 钩子仍然花了我一些时间）。当我在晚上或周末有时间时，我会探索使用这些新技术构建小型项目，并使用 Gatsby 重建我的个人博客（因为它同时使用了 React 和 GraphQL）。 > -> 在两个月内，我觉得自己学到了很多东西，对大部分的代码库都很熟悉。 我可以在没有导师指导的情况下建立端到端的功能。 为了帮助未来可能面临同样入职挑战的新员工，我在我们的内部维基中记下了我的学习成果，以及学习该主题的最佳资源链接。 我的经理对这一举措感到惊讶，并为此表扬了我。 今天，它是我们官方工程入职资源的一部分，我每隔一段时间就会更新它。 一些新加入者还感谢我我在维基上分享的知识，并使他们的入职过程更加顺利。 +> 在两个月内，我觉得我学到了很多东西，并且对大部分代码库感到满意。我可以在没有导师太多指导的情况下构建端到端的功能。为了帮助未来可能面临相同入职挑战的新员工，我将我的学习记录在我们的内部 wiki 中，并附上了一些用于学习该主题的最佳资源的链接。我的经理对这项主动性感到惊讶，并为此表扬了我。今天，它已成为我们官方的工程入职资源的一部分，我时不时地更新它。一些新加入者也感谢我在 wiki 中分享我的知识并使他们的入职过程更顺畅。 -对答案的分析： +答案分析： -- **可辅导的**：遵从导师的指导/建议。 -- **问题解决**：想出了一些方法来帮助他们更快地上岗。 -- **主动性**：主动启动维基。 -- **同理心**：看到其他人可能面临同样的问题并启动了 wiki。 -- **帮助提升他人**：新加入者从维基中受益。 +* **可指导**：遵循导师的指导/建议。 +* **解决问题**：想出了一些方法来帮助自己更快地入职。 +* **主动性**：启动 wiki 的主动性。 +* **同理心**：看到其他人可能面临相同的问题并启动了 wiki。 +* **帮助改善他人**：新加入者受益于 wiki。 diff --git a/packages/behavioral-interview-guidebook/contents/overview/en-US.langnostic.json b/packages/behavioral-interview-guidebook/contents/overview/en-US.langnostic.json new file mode 100644 index 000000000..6ef820b3e --- /dev/null +++ b/packages/behavioral-interview-guidebook/contents/overview/en-US.langnostic.json @@ -0,0 +1,186 @@ +{ + "frontmatter": { + "title": "4617f06d", + "description": "7943bb42", + "seo_title": "d05dcc71", + "social_title": "d80461ec", + "seo_description": "1d73abcf" + }, + "content": { + "source": { + "locale": "en-US", + "hashes": [ + "d69bf5a", + "2589d6c0", + "8ff69314", + "dbff582d", + "647b765e", + "36f069b9", + "d65dfdbf", + "51c65a99", + "f2b57489", + "ff91322c", + "34ead88e", + "bd006acd", + "4872f499", + "154000a3", + "904ad9cb", + "c84a600e", + "ee02e149", + "80a251c", + "c37bb57c", + "c11cee6e", + "913a8b08", + "f3d74108", + "89542105", + "1c13e511", + "1180e08", + "9d1ba802", + "c558e06f", + "63b64124", + "b0f73bf4", + "df108c8b", + "fb529cb", + "42bfe402", + "ddfa57f3", + "437907cc", + "df1e8198", + "8060798f", + "b378b240", + "d6e6a4b5", + "15372437", + "b5b6df43", + "f98af47f", + "ed10d92e", + "1a998640", + "9b4550c7", + "f1b4c45f", + "b84c79db", + "5da98e7c", + "2e0d6b84", + "3d06e73d", + "c6e0bd60", + "833146e3", + "176a21b7", + "37f87e9f", + "9894bdac", + "6be0af14", + "fafb0b1e", + "405448ca", + "845f7b54", + "d37f7719", + "bdaf5e0", + "78b74f1", + "1fff8c49", + "7857b1bb", + "5a595fe5", + "b942362b", + "c36bdde0", + "5b9dd803", + "7694c6b7", + "f02e9e24", + "d8a415f5", + "f68f4ae7", + "da4055f4", + "bb7c4a7d", + "5eb07228", + "c8095f5e", + "6aa75a6f", + "4dfe624a", + "34a2cb41", + "19ece7e1", + "9af4343b", + "e201f1d2", + "3ac7ebb1", + "8ec4aae8" + ] + }, + "targets": { + "zh-CN": [ + "d69bf5a", + "2589d6c0", + "8ff69314", + "dbff582d", + "647b765e", + "36f069b9", + "d65dfdbf", + "51c65a99", + "f2b57489", + "ff91322c", + "34ead88e", + "bd006acd", + "4872f499", + "154000a3", + "904ad9cb", + "c84a600e", + "ee02e149", + "80a251c", + "c37bb57c", + "c11cee6e", + "913a8b08", + "f3d74108", + "89542105", + "1c13e511", + "1180e08", + "9d1ba802", + "c558e06f", + "63b64124", + "b0f73bf4", + "df108c8b", + "fb529cb", + "42bfe402", + "ddfa57f3", + "437907cc", + "df1e8198", + "8060798f", + "b378b240", + "d6e6a4b5", + "15372437", + "b5b6df43", + "f98af47f", + "ed10d92e", + "1a998640", + "9b4550c7", + "f1b4c45f", + "b84c79db", + "5da98e7c", + "2e0d6b84", + "3d06e73d", + "c6e0bd60", + "833146e3", + "176a21b7", + "37f87e9f", + "9894bdac", + "6be0af14", + "fafb0b1e", + "405448ca", + "845f7b54", + "d37f7719", + "bdaf5e0", + "78b74f1", + "1fff8c49", + "7857b1bb", + "5a595fe5", + "b942362b", + "c36bdde0", + "5b9dd803", + "7694c6b7", + "f02e9e24", + "d8a415f5", + "f68f4ae7", + "da4055f4", + "bb7c4a7d", + "5eb07228", + "c8095f5e", + "6aa75a6f", + "4dfe624a", + "34a2cb41", + "19ece7e1", + "9af4343b", + "e201f1d2", + "3ac7ebb1", + "8ec4aae8" + ] + } + } +} diff --git a/packages/behavioral-interview-guidebook/contents/overview/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/overview/zh-CN.mdx index 089adfad9..9aeded3fa 100644 --- a/packages/behavioral-interview-guidebook/contents/overview/zh-CN.mdx +++ b/packages/behavioral-interview-guidebook/contents/overview/zh-CN.mdx @@ -1,242 +1,245 @@ --- -title: 行为面试-综述与准备指南 -description: 前端/网络开发人员/软件工程师的行为面试指南，由FAANG的前面试官撰写。 了解大科技公司的评估标准，准备的有效策略，以及顶级行为面试问题。 +title: 前端工程师行为面试指南 +description: 了解大科技公司的评估标准、高效的准备策略以及顶级的行为面试问题。 +seo_title: 行为面试指南 | 针对前端工程师 +social_title: 前端工程师行为面试指南 | GreatFrontEnd +seo_description: 前端工程师行为面试的权威指南。由前 FAANG 面试官撰写。了解期望和准备方法。 --- -行为面试是面试中最被忽视的环节之一，特别是对于软件工程师的面试。 技术面试非常复杂，并需要大量的时间进行准备，然而行为面试的重要性却不容小觑。 +行为面试是最容易被忽视的面试环节之一，尤其是在软件工程师面试中。虽然技术面试很复杂，需要花费大量时间准备，但行为面试的重要性怎么强调都不为过。 -然而，准备行为面试时面临的一些常见挑战有： +然而，在准备行为面试时，会遇到一些常见的挑战： -1. 如何准备面试的各种问题？由于面试官可以问任何他们想要问的问题，因此准备任何行为问题都是不可能的。 但是，我们可以将常见的问题分类为几个主题，并采用方法论来解决它们。 -2. 如何展现自己的"适应性"？许多候选人在面试时都难以让自己显得可爱，并与面试官取得联系。 我们将根据我们的经验提供一些应对策略。 +1. **当可能出现如此多不同类型的问题时，如何准备？** 确实，不可能完全准备好可能出现的任何行为问题，因为面试官可以问任何他们想问的问题。但是，我们可以将最常见的问题归类为几个主要主题，并以系统的方式解决它们。 +2. **展示“契合度”的最佳方式是什么？** 许多候选人在面试环境中难以表现得令人喜欢，也难以与面试官建立联系。我们将根据我们的经验，介绍一些解决此问题的技巧。 -本文将介绍： +在本文中，我们将介绍： -1. 行为面试信号和评估标准。 -2. 推荐的准备策略。 -3. 如何在实际面试中展现自己。 +1. 行为面试信号和评估标准。 +2. 推荐的准备策略。 +3. 在实际面试中表现自己的最佳方式。 ## 行为面试信号和评估标准 -在大型科技公司进行结构化行为面试时，面试官通常接受特定方式的行为面试培训。 +在进行结构化行为面试的大型科技公司中，面试官通常会接受特定方式的培训以进行行为面试。 -他们会提供具体的指南，包括： +他们会获得具体的指导方针，通常包括： -1. 评估标准：通常分为特定的主要类别，如沟通、主动性等，需要他们对候选人进行评估。 每个类别通常还包括有关如何将候选人评为好、差、一般等的具体指导。 -2. 级别期望：面试官通常被要求在面试完候选人后提供期望级别。 为确保面试官之间的一致性，还提供了级别指南。 +1. **评估标准**：通常分为几个主要类别，例如沟通、主动性等，他们需要在这些方面对候选人进行评估。每个类别通常还包括关于如何将候选人评为好、差、一般等的具体指导。 +2. **级别期望**：面试官通常被要求在面试完候选人后提供一个期望的级别。为了确保面试官之间的一致性，还会提供一个级别指南。 -以下是典型的行为面试评估标准和大多数公司的典型级别期望。 推荐的准备策略提供了基于这些标准如何进行准备的建议。 +下面，我们介绍了典型的行为面试评估标准以及大多数公司的典型级别期望。推荐的准备策略提供了关于您如何根据这些标准进行准备的建议。 -### 面试官的角度 +### 面试官的视角 -行为面试官通常需要对几个广泛的类别，如合作、积极性等进行评分。 对于每个评估类别，他们会提供有关好评或差评的标准。 评级通常采用 5 分评级尺度，例如非常好/好/达标/差/非常差之一。 +行为面试官通常需要对几个广泛的类别进行评分，例如协作、主动性等。对于每个评估类别，他们都会获得标准，以确定什么构成良好或不良的评分。评分通常采用 5 分制，例如非常好/好/足够/差/非常差。 -除此之外，面试官还可以标记是否没有足够的信息来做出判断，或者是否没有时间问及特定的信号。 +除此之外，如果面试官没有足够的信息来做出判断，或者由于时间用完而未能提出涉及特定信号的问题，他们也可以标记。 -评分必须考虑到情境的复杂性。 对于处理得当的更加困难或复杂的情况，通常会获得更高的评分和级别建议。 +评分必须根据情况的复杂性进行。处理得当的更困难或复杂的情况通常会获得更高的评分和级别推荐。 -在面试结束后，面试官需要协调所有评分和定性反馈，以决定： +在面试结束时，他们会协调所有评分和定性反馈，以决定： -- 是否通过或不通过候选人 -- 如果通过，候选人应该获得什么级别 +* 是否通过或未通过候选人 +* 如果通过，候选人应该获得什么级别 -以上的影响是我们通常可以期望大型科技公司的行为面试有一定的结构性，因为面试官会尝试询问至少一个类别的问题来评估候选人。 +上述内容意味着我们通常可以期望大型科技公司的行为面试具有一定的结构，因为面试官会尝试从每个类别中提问至少一个问题来评估候选人。 -此外，重要的是候选人在一道问题上冗长的陈述可能会导致面试官没有足够的时间。 差的沟通或者没有理解问题的要点也可能构成不足的信号。 +此外，对于候选人来说，避免长时间喋喋不休地回答一个问题也很重要，因为面试官可能会耗尽时间。沟通不畅或没有抓住问题的重点也可能构成信号不足。 -除此之外，面试官通常鼓励利用跟进问题深入了解候选人的实际动机和理解其表面行动背后的原因。 +除此之外，通常鼓励面试官利用后续问题来更深入地挖掘候选人对其表面行为背后的实际动机和理解。: -1. 您认为您为什么会这样做？ -2. 你为什么不那样做？ -3. 你会怎么在后见之明中改变事情？ +1. 你认为你为什么做了（插入动作）？ +2. 你为什么没有做（插入动作）？ +3. 事后看来，你会如何做不同的事情？ -因此，候选人还应准备对每种行动方式的利与弊有扎实的了解，并反思自己的内在动机。 +因此，候选人还应为每种替代行动模式的优势、劣势做好充分的准备，并反思其内在动机。 ### 典型的行为面试评估标准 -以下是我们在大型科技公司为软件工程师开展行为面试时的常见评估类别和标准： +以下是我们根据在大型科技公司为软件工程师进行行为面试的经验总结出的常见评估类别和标准： -#### 1. 合作 +#### 1. 协作 -- 处理分歧 -- 团队合作 -- 处理各种个性和技能的人 -- 以简单的方式传达复杂的思想 -- 给予建设性反馈 -- 积极倾听 +* 处理分歧 +* 团队合作 +* 与不同个性和技能的人合作 +* 简单地传达复杂的想法 +* 给予建设性的反馈 +* 积极倾听 -#### 2. 实现结果和解决问题 +#### 2. 推动结果和解决问题 -- 影响力导向的心态 - - 在遇到障碍或路障时积极推进进展 - - 影响他人实现目标 - - 在分析和果断行动之间平衡 -- 辨别最佳解决方案并付诸实施 - - 辨别正确的问题 - - 辨别最关键的目标 - - 具备资源节约的思维和数据驱动的心态 - - 创意和创新 - - 辨别权衡和可持续的解决方案 - - 量化结果，迭代并跟进 +* 结果导向的心态 + * 尽管存在障碍或障碍，仍积极主动地取得进展 + * 影响他人实现目标 + * 平衡分析与果断行动 +* 确定最佳解决方案并执行 + * 确定正确的问题 + * 确定最关键的目标 + * 足智多谋和数据驱动的心态 + * 创造力和创新 + * 确定权衡和可持续的解决方案 + * 衡量结果、迭代和跟进 #### 3. 成长心态 -- 自我意识和发展领域 -- 积极征求来自他人的反馈并建立反馈循环 -- 良好地接受反馈和挫折，将其视为机会 -- 对失败承担个人责任 -- 反思，模拟最佳实践并将经验应用于新情境 -- 通过设置和努力追求具有挑战性的目标而充满活力 +* 了解自身优势和发展领域 +* 积极征求他人的反馈并创建反馈循环 +* 很好地接受反馈和挫折，将它们视为机会 +* 对失败承担个人责任 +* 反思、模拟最佳实践并将经验教训应用于新情况 +* 通过设定和努力实现具有挑战性的目标来获得能量 -#### 4. 适应能力和灵活性 +#### 4. 适应性和灵活性 -- 在不确定性中表现出色 -- 保持冷静和专注，为他人提供稳定的存在 -- 灵活并迅速适应意外情况 +* 在不确定性中表现良好 +* 保持冷静和专注，为他人提供稳定的存在 +* 灵活且快速适应意外情况 -### 典型的行为面试职级期望 +### 典型的行为面试分级期望 -行为面试是一种面试格式，面试官可以根据求职者讲述的故事、其回答和制定的决策来评估其成熟度，从初级软件工程师到极其高级的职位不等。 工作经验的年限并不一定等同于特定的职级，因为有些人比其他人成熟得更快。 通常，职级的指导意见是考虑到工作经验的年限和职级期望而制定的。 下面提到的职级是基于谷歌和 Facebook 的职级，其中 L3 相当于初级软件工程师/应届毕业生。 +行为面试是面试形式之一，面试官可以通过这种形式评估候选人的成熟度——从初级软件工程师到非常高级的职位，这取决于他们讲述的故事、他们的回应和所做的决定。 实际工作年限不一定等同于特定级别，因为有些人比其他人更成熟。 级别指导通常是在考虑实际经验年限和级别期望的情况下制定的。 下面提到的级别基于 Google 和 Facebook 的级别，其中 L3 等同于初级软件工程师/应届毕业生。 -了解通常定义的工程师职级的预期行为，并精心设计您的回答，确保它们与您当前的职级或您所针对的职级相匹配。 +了解为常用工程级别定义的预期行为，并根据您的回答确保它们与您当前的级别或您所针对的级别相符。 -#### 初级软件工程师（L3） +#### 初级软件工程师 (L3) -- 从经理和/或团队高级成员那里接受指导。 -- 在没有太多指导的情况下执行明确定义的任务。 -- 主要改进自己的技能和技艺。 +* 听从经理和/或团队高级成员的指示。 +* 在没有太多指导的情况下执行定义明确的任务。 +* 主要提高自己的技能和工艺。 -#### 软件工程师（L4） +#### 软件工程师 (L4) -- 理解项目目的并帮助实现团队的目标。 -- 将分配给他们的较大项目（通常是特性工作）拆分成较小的任务以便及时执行。 -- 适当平衡委派任务和自己执行任务。 -- 在可能指导更初级的成员、实习生或新员工时提升他们自己的技能。 -- 在高级团队成员的指导下开展跨职能合作。 +* 了解项目目的并帮助实现团队的目标。 +* 将分配给他们的大型项目（通常是功能工作）分解为较小的任务，以便及时执行。 +* 适当地平衡委派任务和自己执行任务。 +* 提高自己的技能，同时可能指导更初级的成员、实习生或新员工。 +* 在团队高级成员的指导下进行跨职能协作。 -#### 高级软件工程师（L5） +#### 高级软件工程师 (L5) -- 在团队内领导复杂任务和项目的开发。 - - 辨别经过深思熟虑的对于范围较大的模糊项目的解决方案 - - 将解决方案拆分成较小的项目并将其中的一些委派给团队成员。 -- 积极寻求新的想法和方向，以更好地构建产品。 -- 指导多个团队成员并作为榜样帮助他们提高。 -- 独立开展跨职能合作并推动复杂、模糊的讨论。 +* 领导团队内复杂任务和项目的开发。 + * 确定针对范围广泛的模糊项目的深思熟虑的解决方案 + * 将解决方案分解为较小的项目，并将其中一些项目委派给团队成员。 +* 积极寻求新想法和方向，以更好地构建产品。 +* 指导团队中的多名初级成员，并通过成为榜样来帮助他们进步。 +* 独立地进行跨职能工作，并推动复杂、模糊的讨论。 -#### 高级职员软件工程师（L6） +#### 资深软件工程师 (L6) -- 理解业务目标并建议经理和组织领导实现目标。 -- 领导一队工程师的方向。 -- 展示领域专业知识，受到其他工程师的钦佩。 -- 在团队/组织内开展清晰的长期规划并推动一致。 -- 指导技术组长和团队的初级成员。 -- 开展需要与多个团队的工程师和跨职能合作伙伴互动的项目。 +* 了解业务目标，并建议经理和组织领导者实现这些目标。 +* 领导或极大地影响工程师团队的方向。 +* 展现领域专业知识，并受到其他工程师的敬仰。 +* 在团队/组织内进行清晰、长期的规划，并推动共识。 +* 指导技术负责人和团队初级成员。 +* 从事需要与多个团队的工程师和跨职能合作伙伴互动的项目。 -#### 高级职员软件工程师（L7）及以上 +#### 资深资深软件工程师 (L7) 及以上 -- 拥有组织/全公司业务/工程目标并实现这些目标。 -- 在组织/公司内影响或领导产品和工程路线图。 -- 在高度复杂和模糊的领域领导解决方案开发和交付。 +* 拥有组织/公司范围内的业务/工程目标并交付成果。 +* 影响或领导组织/公司内的产品和工程路线图。 +* 领导高度复杂和模糊领域的解决方案开发和交付。 ## 推荐的准备策略 -如前所述，根据评估标准，我们通常可以预期大型科技公司的行为面试具有一定的结构，因为面试官会尝试从每个类别中至少询问一个问题以评估候选人。 +如上所述，根据评估标准，我们可以预期大型科技公司的行为面试会具有一定的结构，因为面试官会尝试**从每个类别中至少提问 1 个问题**来评估候选人。 -除了这些问题，我们还可以期望一般但常见的问题，例如“介绍一下自己”或“为什么加入这个公司”。 +除了这些问题之外，我们还可以期待一些常见但常见的问题，例如“介绍一下你自己”或“为什么加入这家公司”。 -问题的问法非常多样化。 虽然为所有问题做准备很耗时间，但我们可以将最常见的 80％问题分类主题，并按照以下指南系统地解决这些问题： +可以提出的问题有很多变化。虽然为所有问题做准备太耗时，但我们可以将 80% 最常见的问题归类为主题，并按照我们的以下指南有条不紊地解决它们： -1. [“介绍一下你自己…”] \(/behavioral-interview-guidebook/self-introduction) -2. “让我来看一下你的简历…” -3. [“为什么加入这个团队或公司？”] \(/behavioral-interview-guidebook/why-work-here) -4. [“你有什么问题要问我的吗？”] \(/behavioral-interview-guidebook/questions-to-ask) -5. "当你...... 的时候告诉我" （分类为以下主题） - - [实现目标和解决问题](/behavioral-interview-guidebook/problem-solving) - - [合作](/behavioral-interview-guidebook/collaboration) - - [成长心态](/behavioral-interview-guidebook/growth-mindset) - - 应变能力和灵活性 +1. [“介绍一下你自己……”](/behavioral-interview-guidebook/self-introduction) +2. “请带我了解你的简历……” +3. [“为什么加入这个团队或公司？”](/behavioral-interview-guidebook/why-work-here) +4. [“你有什么问题要问我吗？”](/behavioral-interview-guidebook/questions-to-ask) +5. “告诉我你什么时候……”（分为以下主题） + * [取得成果和解决问题](/behavioral-interview-guidebook/problem-solving) + * [协作](/behavioral-interview-guidebook/collaboration) + * [成长心态](/behavioral-interview-guidebook/growth-mindset) + * 适应性和灵活性 -### 根据常见主题准备几个好故事 +### 根据常见主题准备一些好的、通用的故事 -面对不同的“当你...... 的时候告诉我”类型的问题，解决问题的一般策略是准备 3-5 个通用的，经过深思熟虑的故事，可以用来解答多个需要的特征。 例如，与他人广泛合作的经验可以展示您的沟通，团队合作，领导能力，冲突管理等特点。 每当面试官问你一个问题时，你可以运用已准备好的故事并根据特定问题进行适当的调整。 +解决“告诉我你什么时候……”问题的总体策略是准备 3-5 个通用的、经过深思熟虑的故事，这些故事可用于解决多个所需特征。例如，与他人广泛合作的经验可以展示您在沟通、团队合作、领导力、冲突管理等方面的特质。每当面试官问你一个问题时，你都可以浏览你准备的故事，并根据具体问题进行调整。 -以下是一些选择和准备好项目经验作为故事的技巧： +以下是选择和准备好的项目经验作为故事的一些技巧： -- 根据上面的评估标准检查并尝试选择广泛经验，可以用来解决多个标准。 然后，写下简短的要点，说明您展示了满足所需特质的行为。 -- 选择展示您期望水平的经验。 例如，如果您正在申请高级软件工程师职位，则确保您的经验展示了您对整个团队方向的影响力。 -- 不要在同一轮面试中重复使用相同的故事。 面试官往往会讨论候选人的表现，因此过度使用相同的故事可能会被视为重复和经验不足。 -- 如上所述，面试官往往优先考虑后续问题以了解候选人真正的心理，动机和理解。 对于每个故事，请准备对每种替代操作的优缺点有一个扎实的理解，并反思您的内在动机。 +* 检查上述评估标准，并尝试选择可用于解决多个标准的广泛经验。然后，写下简短的要点，说明您如何表现出满足所需特征的行为。 +* 选择展示您的期望水平的经验。例如，如果您申请的是资深软件工程师职位，请确保您的经验展示了您对整个团队方向的影响。 +* 不要在一个面试循环中过多地重复使用相同的故事。面试官倾向于一起讨论候选人的表现，因此过度使用相同的故事可能会显得重复且经验不足。 +* 如上所述，面试官倾向于优先考虑后续问题，以了解候选人的真实心理、动机和理解。对于每个故事，准备好对每种替代行动模式的优缺点有扎实的了解，并反思您的内在动机。 -### 用 STAR 框架结构初始答案 +### 使用 STAR 框架构建初始答案 -准备一个您可以使用的故事后，在回答具体问题时需要将其结构化。 面试官总是被要求关注候选人在面试期间实际的沟通能力（而不是他们声称的能力），评估方式如下： +准备好一个你可以使用的故事后，你需要很好地构建它们，以便回答具体问题。面试官总是被要求注意的一个要求是候选人在面试期间实际的沟通能力（而不是他们声称的），评估如下： -- 有条理，易于理解的思维过程 -- 对哪些细节应该详细说明以及哪些细节应该保持简单有良好的直觉 -- 使他人对目的和行动清晰 -- 展示积极倾听 +* 组织良好，易于理解的思维过程 +* 善于判断哪些细节应该详细阐述，哪些应该简单化 +* 让其他人清楚目标和行动 +* 展现积极的倾听 -为了实现以上目标，您需要在回答问题时将答案结构化，确保它简洁明了，时间不超过 3 分钟。 您可以使用例如 STAR 的框架作为大致指导： +为了达到上述目标，你需要很好地组织你的答案，以确保它简洁明了，并在 3 分钟内切中要点。你可以使用一个像 STAR 这样的粗略指南： -- **情境**：介绍场景的基本细节，足够了解您所面临的挑战。 （不要花太多时间） -- **任务**：您在情况下需要实现或完成什么？ （不要花太多时间） -- **行动**：您采取了什么行动？ 这是您根据解决挑战或情况所采取的方法展示所需特质的地方。 -- **结果**：您的行动的结果是什么？ +* **情境**：呈现场景的基本细节，足以理解你所处的挑战。（不要花太多时间在这上面） +* **任务**：你需要在场景中实现或做什么？（不要花太多时间在这上面） +* **行动**：你做了什么？这是你根据你为解决挑战或情境所采取的方法展示所需特质的地方。 +* **结果**：你的行动的结果是什么？ -以下是将 STAR 应用于回答行为面试问题“告诉我一个您曾经不得不管理多个相互冲突的优先事项以及您如何处理它”的示例： +以下是将 STAR 应用于回答行为面试问题的一个例子：“请告诉我你曾经不得不管理多个相互冲突的优先级以及你如何处理它的情况”： #### 情境 -在创业公司任职的前端工程师职位上，我曾经面临过一种局面，即在非常短的时间内履行几个重要的电子商务活动特点，因为当时不同的团队都在提出特点请求。 +在我目前作为一家初创公司的前端工程师的工作中，我曾经遇到过一种情况，我必须在很短的时间内交付几个重要的电子商务活动功能，因为当时不同的团队都在提出功能请求。 #### 任务 -正如我所认识到的那样，我不可能在好的质量和及时的情况下完成它们所有。 我不得不找到一种方法来消除它们之间的冲突。 +因为我意识到我不可能以高质量且及时的方式实现所有目标。我必须找到一种方法来解决他们的优先级冲突。 #### 行动 -- 我所做的是与所有相关的产品和工程相关人员安排快速会议，共同确定优先顺序并分配适当的资源以支持此项目。 -- 我列出了每个团队提出的特点，并与所有相关人员一起工作，以确定每个特点对业务目标的贡献，同时对每个特点的工程工作量进行大致估计。 -- 这帮助我们将工程工作量很高但对目标贡献很小的特征降低优先级。 -- 对于在时限内无法实现的项目，我们能够协商获得更多的工程资源并将这些特征工作委托给其他特定人员。 -- 之后，为确保自己的时间表得以实现，我将我的特点分解为较小的任务，并计划每天和每周的里程碑，与团队定期审查我的进展。 +* 我所做的是与所有相关的产品和工程利益相关者安排了一次快速会议，共同确定优先级，并分配适当的资源来支持这个项目。 +* 我列出了每个团队请求的功能，并与所有相关的利益相关者一起确定每个功能对业务目标的贡献，同时也大致估算了每个功能的工程工作量。 +* 这帮助我们降低了那些工程工作量很大但对目标贡献很小的功能的优先级。 +* 对于那些无法在时间范围内实现的项目，我们能够协商更多的工程资源，将这些功能工作委托出去。 +* 之后，为了确保我自己的时间表得到满足，我将我的功能分解成更小的任务，并将它们规划到每日和每周的里程碑中，定期与团队一起审查我的进度。 #### 结果 -通过这种共同确定优先顺序和规划的努力，我能够按照规定的时间表实现所需的所有特点。 +通过这种共同确定优先级和规划的努力，我能够在规定的时间表内实现所有所需的功能。 -### 答案的重要警告 +### 关于你的答案的重要警告 -最后的注记——为了让面试官能够跟进您的思维过程或理解您的解决方案有多么出色，他们非常重要的是理解内容，目的和情境。 问题或情境应该被清晰地描述，并且不应该假设有任何先前的理解。 许多候选人会陷入这样一个陷阱，认为面试官可以在没有给出足够背景信息的情况下跟进他们的故事，特别是当问题是领域特定的，例如金融科技或区块链。 在这种情况下，面试官可能会将您标记为沟通不好，或将分类标记为信号不足的不足。 +最后说明——为了让面试官能够理解你的思维过程或理解你的解决方案有多么出色，让他们理解背景、目的和情境是非常重要的。应该非常清楚地描述问题或情境，并且不应该假设任何先前的理解。许多候选人陷入了假设面试官可以在没有提供足够背景的情况下理解他们的故事的陷阱，尤其是在问题是特定于领域的，例如金融科技或区块链。在这种情况下，面试官最终可能会认为你沟通不畅，或者将该类别评为信号不足。 ### 熟能生巧 -在准备好您的故事并大致了解 STAR 之后，请使用准备好的故事和 STAR 格式回答我们列出的 50 个常见行为面试问题。 与其记忆答案，最好每次都练习口头回答。 这样可以使您巩固故事并熟悉 STAR。 +在准备好你的故事并对 STAR 有一个大致的了解后，使用你准备好的故事和 STAR 格式来回答我们列出的 50 个常见的行为面试问题。不要死记硬背答案，每次都练习口头回答。这可以让你巩固你的故事并熟悉 STAR。 -## 行为面试中如何表现最佳 +## 如何在行为面试中表现得最好 -### 理解面试官的意图 +### 了解面试官的意图 -一些候选人将行为面试视为考试或考试，您必须学习或记忆才能获得正确的得分或答案。 这不是面试官正在寻找的。 为了了解面试官自己的感受，尝试想象自己正在面试加入您实际正在从事的项目的某个人。 也就是说，将自己置于招聘经理的位置。 +一些候选人将行为面试视为一种测试或考试，你必须学习或记忆才能获得正确的要点或答案。这并不是面试官所寻找的。为了了解面试官自己的感受，试着想象一下你正在面试某人加入你目前实际参与的项目。也就是说，把自己放在招聘经理的位置上。 -在技术细节轮次完成后通常会进行行为面试。 已通过技术社区的候选人被认为在技术上很有能力。 然而，作为经理，您几乎完全不了解这个陌生人（候选人）。 面试是一种谈话方式，可以让您了解作为一个人的陌生人。 这就像是在社交环境中的典型聊天，有点像速度约会，除了面试官需要足够了解您，以决定您是否能够很好地工作。 +行为面试通常在技术环节完成后进行。通过技术环节的候选人被认为在技术上是有能力的。但是，作为一名经理，你几乎不认识这个陌生人（候选人）。面试是你了解这个陌生人作为个人的对话。这就像社交场合中的典型聊天，有点像快速约会，只是面试官需要足够了解你，才能决定你是否能很好地工作。 -可以理解的是，作为面试官，您应该尝试筛选出： +可以理解的是，作为面试官，你通常会试图筛选出： -- 此候选人是否会成为**较差的表现者**？ 例如经常错过截止日期，不负责任，缺乏动力，经常与他人发生冲突，沟通不良，不能很好地接受反馈。 他们是否在简历中撒谎或夸大其词？ -- 候选人是否会成为**超级明星，有动力的队友**？ 例如善于沟通，有解决问题的资源和独立性，能够管理利益相关者，积极并努力实施新举措以推动团队前进。 -- 候选人是否会**容易管理**？ 例如，他很好地接受反馈，受人欢迎，善于社交，不会给您带来问题。 +* 这个候选人会成为一个**表现不佳者**吗？例如，经常错过截止日期，不负责任，缺乏动力，经常与他人发生冲突，沟通不畅，不善于接受反馈。他们是否在简历上撒谎或夸大其词？ +* 候选人会成为一个**超级明星，有动力的队友**吗？例如，沟通良好，善于解决问题，能够管理利益相关者，积极主动，努力工作以推动团队前进。 +* 候选人会**容易管理**吗？例如，善于接受反馈，讨人喜欢，善于交际，不会给你带来麻烦。 -如果一个候选人将答案背诵回去或看起来冷漠而无动于衷，您会雇用他们加入您的团队吗？ 可能不会。 对于面试官来说，与您的真正原始自我见面，能够了解到您的思维过程是否与他们的目标相一致同等重要。 +如果一个候选人背诵答案或表现得冷漠和无动于衷，你会聘用他们进入你的团队吗？可能不会。对于面试官来说，了解你的真实、自然的自我，就像了解你的思维过程是否与他们的目标一致一样重要。 -### 通用适用 +### 一种适合大多数人的方法 -面试官总是将团队“适合性”视为评估您的标准之一。 但是，那么多不同的团队存在-您如何知道如何表现自己以展现合适性？ +面试官总是提到团队“契合度”作为评估你的一个标准。但是，外面有这么多不同的团队——你如何知道如何表现自己来展示契合度呢？ -一种方法是询问招聘人员或先前轮次的面试官进行行为轮次之前的问题。 通常，在开始简历筛选/面试过程之前，招聘经理会在新候选人中内部对关键标准进行对齐。 例如，他们可能正在寻找更有主动精神的人，因为他们希望团队中有更多的独立驱动者。 因此，面试官将倾向于寻找那些具体的特质，并提出问题以筛选出这些特质。 +一种方法是向招聘人员或其他面试官询问行为轮之前的轮次。通常，在开始简历筛选/面试过程之前，招聘经理会在内部就他们在新候选人中寻找的关键标准达成一致。例如，他们可能正在寻找一个更积极主动的人，因为他们希望团队中有更多独立的驱动者。因此，面试官会倾向于寻找这些特定的特质，并提出问题以筛选出这些特质。 -但是，一些绝佳的通用提示可供您使用 +然而，一些万无一失的、通用的行为技巧 -1. **友好和积极**：友好和积极的人往往在任何团队中都表现良好。 -2. **主动和有动力**：奋斗者与更高绩效相关。 -3. **热情**：展示明确的兴趣，关于角色，团队和公司。 +1. **友好和积极**：友好和积极的人往往能很好地融入任何团队。 +2. **积极主动和有动力**：进取者与更高的绩效相关。 +3. **热情**：表现出对角色、团队和公司的明确兴趣。 diff --git a/packages/behavioral-interview-guidebook/contents/problem-solving/en-US.langnostic.json b/packages/behavioral-interview-guidebook/contents/problem-solving/en-US.langnostic.json new file mode 100644 index 000000000..714b1a82b --- /dev/null +++ b/packages/behavioral-interview-guidebook/contents/problem-solving/en-US.langnostic.json @@ -0,0 +1,114 @@ +{ + "frontmatter": { + "title": "bd54da7c", + "description": "d9ced7a2", + "seo_title": "750ad3fa", + "seo_description": "ea22a3f7", + "social_title": "350895b" + }, + "content": { + "source": { + "locale": "en-US", + "hashes": [ + "af1f8326", + "e3e74d45", + "7600c370", + "22934b89", + "7490f979", + "cf56d450", + "9eceb0d4", + "b2e363a2", + "91fbdfb4", + "5b389685", + "2d6550b8", + "282a375", + "bd456ea8", + "f6bafdb3", + "ecda695e", + "10606194", + "8c19b9e6", + "5c29402e", + "a27e5807", + "bd63cd0c", + "803a242f", + "bdaf5e0", + "3b4a337b", + "1fff8c49", + "2c5804df", + "5a595fe5", + "22fe778c", + "4e0c45a9", + "1414db05", + "a93ed022", + "86f1e552", + "29cf6c9f", + "7e2dee", + "9cd4490b", + "139cf0fb", + "2f266bdb", + "c36bdde0", + "88aa0040", + "6561df72", + "ab7a7ed3", + "fcfd2fed", + "be70e0d2", + "41bb777", + "979d6eb9", + "84701297", + "dea4aeba", + "840be5e0" + ] + }, + "targets": { + "zh-CN": [ + "af1f8326", + "e3e74d45", + "7600c370", + "22934b89", + "7490f979", + "cf56d450", + "9eceb0d4", + "b2e363a2", + "91fbdfb4", + "5b389685", + "2d6550b8", + "282a375", + "bd456ea8", + "f6bafdb3", + "ecda695e", + "10606194", + "8c19b9e6", + "5c29402e", + "a27e5807", + "bd63cd0c", + "803a242f", + "bdaf5e0", + "3b4a337b", + "1fff8c49", + "2c5804df", + "5a595fe5", + "22fe778c", + "4e0c45a9", + "1414db05", + "a93ed022", + "86f1e552", + "29cf6c9f", + "7e2dee", + "9cd4490b", + "139cf0fb", + "2f266bdb", + "c36bdde0", + "88aa0040", + "6561df72", + "ab7a7ed3", + "fcfd2fed", + "be70e0d2", + "41bb777", + "979d6eb9", + "84701297", + "dea4aeba", + "840be5e0" + ] + } + } +} diff --git a/packages/behavioral-interview-guidebook/contents/problem-solving/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/problem-solving/zh-CN.mdx index 36d5ec080..262a91d0c 100644 --- a/packages/behavioral-interview-guidebook/contents/problem-solving/zh-CN.mdx +++ b/packages/behavioral-interview-guidebook/contents/problem-solving/zh-CN.mdx @@ -1,191 +1,183 @@ --- -title: 标题：回答“告诉我一个时间...”对于解决问题的技能和实现结果 -description: 描述：学习如何回答有关前端/网络开发人员/软件工程师的解决问题技能和实现结果的行为问题。 参考示例答案。 +title: 解答解决问题行为面试问题 +description: 了解如何回答“告诉我一个时间……”风格的问题，以评估您的解决问题的能力。 +seo_title: 解决问题 | 行为面试手册 +seo_description: 了解如何回答解决问题的行为面试问题，适用于前端工程师。参考示例答案。 +social_title: 解决问题行为问题 | GreatFrontEnd --- -正如我们在[行为面试准备概述]中提到的，**解决问题和实现结果的驱动力**是 8 个主要问题类型之一。 +正如我们在 [行为面试准备概述](/behavioral-interview-guidebook) 中提到的，**解决问题和追求结果**是需要准备的 8 个主要问题类别之一。 -在本指南中，您将学习如何处理它们： +在本指南中，您将学习如何解决它们： -1. 详细评估标准 -2. 将可能的问题抽象为常见主题 -3. 建议的答案框架 -4. 可能的后续问题的本质 -5. 样品问题和答案 +1. 详细的评估标准 +2. 将可能的问题抽象成常见主题 +3. 建议的答案框架 +4. 后续问题的可能性质 +5. 示例问题和答案 -## 详细评估标准 +## 详细的评估标准 -解决问题和实现结果被归为一类，因为它们具有高度相关性。 当描述一个人解决问题经验或实现某些结果/目标时，可以推断出他们的思维方式或动力。 +解决问题和追求结果被归为一类，因为它们本质上高度相关。在描述解决问题或实现某些结果/目标方面的经验时，也可以推断出他们的心态或这样做的动力。 -在这个类别下评估候选人时，面试官通常会关注以下标准： +在对该类别下的候选人进行评分时，面试官通常会关注以下标准： -- 确定最佳解决方案并执行它们 - - 确定正确的问题 - - 确定最关键的目标 - - 资源能力和数据驱动思维方式 - - 创造力和创新性 - - 确定折衷和可持续的解决方案 - - 测量结果，迭代和跟进 -- 以结果为导向的思维方式 - - 在面对障碍或路障时积极取得进展 - - 影响他人实现目标 - - 在决策行动中找到分析与果断平衡点 +* 确定最佳解决方案并执行 + * 确定正确的问题 + * 确定最关键的目标 + * 足智多谋和数据驱动的思维方式 + * 创造力和创新 + * 确定权衡和可持续的解决方案 + * 衡量结果、迭代和跟进 +* 结果导向的心态 + * 尽管存在障碍或障碍，仍积极主动地取得进展 + * 影响他人实现目标 + * 平衡分析与果断行动 -## 将可能的问题抽象为常见主题 +## 将可能的问题抽象成常见主题 -正如我们在[行为面试准备概述]中提到的，为每个行为问题制定答案是不切实际的。 然而，通过将特定问题分批次到相似的主题中，并准备涵盖大量问题要求的故事，我们可以将要准备的故事数量减少到约 3-5 个故事。 +正如我们在 [行为面试准备概述](/behavioral-interview-guidebook) 中提到的，为那里出现的每个行为问题专门准备答案是不切实际的。但是，通过将特定问题归入类似的主题，并准备涵盖大量问题要求的故事情节，我们可以将要准备的故事数量减少到大约 3-5 个故事。 -在这个类别下有太多类型的解决问题和实现结果的行为问题，例如： +可以提出的解决问题和追求结果的行为问题类型实在太多了，例如： -- 你能告诉我一次你必须使用数据来驱动工程决策的经历吗？ -- 你可以提供一次你在项目中必须解决和修复复杂问题的例子吗？ -- 你能描述一次你创造性地解决了工程问题或实现了有意义的指标改进的经验吗？ -- 你能描述一次你必须做出重要的工程决策，以及你是如何在两者之间做出选择的吗？ +* 您能否告诉我您曾经**使用数据来驱动工程决策**的经历？ +* 您能否提供一个您必须在项目中**排除故障并修复复杂问题**的例子？ +* 您能否描述一下您曾经**创造性地解决了**一个工程问题或实现了有意义的指标改进的经历？ +* 您能否描述一下您曾经必须做出重要的工程决策以及您如何在**权衡之间**做出决定的经历？ -然而，当我们查看此类别下 80％的问题时，通常会要求解决问题的过程或有效解决问题所需的特定特征，例如创意性、使用数据或者权衡评估。 从这些问题的答案中也可以推断问题或目标的来源，以及候选人是否能够在面对障碍时保持弹性。 +但是，当我们查看该类别下的 80% 的问题时，问题通常会询问如何解决问题或有效解决问题所需的特定特质，例如创造力、使用数据或权衡评估。问题的根源或目标，以及候选人在面对障碍时是否具有韧性，也可以从对这些问题的回答中推断出来。 ## 建议的答案框架 -像往常一样，我们推荐使用 STAR 格式来构建故事，它是最简单和最有效的框架。 +和往常一样，我们推荐使用 [STAR 格式](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 作为最简单、最有效的框架来构建你的故事。 -尽管问题可能很多，但我们可以通过考虑一个强大的解决问题过程来抽象出所有解决问题行为问题的要求： +尽管问题可能性很多，但我们可以通过思考一个稳健的解决问题的过程来抽象出所有解决问题行为问题的要求： -1. **问题识别**：从表层症状中识别出正确的根本原因或问题。 -2. **指标/目标设定**：确定在解决问题方面成功的关键指标（如果有）。 -3. **信息收集**：从不同来源收集信息以及数据驱动的思维方式（使用数据驱动决策）的资源能力。 -4. **解决方案头脑风暴**：创意地产生解决根本原因的解决方案。 -5. **解决方案评估**：评估每个解决方案的权衡折衷并选择最优解决方案。 -6. **监测和调整**：通过测量关键指标监测解决方案的有效性。 如有必要，调整策略。 +1. **问题识别**：从表面症状中识别出要关注的正确根本原因或根本问题。 +2. **指标/目标设定**：确定解决问题（如果有）时表示成功的关键指标。 +3. **信息收集**：从不同来源收集信息的足智多谋和数据驱动的思维方式（使用数据来驱动决策）。 +4. **解决方案头脑风暴**：创造性地生成解决根本原因的解决方案 +5. **解决方案评估**：评估每个解决方案的权衡，并选择最佳方案 +6. **监控和调整**：通过衡量关键指标来监控解决方案的有效性。如果需要，调整策略。 -因此，您只需确保您至少准备的一个[故事或项目]涵盖了以上所有步骤。 这样做将使该故事可重复用于解决问题方面的所有相关特征，如数据驱动的思维方式、资源能力、创造力以及从用户反馈中工作。 +因此，你只需要确保你至少有 1 个 [准备好的故事或项目](/behavioral-interview-guidebook) 涵盖了以上所有步骤。 这样做的话，这个故事可以重复用于解决问题下的所有相关特质，例如数据驱动思维、足智多谋、创造力以及接受用户反馈。 -当然，您可能需要定制故事的细节以便于专注于特定问题的特定方面。 +当然，你可能需要根据故事的细节来侧重于特定问题中提出的具体方面。 -我们还建议您选择可以通过以下方式获取信号的问题解决故事。 +我们建议你选择解决问题的故事，这些故事也可以用来获取以下方面的信号 -- **积极性/主动性**：您已经采取主动措施解决问题，收集信息并解决问题。 -- **领导能力**：您带领了解决问题的过程。 -- **团队协作**：您必须作为团队的一员来解决问题。 +* **主动性/积极性**：你主动调查问题、收集信息并解决问题。 +* **领导力**：你主导了解决问题的过程 +* **团队合作精神**：你必须作为团队的一员来解决问题 -### 实例故事 +### 案例故事 #### 情境 -- 我是一家销售奢侈品的电商网站的技术主管。 该网站是一个 Angular 1.5 的单页面应用程序。 -- 近年来，该产品显得有点老了——开发体验不佳，网站性能不佳。 初始加载速度超过 3 秒，转化率约为 0.8％。 +* 我是一家销售奢侈品的电子商务网站的技术负责人。 该网站是作为 Angular 1.5 单页应用程序构建的。 +* 近年来，该产品已经显现出它的老化——开发人员的体验并不好，而且网站的性能也很差。 初始加载速度超过 3 秒，转化率约为 0.8%。 #### 任务 -- 我的任务是改进网站的性能和转化率。 +* 我的任务是提高网站的性能和转化率。 #### 行动 **1. 问题识别** -- 转化率与性能和用户体验相关。 -- 过去几年，网站性能逐渐下降。 -- 用户体验值得检查。 [改进措辞] +* 转化与性能和用户体验相关。 +* 过去几年，网站的性能一直在逐渐下降。 +* 用户体验已经有一段时间没有被关注了。 \[改进措辞] **2. 信息收集** -- 查看过去一年中的错误性质，根据它们的根本原因对它们进行分类，以确定故障热点和主要问题区域。 -- 收集来自团队的反馈，并确定改进的范围和重点。 -- 与团队进行头脑风暴会议，以想出改进的方法。 -- 为了改进，首先需要知道我们的表现如何。 - - 确认我们的性能和转化跟踪是否正常工作。 - - 开始从 Lighthouse 和 Core Web Vitals 跟踪新指标。 -- 与数据科学家合作创建性能和转化的仪表板，并获得一些见解： - - 确定某些国家的转化率较低。 - - 移动用户与桌面用户相比具有较低的转化率。 -- 与 UX 设计师和 UX 研究人员合作，识别网站上的 end-to-end 购物体验问题。 - - UI 元素之间间隔太大，需要大量滚动，影响了跳出率，因为一些用户不愿滚动。 +* 查看了过去一年中错误的性质，根据其根本原因进行分类，以确定热点和主要问题领域。 +* 收集了团队关于改进领域方面的反馈。 +* 与团队一起集思广益，思考改进方法。 +* 为了改进，首先我们需要知道我们做得怎么样。 + * 再次检查我们的性能和转化跟踪是否正常工作。 + * 开始跟踪来自 Lighthouse 和 Core Web Vitals 的新指标。 +* 与数据科学家合作，提出了性能和转化的仪表板，并获得了一些见解： + * 确定一些国家的转化率较低。 + * 与桌面用户相比，移动用户的转化率较低。 +* 与用户体验设计师和用户体验研究人员合作，以确定网站上端到端购物体验中的问题。 + * 用户界面元素之间的间距太大，需要大量滚动，这影响了跳出率，因为一些用户懒得滚动。 **3. 解决方案头脑风暴** -- **用户界面**：服务器端呈现对于其性能和 SEO 的好处至关重要。 做出良好选择。 - - **View**：从 Angular.js 1.6 迁移到 Angular 13 是一个巨大的任务，而停留在 Angular 上没有太大的时间节省效益。 - - **Next.js**：我们的一些开发人员具有使用 React 和 Next.js 作为用于构建 SSR 应用程序的元框架的经验，这种 SSR 应用程序的快速初始载入和应用程序行为非常有吸引力。 我们真的渴望 Next.js 提供的快速初始加载和类似应用程序的行为。 - - **Svelte**：响应模型很吸引人，并且相对于 React 的编程模型更容易理解。 -- **样式**：由于多年来添加了许多类并且难以删除，因此样式表变得非常臃肿。 - - **Tailwind CSS**：Tailwind CSS 是最热门的 CSS 方法之一，其原子 CSS 方法可扩展适用于不断增长的代码库。 - - **Styled Components**：CSS in JS 是我们也在考虑的东西，但 Styled Components 与 React 有关，并且运行时样式注入对性能不利。 -- **以性能为中心的思维方式**。 阅读了许多关于 web.dev 和其他电子商务公司的工程博客的性能案例研究，收集了一个重要的性能技术和流程列表： - - 设置每个页面的性能预算（低于 300 kb）。 - - 在合并拉取请求之前运行性能基准测试。 - - 惰性加载非关键组件，惰性加载屏幕下方内容。 - - 在页面级别上拆分 JavaScript，而不是单独的包（由 Next.js 处理）。 - - 对图片使用 WebP 格式。 - - 将图片托管在 CDN 上，Adaptive 加载图片，因此移动设备加载较小的图片，合并重复的 JavaScript 库（data-fns 和 moment.js），切换到 lodash-es，删除了所有 jQuery 的用法-查看数据以识别不常用的功能并将其从产品详细信息页的代码中删除，JS 大小减少了 200 个+ kb。 -- **搜索引擎优化（SEO）** - - 使用 SEO 工具（例如 Ahrefs）持续监测 SEO。 - - 与营销团队合作，确保营销内容包含 Ahrefs 显示的重要关键字。 - - 调整页面 URL 以包括 SEO 关键字 -- 用户体验的改进 - - 只需单击一个页面即可付款，而不是使用两个页面付款，从而减少了点击次数。 - - 减小了许多 UI 元素的高度。 - - 固定检查按钮，这样就不会错过。 -- 付款方式改进 - - 分析了 Stripe 结账，并实施了特定国家的地址栏。 - - 最初只有一种可用的付款方式：信用卡。 得到了数据科学家的帮助，以评估新的支付方式是否受欢迎，以及它们是否值得添加。 我们后来还增加了 PayPal、谷歌支付和苹果支付等支付方式。 +* **用户界面**：服务器端渲染对其性能和 SEO 优势至关重要。 围绕良好的性能做出选择。 + * **视图**：从 Angular.js 1.6 迁移到 Angular 13 是一项巨大的工程，而且留在 Angular 上并没有节省多少时间。 + * **Next.js**：我们的一些开发人员有使用 React 和 Next.js 作为构建 SSR 应用程序的元框架的经验，并且它正在迅速普及。 我们真的希望 Next.js 能够提供快速的初始加载和类似应用程序的行为。 + * **Svelte**：反应式模型很有吸引力，而且编程模型比 React 的更容易理解，但是生态系统很小，而且没有那么多库。 +* **样式**：由于多年来添加了许多类并且很难删除，样式表变得非常臃肿。 + * **Tailwind CSS**：Tailwind CSS 是最热门的 CSS 方法之一，其原子 CSS 方法可以很好地扩展到不断增长的代码库。 + * **Styled Components**：CSS-in-JS 也是我们正在关注的，但 Styled Components 与 React 绑定，并且运行时样式注入对性能不利。 +* **以性能为中心的思维模式**。 阅读了 web.dev 和其他电子商务公司的工程博客上的许多性能案例研究，收集了一份重要的性能技术和流程列表： + * 为每个页面设置性能预算（低于 300kb）。 + * 在合并拉取请求之前运行性能基准测试。 + * 延迟加载非关键组件 延迟加载低于折叠的内容。 + * 在页面级别而不是单个捆绑包上拆分 JavaScript（由 Next.js 处理）。 + * 对图像使用 WebP 格式。 + * 在 CDN 上托管图像，而不是自适应加载图像，以便移动设备加载较小的图像 整合重复的 JavaScript 库（data-fns 和 moment.js），切换到 lodash-es，删除所有 jQuery 的用法 - 查看数据以识别较少使用的功能并将其从代码中删除，从而减少产品详细信息页面上的 JS 大小 200+kb。 **4. 解决方案评估** -- **View 和渲染**：选择 Next.js，因为它由 Vercel 支持，拥有最大的社区。 React 也是最流行的 UI 库，最容易为之招聘。 -- **样式**：Tailwind，因为它是相当可靠和未来可靠的选择。 +* **视图和渲染**：选择 Next.js，因为它有 Vercel 的支持，并且拥有最大的社区。 React 也是最流行的 UI 库，并且也最容易找到工作。 +* **样式**：Tailwind，因为它是一个相当可靠且面向未来的选择。 **5. 监控和调整** -- 在 2 个月的时间内监控性能和转化率，并在 A/B 测试中推出新网站。 -- 以前转换率较低的国家，其转换率提高了近 50%。 +* 在为期 2 个月的 A/B 测试中推出了新网站，同时监控了性能和转化率。 +* 此前转化率较低的国家/地区，转化率提高了近 50%。 #### 结果 -- Lighthouse 分数已提高到 92。 -- 加载速度提高至 1.5 秒 -- 转化率提高至 2.5％ -- 在最近的调查中，开发人员的速度已经提高，现在更容易将更多人招聘到团队中，因为更多人了解 React 而不是其他框架。 +* Lighthouse 分数提高到 92。 +* 加载速度提高到 1.5 秒 +* 转化率提高到 2.5% +* 在最近的调查中，开发人员的速度有所提高，现在更容易招聘人员加入团队，因为更多的人比其他框架更了解 React。 -## 可能的后续问题的本质 +## 可能的后续问题性质 -正如我们在[行为面试准备概述]中所提到的，面试官鼓励依靠后续问题更多地了解候选人的思考过程和动机，这些后续问题通常属于以下类别： +正如我们在 [行为面试准备概述](/behavioral-interview-guidebook) 中所暗示的那样，鼓励面试官更多地依赖后续问题来真正了解候选人的思维过程和动机，这些问题通常属于以下几类： -- 您认为您为什么会这样做？ -- 你为什么不那样做？ -- 如果换成后见之明，你会如何做事情？ +* 你认为你为什么做了（插入操作）？ +* 你为什么不做（插入操作）？ +* 事后看来，你将如何做不同的事情？ -在解决问题或实现结果的问题上，面试官最有可能探究这样的问题，以帮助他们更好地了解候选人： +对于解决问题或追求结果的问题，面试官很可能会探究问题，以帮助他们更多地了解： -- **任务/问题/目标的来源**（理解主动性和积极性的水平）： - - 项目或任务是否由您发起的？ 以及在什么程度上？ - - 潜在的想法是来自你，还是只是执行的计划？ - - 你是如何得到利益相关者的支持，甚至在这方面的工作？ -- **候选人的角色和实际贡献**： - - 是否涉及问题解决的团队？ - - 哪些措施是由自己主动采取或仅由自己做出贡献的？ -- **优先考虑解决的问题或目标**： - - 是否有理由将特定的问题或目标视为优先解决或有限时间内必须解决，而其他问题或根本目标存在更重要？ - - 这个问题或根本目标是否已被公司中的其他团队解决了？ - - 这个问题不是已经由公司的另一个团队解决了吗？ 为什么要重新制定解决办法？ -- **选择适当的度量标准或目标，以及是否在发布后进行了测量**： - - 是否设置了定量或定性的目标，以及如何决定的？ - - 它们是如何在发布后被测量的，结果如何？ - - 如果问题已解决，那么将采取什么措施确保不再发生同样的问题？ -- **使用足够的信息驱动决策**： - - 您依赖哪些研究或数据来进行决策/选择要解决的问题？ - - 您花费多少时间研究和收集信息？ - - 您如何在收集信息/规划和执行计划之间保持平衡？ -- **选择正确的解决方案**： - - 考虑了哪些其他解决方案，各自的利弊如何？ - - 为什么选择了最终的解决方案？ - - 谁提出了解决方案的原始想法？ 他们是如何得出的？ +* **任务/问题/目标的来源**（了解主动性和主动性）： + * 该项目或任务是由您发起的吗？ 在什么程度上？ + * 潜在的想法来自您，还是只是执行计划？ + * 您如何获得利益相关者的支持，甚至可以开展这项工作？ +* **候选人的角色和实际贡献**： + * 是否有一个团队参与解决问题或实现目标？ + * 您自己主动发起或完全由您贡献了哪些行动，其他人做了什么？ +* **确定要实现的问题或目标**： + * 是否有原因说明为什么优先解决或完成此特定问题或目标而不是其他问题或目标？ + * 是否有另一个问题或根本目标应该更重要？ + * 这个问题是否尚未由公司的另一个团队解决？ 为什么必须重新发明解决方案？ +* **选择适当的指标/目标，以及它们是否在发布后进行了衡量**： + * 是否设定了任何定量或定性目标，以及如何决定？ + * 它们在发布后是如何衡量的，结果如何？ + * 如果问题得到解决，采取了哪些措施来确保不会再次发生同样的问题？ +* **使用足够的信息来推动决策**： + * 您依赖哪些类型的研究或数据来做出决策/选择要解决的问题？ + * 您花了多少时间进行研究和收集信息？ + * 您如何在收集信息/计划和实际执行计划之间取得平衡？ +* **选择正确的解决方案**： + * 考虑了哪些其他解决方案，以及每个解决方案的优缺点是什么？ + * 为什么选择最终的解决方案？ + * 解决方案最初的想法是谁提出的？ 它们是如何得出的？ -## 样例解决问题的问题和答案 +## 解决问题的示例问题和答案 -将上述样本故事调整为回答特定问题。 +根据上述示例故事定制答案以回答具体问题。 -{/* TODO: Gina */} +{/* TODO: 吉娜 */} -- 你能告诉我一次你必须使用数据来驱动工程决策的经历吗？ -- 你可以提供一个你必须解决和修复复杂问题的项目的例子吗？ -- 你能描述一下你是如何创意地解决工程问题或实现有意义的指标改进的吗？ -- 你能描述一次你必须做出重要的工程决策，以及你是如何在两者之间做出选择的吗？ +* 您能否告诉我您使用数据来驱动工程决策的经历？ +* 您能否提供一个您必须对项目中的复杂问题进行故障排除和修复的示例？ +* 您能否描述一下您解决工程问题或实现有意义的指标改进的经历？ +* 您能否描述一下您必须做出重要的工程决策以及您如何在权衡之间做出决定的经历？ diff --git a/packages/behavioral-interview-guidebook/contents/questions-to-ask/en-US.langnostic.json b/packages/behavioral-interview-guidebook/contents/questions-to-ask/en-US.langnostic.json new file mode 100644 index 000000000..75bcccd95 --- /dev/null +++ b/packages/behavioral-interview-guidebook/contents/questions-to-ask/en-US.langnostic.json @@ -0,0 +1,160 @@ +{ + "frontmatter": { + "title": "2446dee0", + "description": "3717148a", + "seo_title": "5b8f16f7", + "seo_description": "dbb07feb", + "social_title": "6e02ca93" + }, + "content": { + "source": { + "locale": "en-US", + "hashes": [ + "ede2bd47", + "55f978b2", + "ab56b39c", + "1b5c32e", + "bac07c80", + "8ae8f8dd", + "f5caf9ea", + "c40c20bd", + "c22426e6", + "c30eb869", + "a810dc72", + "f4c24d6b", + "f7a126b9", + "9f0aaf7c", + "861d8bcb", + "49f06657", + "3dbd00d7", + "8818cfeb", + "40200ead", + "6366bfde", + "d68ddeb", + "87ba9aa9", + "61e6f05d", + "ecf73b96", + "3befb21d", + "a180e4db", + "8e2b7468", + "667b27af", + "b14c4a73", + "24c8a4f5", + "eeb58dae", + "150a73d0", + "5a43b873", + "c8e84db8", + "6d6a0098", + "16f26f58", + "79bea09f", + "d905b6a8", + "f5b0ace8", + "4af8b5f6", + "f3602576", + "78fd55", + "97faea64", + "dc09fcf8", + "1a718cd5", + "95d454dd", + "61df4c1b", + "77f37db6", + "17861f37", + "defc0b3b", + "b9fd1401", + "15ecd443", + "f12ce49a", + "a9a99bb2", + "e09f04fb", + "4e1f5173", + "eba740a8", + "d0f6daf5", + "3a5732d2", + "e7721211", + "1736d727", + "ec3bfcee", + "77408461", + "8af5a8e9", + "ae8160b2", + "2a493cf4", + "e71bdbca", + "d9d7d69a", + "573ad095", + "1f5b00f1" + ] + }, + "targets": { + "zh-CN": [ + "ede2bd47", + "55f978b2", + "ab56b39c", + "1b5c32e", + "bac07c80", + "8ae8f8dd", + "f5caf9ea", + "c40c20bd", + "c22426e6", + "c30eb869", + "a810dc72", + "f4c24d6b", + "f7a126b9", + "9f0aaf7c", + "861d8bcb", + "49f06657", + "3dbd00d7", + "8818cfeb", + "40200ead", + "6366bfde", + "d68ddeb", + "87ba9aa9", + "61e6f05d", + "ecf73b96", + "3befb21d", + "a180e4db", + "8e2b7468", + "667b27af", + "b14c4a73", + "24c8a4f5", + "eeb58dae", + "150a73d0", + "5a43b873", + "c8e84db8", + "6d6a0098", + "16f26f58", + "79bea09f", + "d905b6a8", + "f5b0ace8", + "4af8b5f6", + "f3602576", + "78fd55", + "97faea64", + "dc09fcf8", + "1a718cd5", + "95d454dd", + "61df4c1b", + "77f37db6", + "17861f37", + "defc0b3b", + "b9fd1401", + "15ecd443", + "f12ce49a", + "a9a99bb2", + "e09f04fb", + "4e1f5173", + "eba740a8", + "d0f6daf5", + "3a5732d2", + "e7721211", + "1736d727", + "ec3bfcee", + "77408461", + "8af5a8e9", + "ae8160b2", + "2a493cf4", + "e71bdbca", + "d9d7d69a", + "573ad095", + "1f5b00f1" + ] + } + } +} diff --git a/packages/behavioral-interview-guidebook/contents/questions-to-ask/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/questions-to-ask/zh-CN.mdx index 0df5c4171..da6f8ec73 100644 --- a/packages/behavioral-interview-guidebook/contents/questions-to-ask/zh-CN.mdx +++ b/packages/behavioral-interview-guidebook/contents/questions-to-ask/zh-CN.mdx @@ -1,161 +1,164 @@ --- -title: 在软件工程面试结束时问面试官的有用问题 -description: 了解在前端开发/网站开发/软件工程面试中最好问的问题。 由大型科技公司的前面试官撰写。 +title: 面试结束时要问的问题 +description: 了解在前端面试结束时要问的最佳问题。 +seo_title: 在前端面试结束时要问的有用问题 +seo_description: 了解在前端面试结束时要问的最佳问题。由来自 Big Tech 的前面试官撰写。 +social_title: 面试结束时要问的问题 | GreatFrontEnd --- -在焦急地寻找工作时，我们中的一些人可能会忘记与一个糟糕的团队合作可能比等待好机会更糟糕。 实际上，面试是候选人与实际在公司工作的人交谈并了解更多关于那里的实践的宝贵机会。 在加入工作之前，您应该评估有关工作的几个关键方面： +为了获得一份工作，我们中的一些人可能会忘记，加入一个糟糕的团队可能比等待一个好机会更糟糕。面试实际上是候选人与实际在该公司工作的人交谈并了解更多关于那里实践的宝贵机会。在加入之前，您应该评估关于一份工作的几个关键方面： -- 工作对您是否有趣？ -- 是否有职业发展的空间？ -- 同事/您的经理是否合作并易于共同工作？ +* 这项工作对您来说会很有趣吗？ +* 有职业发展的空间吗？ +* 您的队友/您的经理是否乐于合作并且容易共事？ -面试结束时问好问题可以帮助候选人实现两个目标： +在面试结束时提出的好问题可以帮助候选人实现 2 个目标 - 留下好印象并帮助候选人评估该公司是否真的适合他们。 -在本文中，我们提供了一个有用问题的大型列表，您可以问询以实现此目的。 问题按面试官/面试轮次以及目标组织。 +在本文中，我们提供了一份您可能提出的有用问题的长列表，以实现此目的。问题按面试官/面试轮次以及目标进行组织。 -## 与人力资源/招聘专员的筛选轮次 +## 与人力资源/招聘人员的筛选轮次 -招聘专员通常不直接在雇用您的团队中工作。 因此，询问团队的日常或现场情况可能不够深入。 但是，您仍然可以了解到招聘人员会了解的信息，例如候选人评估标准或一般公司政策等内容。 +招聘人员通常不会直接在招聘您的团队中工作。因此，询问有关团队的日常或实际情况的问题可能不太有见地。但是，您仍然可以找到招聘人员会知道的信息，例如候选人评估标准或一般公司政策。 ### 了解招聘团队正在寻找的标准 -这些问题非常有用，以了解招聘团队正在优先考虑的因素，他们可能已经与人力资源/招聘专员通信，以便他们可以相应地筛选候选人。 +这些问题对于了解招聘团队正在优先考虑什么非常有用，他们可能已经事先与人力资源/招聘人员沟通，以便他们可以相应地帮助筛选候选人。 -#### “团队在理想候选人中寻找的技能、特征或经历是什么？” +#### “团队在理想的候选人中寻找哪些技能、特征或经验？” -这些问题非常宝贵，因为您可以确定招聘团队在招聘中优先考虑的关键标准，这样可以让您在与招聘团队的下一轮面试中专门展示这些所需的技能，特征或经验。 +这些非常有用，因为您将能够查明团队在招聘中优先考虑的关键标准，这使您能够在下一轮与招聘团队一起具体展示所需的技能、特征或经验。 -这个问题非常有用，因为通常很难猜测面试官真正想找什么。 招聘通常是一个中的命中或失误，而招聘经理通常特别兴奋地发现那些似乎完全符合他们内部招聘标准的候选人。 +这个问题非常有用，因为通常很难猜测面试官真正寻找的是什么。招聘通常是命中或错过，招聘经理通常特别兴奋地找到似乎完全符合其内部招聘标准的候选人。 -#### “这个职位的预期开始日期是什么时候？” +#### “该职位的预计开始日期是什么时候？” -通常情况下，当必须迅速填补职位时，开始日期可能是一个重要的标准。 如果您有延迟的开始日期，可以在早期与招聘人员确认，以避免浪费时间和精力。 +通常情况下，开始日期可能是在必须紧急填补职位时的关键标准。如果您有延迟的开始日期，您可以尽早与招聘人员核对，以避免浪费他们和您的时间。 -### 更多了解招聘团队 +### 了解更多关于招聘团队的信息 -#### “我会有机会在面试过程中见到我潜在的经理或同事吗？” +#### "在面试过程中，我是否有机会见到我的潜在经理或同事？" -如果您要在过程中见到招聘团队，那么知道哪些是面试轮次，如果可能的话，是谁会很有帮助。 这将帮助您准备相关问题或事先进行背景检查。 +如果你要在面试过程中见到招聘团队，最好知道是哪几轮，如果可能的话，知道都有谁。这将帮助你准备相关问题或事先进行背景调查。 -#### “您能告诉我有关直接与我一起工作的团队的情况，包括我将向谁汇报以及团队的结构？” +#### "你能告诉我关于我将直接合作的团队的情况吗，包括我将向谁汇报以及团队的结构？" -这个问题可能有用，也可能没有，这取决于招聘人员对招聘团队的熟悉程度（有时根本不熟悉）。 但是，您仍然可能会获得有关团队结构或动态的有用见解。 +这个问题可能有用也可能没用，这取决于招聘人员对招聘团队的熟悉程度（有时根本不熟悉）。但是，你仍然可以对团队的结构或动态获得很好的见解。 -### 从公司的角度获得更多了解 +### 从公司的角度了解更多 -#### “公司当前专注于什么目标，团队如何支持实现这些目标？” +#### "公司目前关注的目标是什么，这个团队如何支持实现这些目标？" -这个问题为您提供有关团队在公司中的重要性和位置的见解，包括团队如何为公司的关键目标做出贡献。 这可以提供关键见解，有关团队的关键提供的内容和优先级以及相应的如何最好为团队服务。 在不好的时候，优先级较低的团队也可能被裁员。 +这个问题让你了解团队在公司中的重要性和地位，包括团队如何为公司的关键目标做出贡献。这可以让你对团队的关键交付成果和优先事项有关键的见解，并相应地了解你如何才能最好地为团队服务。在不景气的时候，较低优先级的团队也可能被解雇。 -#### “您能举几个公司文化最理想和最不理想的方面的例子吗？” +#### "你能给我举例说明公司文化中最理想和最不理想的方面吗？" -虽然人力资源/招聘可能不熟悉团队的日常工作，但他们很可能了解公司的政策和文化。 这可以给您提供一些有用的见解，这些见解也可能在下一次面试中出现。 +虽然人力资源/招聘可能不熟悉团队的日常工作，但他们很可能了解公司的政策和文化。这可以给你一些有用的见解，这些见解也可以延续到下一次面试。 -#### “在工作时间以外，员工多久会适时提供帮助？” +#### "员工们多久在工作时间之外的时间里出现" -在类似的范围内，我们想知道是否存在有关加班工作的总体公司文化（而不太明显）。 这对一些人来说可能是个问题，应该尽快解决。 +同样，我们想知道是否有普遍的公司文化支持或反对加班（不要太明显）。这可能是一些人的一个决定性因素，应该尽快澄清。 -## 与雇用团队/您将加入的团队的轮次 +## 与招聘团队/你将加入的团队的轮次 -对于前端开发人员/网站开发人员，与工程团队的轮次通常意味着与雇用团队本身的轮次。 +作为前端开发人员/Web开发人员，与工程团队的轮次通常意味着与招聘团队本身的轮次。 -这些轮次中提出的问题非常关键，以阐明您在实际加入团队时可能会遇到的体验（注： 向潜在经理提出问题的部分在下一节中）。 +在这些轮次中要问的问题对于阐明你实际加入团队时可能获得的体验至关重要（注意：本节侧重于向你潜在的团队成员（经理除外）提出的问题。向你潜在的经理提出的问题在下一节中）。 -### 检查工作的日常现实是否符合您的目标 +### 检查工作的日常现实是否与你的目标一致 -#### “您能向我展示我将要从事的项目示例以及我将使用的技术？ 我是在维护项目还是从头开始构建项目？” +#### "你能给我展示一下我将要参与的项目示例以及我将使用的技术吗？我将维护项目还是从头开始构建？" -这个问题有助于阐明您将要从事的具体工作以及使用的一些技术。 一般来说，有机会从零开始构建产品可能是更好的学习机会，而不是做小的渐进式特性。 +这个问题有助于阐明你将要做的确切工作类型，以及使用的一些技术。一般来说，有机会从头开始构建产品可能比做小的、增量功能提供更好的学习机会。 -所使用的技术类型也可能是一个标准，因为学习使用现代技术栈（并且具有精通该区域的导师）可能更有利于您的职业增长。 +使用的技术类型也可能是一个标准，因为学习使用现代技术栈（并拥有精通该领域的导师）可能对你的职业发展更有利。 -#### “您能描述团队开发人员的典型工作日或一周吗？” /“您能为典型项目的流程向我解释一下吗？” +#### "你能描述一下你们团队中开发人员的典型一天或一周吗？" / "你能带我了解一个典型项目的过程吗" -这个问题有助于澄清很多事情-开发人员可能需要完成的任务，您将与之合作的利益相关者，以及项目管理过程和生命周期。 +这个问题有助于澄清很多事情——开发人员可能需要执行的任务类型、你将与之合作的利益相关者，以及项目管理流程和生命周期。 -#### “您预计此职位的人员可能会面临哪些挑战？” +#### “你希望担任该职位的人面临哪些挑战？” -这个问题有助于揭示一些潜在的问题代码库或工作流程，这些问题可能成为某些人的断奶器。 它可能还揭示了功能紊乱的团队或流程。 +这个问题有助于揭示代码库或工作流程中的一些潜在问题，这些问题可能对某些人来说是决定性的。它也可能揭示功能失调的团队或流程。 -#### “在最繁忙和最困难的时期，这个角色是什么样的？” +#### “这个职位最忙和最艰难的时候是什么样子的？” -询问此问题可能有助于揭示角色的不合理高期望或压力，从而更详细地阐明工作与生活平衡的情况，而不需要明确询问这一点。 +问这个问题可以帮助揭示对该职位不合理的高期望或压力，从而阐明更多关于工作与生活的平衡，而无需明确询问。 -#### “是否有机会进行伸展任务，可以在其中学习和使用新技能？” +#### “我是否有机会进行拓展性任务，在那里我可以学习和使用新技能？” -如果您是那些寻求在角色中提高技能或组合作品的人，请务必问这个问题，以了解您是否有合理的自主权，以根据请求在更复杂的项目上工作。 +如果您是希望在该职位上提升技能或作品集的人，请务必提出这个问题，以了解您是否有合理的自主权来根据要求处理更复杂的项目。 -### 检查您的潜在经理的管理风格是否适合您的成长 +### 检查您潜在经理的管理风格是否适合您的成长 -#### 员工与公司分享哪些信息？ 收入，利润，支出范围，薪资等是否共享？ +#### 与员工共享什么类型的信息？是否共享收入、利润、支出、工资范围等？ -这个问题根据公司的透明度水平区分公司。 有些候选人可能会发现这很重要，因为信息可能很少，因此您的报酬和晋升时间表受到很少的控制。 +这个问题通过公司的透明度水平来区分公司。一些候选人可能会觉得这很重要，因为信息很少，因此对您的薪酬和晋升计划的控制也很少，这可能会令人沮丧。 -#### 我要向谁汇报？ 您能告诉我更多有关他们的监督方式吗？ +#### 我将向谁汇报？您能告诉我更多关于他们的监督方式吗？ -这个问题阐明了您的潜在经理是一个不干预还是需要查看您的工作细节的人。 这可能对您的工作经验产生很大的影响。 +这个问题阐明了您潜在的经理是那种袖手旁观的人，还是倾向于深入研究您的工作细节。这可能会对您在工作中的体验产生很大影响。 -### 了解更多有关团队动态和文化的信息 +### 更多地了解团队动态和文化 -#### “团队结构是什么样的，这个职位如何适应团队？” +#### “团队结构是什么，这个角色如何融入团队？” -这个问题非常有用，因为它可以帮助您在整个团队结构的上下文中描绘角色，团队有多大，团队的每个部分大致是做什么的。 +这个问题很有用，因为它有助于您将角色与整体团队结构、团队规模以及团队每个部分大致做什么联系起来。 -#### “这里的工作环境是什么样的-工作是否更具协作性还是更独立？” +#### “您如何描述这里的工作环境——工作通常是更协作还是更独立？” -这个问题间接阐明了团队的可能文化-人们是否在单独工作或是否经常彼此沟通。 +这个问题间接阐明了团队可能的文化——人们是孤军奋战还是经常相互交流。 -#### “您能举出团队文化中最理想和最不理想方面的例子吗？” +#### “您能给我举一些团队文化中最理想和最不理想方面的例子吗？” -另一个开放式问题，它允许您获得更多深入了解，这些深入了解可能无法从更一般的问题中出现。 +另一个开放式、有用的问题，可以让你获得更多可能不会从更一般的提问中浮现出来的见解。 -#### “团队成员多久会在工作时间以外提供帮助？” +#### “团队成员在工作时间之外多久会让自己有空？” -这个问题间接阐明了团队文化与工作生活平衡的关系。 +这个问题间接阐明了团队在工作与生活平衡方面的文化。 -## 与潜在经理的轮次 +## 与潜在经理的会面 -在这些轮次中，利用机会了解您的经理的管理风格，绩效审查过程/标准以及他/她对角色的期望（这可能让您对自己在工作中的表现有所了解） +在这些环节中，最好借此机会了解你的经理的管理风格、绩效考核流程/标准，以及他/她对该职位的期望（这可以让你了解你在这份工作中的表现）。 -- “能告诉我您所提供的监督类型吗？” -- “回想一下您之前看到的人，他们在这项工作中表现良好和不好之间有什么区别？” -- “在他们的前六个月和第一年内，您希望这个人会取得什么成就？” -- “过去一年，组织最大的成就是什么？” +* 你能告诉我你提供的监督类型吗？ +* 回顾一下你以前见过做这项工作的人，哪些人做得好，哪些人做得非常好？ +* 你希望这个人能在最初的六个月和第一年完成什么？ +* 过去一年中，该组织的主要成就是什么？ -## 与团队之外的角色轮次（可能不知道具体的团队运营） +## 与团队之外的角色（可能不了解团队的具体运作）的会面 -### 向创始人提问 +### 要问创始人的问题 -- “公司当前专注于什么目标，团队如何支持实现这些目标？” -- “您认为未来几年公司的走向是什么？” -- “公司整体当前的关注重点是什么？” +* 公司目前关注的目标是什么，这个团队如何支持实现这些目标？ +* 你认为这家公司在未来几年会走向何方？ +* 整个公司目前的重点领域是什么？ -### 向团队的协作者提问 +### 询问团队合作者的问题 -通常情况下会与您没有直接工作的人进行面试。 在这些情况下，最好扩大范围，并询问有关一般公司政策或文化的问题。 如果他们是紧密合作伙伴，您仍然可以向他们询问有关您的团队的问题。 +与你可能不会直接共事的人进行面试是很常见的。在这些情况下，最好撒下一张更大的网，询问有关一般公司政策或文化的问题。如果他们是密切的合作者，你仍然可以问他们关于你的团队的问题。 -- “您在工作中偶尔或经常面临的挑战是什么？” -- “您能告诉我要和我一起工作的团队吗？” -- “公司中有哪些学习和专业发展机会？” +* 您在工作中偶尔或经常会面临哪些挑战？ +* 您能告诉我您将要与之共事的团队吗？ +* 公司有哪些学习和职业发展机会？ -## 应该避免的问题 +## 避免提出的问题 -以下是一些您在面试结束时不应提出的问题的例子： +以下是一些在面试结束时不要问的问题的例子： -### 在早期避免询问薪水和福利问题 +### 避免过早询问薪资和福利 -只有在团队已经希望雇用您时（即在流程的最后），才开始讨论薪水，除非他们询问您的薪水要求。 +只有当团队已经热衷于聘用你时（即在流程结束时），才开始讨论薪资，除非他们询问你的薪资要求。 -- “初始薪水是多少？” -- “您能告诉我有关您的医疗保健保险的情况吗？” -- “您的带薪休假政策是什么？” -- “如果我得到这份工作，我什么时候可以请假？” -- 你们多长时间发放一次加薪？ -- 你们多长时间发放一次奖金？ -- “我可以期望哪些福利和优惠？” +* 起薪是多少？ +* 你能告诉我你的健康保险吗？ +* 你们的带薪休假政策是什么？ +* 如果我得到这份工作，我什么时候可以休假？ +* 你多久加一次薪？ +* 你多久发一次奖金？ +* 我能期待什么样的福利？ -### 避免询问应该公开的问题 +### 避免询问应公开的信息 -- “这家公司是做什么的？” -- “公司的办公室位于何处？” -- “公司的首席执行官是谁？” +* 这家公司是做什么的？ +* 公司的办公室在哪里？ +* 公司的首席执行官是谁？ diff --git a/packages/behavioral-interview-guidebook/contents/questions/en-US.langnostic.json b/packages/behavioral-interview-guidebook/contents/questions/en-US.langnostic.json new file mode 100644 index 000000000..787c61a5e --- /dev/null +++ b/packages/behavioral-interview-guidebook/contents/questions/en-US.langnostic.json @@ -0,0 +1,44 @@ +{ + "frontmatter": { + "title": "9b50d4e6", + "description": "12a0ec43", + "seo_title": "9b50d4e6", + "social_title": "9bd5fe4d", + "seo_description": "12a0ec43" + }, + "content": { + "source": { + "locale": "en-US", + "hashes": [ + "ed63c694", + "60c2ed13", + "24aa233a", + "a80ffc1", + "61cd42e9", + "5acd00cd", + "46b091bd", + "c410b8f7", + "5827200e", + "e69de77e", + "95356240", + "98cc5dcb" + ] + }, + "targets": { + "zh-CN": [ + "ed63c694", + "60c2ed13", + "24aa233a", + "a80ffc1", + "61cd42e9", + "5acd00cd", + "46b091bd", + "c410b8f7", + "5827200e", + "e69de77e", + "95356240", + "98cc5dcb" + ] + } + } +} diff --git a/packages/behavioral-interview-guidebook/contents/questions/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/questions/zh-CN.mdx index 7f3bebb16..3d63f1535 100644 --- a/packages/behavioral-interview-guidebook/contents/questions/zh-CN.mdx +++ b/packages/behavioral-interview-guidebook/contents/questions/zh-CN.mdx @@ -1,56 +1,59 @@ --- -title: 准备面试的最重要的行为面试问题 -description: 前端开发人员/网络开发人员/软件工程师应该练习的顶级行为面试问题。 包括针对有经验的工程师的额外问题。 +title: 准备面试的重要行为面试问题 +description: 通过先解决最常问的问题，为你的行为面试做好充分准备 +seo_title: 准备面试的重要行为面试问题 +social_title: 重要的行为面试问题 | GreatFrontEnd +seo_description: 通过先解决最常问的问题，为你的行为面试做好充分准备 --- -在本文中，我们将覆盖候选人在面试之前应该练习的顶级问题（按照高频率排列）。 +在本文中，我们将介绍候选人在面试前应该练习的常见问题（按出现频率排序）。 -正如[行为面谈准备概览](/behavioral-interview-guidebook/)中所提到的那样，大多数行为面谈问题可分为八个主题，以进行有效的准备工作。 我们建议候选人利用这一战略，然后请参阅下面的名单以供实践。 +正如在 [行为面试准备概述](/behavioral-interview-guidebook/) 中所暗示的那样，大多数行为面试问题可以分为 8 个主要主题，以便有效准备。我们建议候选人使用此策略进行准备，然后参考下面的列表进行练习。 -## 最常见的 16 个问题 +## 前 16 个最常见的问题 -1. 向我介绍你自己。 -2. 请告诉我你的简历经历。 -3. 您为什么申请了这个角色和团队？ -4. 你有什么问题要问我吗？ (面试结束) -5. 你能告诉我一个你在收到批评或反馈后改进工作的例子吗? -6. 您能否描述过去的一个项目，在这个项目中，您必须与困难的利益攸关方或团队合作，以及如何处理它？ -7. 你能描述一下你创造性地解决了一个工程问题或实现了有意义的指标改进的时间吗？ -8. 你能描述一下你不得不做出一个重要的工程决定的时候，以及你是如何在各种权衡之间做出决定的吗？ -9. 你能举出一个例子，说明你曾经不得不在一个团队项目中工作，并不得不与他人妥协以达成解决方案？ -10. 你认为你最需要改进的地方是什么？ -11. 描述一次你失败了，不得不改变路线并采用新的方法。 你怎么知道改变是必要的？ -12. 你能描述一下你不得不在紧迫的时间内工作，但却没有得到明确的工作方向的时候吗？ -13. 你能描述一下你不得不适应不断变化的优先事项或要求的时候吗？ -14. 请告诉我，你在工作之外学习了一项新技能，并将其应用到工作中。 -15. 请告诉我，你是如何在观察到别人利用新技能获得巨大成功后学会了新技能的。 -16. 你能描述一下你不得不向非技术性听众有效传达技术信息的时候，以及你是如何处理的吗？ +1. 介绍一下你自己。 +2. 浏览一下你的简历。 +3. 你为什么申请这个职位和团队？ +4. 你有什么问题要问我吗？（面试结束） +5. 你能告诉我你收到批评或反馈后改进工作的一次经历吗？ +6. 你能描述一个你必须与难相处的利益相关者或队友合作的过去的项目，以及你是如何处理的吗？ +7. 你能描述一个你创造性地解决了工程问题或实现了有意义的指标改进的经历吗？ +8. 你能描述一个你必须做出重要的工程决策以及你如何在权衡利弊之间做出决定的经历吗？ +9. 你能举一个你必须在团队项目中工作并且必须与他人妥协以达成解决方案的例子吗？ +10. 你认为你最大的改进领域是什么？ +11. 描述一个你失败并不得不改变方向并采用新方法的时间。你如何知道改变是必要的？ +12. 你能描述一个你必须在紧张的时间表内工作但没有得到明确的如何进行指示的经历吗？ +13. 你能描述一个你必须适应不断变化的优先级或要求的经历吗？ +14. 告诉我你学习了工作之外的新技能并将其应用于你的工作的一次经历。 +15. 告诉我你观察到其他人利用它取得巨大成功后学习了一套新技能的一次经历 +16. 你能描述一个你必须有效地向非技术受众传达技术信息以及你如何处理它的经历吗？ -## 给领导（技术负责人或工程经理）的其他问题 +## 领导者的附加问题（技术负责人或工程经理） -### 团队管理和领导 +### 团队管理和领导力 -17. 你如何对待为你的团队制定和实现目标的过程？ -18. 你能告诉我，有一次你不得不在预算紧张或资源有限的情况下工作，以实现一个目标？ -19. 你如何对待与你的团队和利益相关者的合作和沟通？ -20. 描述一下你不得不处理一个表现不佳的团队成员的时候。 -21. 你能描述一下你不得不调整你的管理风格以适应你的团队的需要的时候吗？ +17. 你如何处理为你的团队设定和实现目标的过程？ +18. 你能告诉我你必须在紧张的预算或有限的资源下实现目标的一次经历吗？ +19. 你如何处理与你的团队和利益相关者的协作和沟通？ +20. 描述一个你必须处理表现不佳的团队成员的经历。 +21. 你能描述一个你必须调整你的管理风格以适应你的团队需求的经历吗？ -### 跨职能部门的合作 +### 跨职能协作 -22. 你是如何对待收集并将用户或客户的反馈纳入你的工作的过程的？ -23. 你能举个例子，说明你不得不在业务需求和工程复杂性之间取得平衡的时候吗？ +22. 你如何处理收集用户或客户反馈并将其纳入你的工作流程？ +23. 你能举一个你必须平衡业务需求和工程复杂性的一次经历吗？ -## 练习的附加问题 +## 额外的练习题 -我们将最常见的行为问题归纳为 8 大主题。 在学习时查看更多的练习题： +我们将最常见的行为问题归纳为 8 个主要主题。在学习它们的同时，查看其他练习题： -- [“介绍一下你自己…”] \(/behavioral-interview-guidebook/self-introduction) -- “让我来看一下你的简历…” -- [“为什么加入这个团队或公司？”] \(/behavioral-interview-guidebook/why-work-here) -- [“你有什么问题要问我的吗？”] \(/behavioral-interview-guidebook/questions-to-ask) -- "当你...... 的时候告诉我" （分类为以下主题） - - [实现目标和解决问题](/behavioral-interview-guidebook/problem-solving) - - [合作](/behavioral-interview-guidebook/collaboration) - - [成长心态](/behavioral-interview-guidebook/growth-mindset) - - 适应能力和灵活性 +* [“介绍一下你自己……”](/behavioral-interview-guidebook/self-introduction) +* “浏览一下你的简历……” +* [“为什么加入这个团队或公司？”](/behavioral-interview-guidebook/why-work-here) +* [“你有什么问题要问我吗？”](/behavioral-interview-guidebook/questions-to-ask) +* “告诉我一个时间……”（分为以下主题） + * [推动结果和解决问题](/behavioral-interview-guidebook/problem-solving) + * [协作](/behavioral-interview-guidebook/collaboration) + * [成长心态](/behavioral-interview-guidebook/growth-mindset) + * 适应性和灵活性 diff --git a/packages/behavioral-interview-guidebook/contents/self-introduction/en-US.langnostic.json b/packages/behavioral-interview-guidebook/contents/self-introduction/en-US.langnostic.json new file mode 100644 index 000000000..b8d3d62bd --- /dev/null +++ b/packages/behavioral-interview-guidebook/contents/self-introduction/en-US.langnostic.json @@ -0,0 +1,102 @@ +{ + "frontmatter": { + "title": "115c2b1d", + "description": "762b980b", + "seo_title": "8e5a4529", + "seo_description": "cc792019", + "social_title": "abfb9715" + }, + "content": { + "source": { + "locale": "en-US", + "hashes": [ + "aac46f7a", + "a50d1fd4", + "82c95b25", + "f7f88325", + "592260e0", + "b300ca", + "55a681ab", + "4c8d2b2f", + "bddb8c4d", + "d761b0ba", + "cc5308c2", + "b1c5ec39", + "c5f1bc22", + "1f0e09d4", + "8714198c", + "7c5ec3df", + "7534ac72", + "ebc3664d", + "86f5f880", + "c93680ca", + "daa6bfc7", + "d7142007", + "c2a4a55d", + "2a26965a", + "e6276c98", + "b2442566", + "71677eb0", + "dea5a0b", + "51feaed8", + "20884d2e", + "2f0b803e", + "bd43d29b", + "7807f9a8", + "d8563046", + "4c9b8362", + "a6d801f3", + "81d2718a", + "1a8f1cd", + "de2fcc10", + "12828ca", + "6e936a03" + ] + }, + "targets": { + "zh-CN": [ + "aac46f7a", + "a50d1fd4", + "82c95b25", + "f7f88325", + "592260e0", + "b300ca", + "55a681ab", + "4c8d2b2f", + "bddb8c4d", + "d761b0ba", + "cc5308c2", + "b1c5ec39", + "c5f1bc22", + "1f0e09d4", + "8714198c", + "7c5ec3df", + "7534ac72", + "ebc3664d", + "86f5f880", + "c93680ca", + "daa6bfc7", + "d7142007", + "c2a4a55d", + "2a26965a", + "e6276c98", + "b2442566", + "71677eb0", + "dea5a0b", + "51feaed8", + "20884d2e", + "2f0b803e", + "bd43d29b", + "7807f9a8", + "d8563046", + "4c9b8362", + "a6d801f3", + "81d2718a", + "1a8f1cd", + "de2fcc10", + "12828ca", + "6e936a03" + ] + } + } +} diff --git a/packages/behavioral-interview-guidebook/contents/self-introduction/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/self-introduction/zh-CN.mdx index 566484d4c..9b431a09f 100644 --- a/packages/behavioral-interview-guidebook/contents/self-introduction/zh-CN.mdx +++ b/packages/behavioral-interview-guidebook/contents/self-introduction/zh-CN.mdx @@ -1,135 +1,141 @@ --- -title: 在自我介绍中给人留下深刻的第一印象的技巧 -description: 如何在不同的面试背景下有效地构建你的面试自我介绍，对于前端/网络开发者/软件工程师来说。 参照好的自我介绍的例子。 +title: 回答“介绍一下你自己” +description: 一份关于如何在不同面试环境中有效回答自我介绍问题的指南，面向前端工程师。 +seo_title: 如何回答“介绍一下你自己” | 行为面试 +seo_description: 一份关于如何在不同面试环境中有效回答自我介绍问题的指南，面向前端工程师。由来自 Big Tech 的前面试官撰写。 +social_title: 回答“介绍一下你自己” | GreatFrontEnd --- -自我介绍是你在面试中总是可以期望遇到的事情之一，无论面试形式如何。 因此，为其做准备的投资回报率是相当高的。 大多数时候，你的自我介绍应该短小精悍，用最少的文字给人留下好印象。 +无论面试形式如何，自我介绍都是你总能遇到的事情之一。因此，为此做准备的投资回报率相当高。大多数时候，你的自我介绍应该简短扼要，用最少的字数传递良好的印象。 -在这篇文章中，你会发现： +在本文中，你将找到： -1. 建议为不同的面试环境做准备 -2. 1 分钟推销（自己）的话术方案 -3. 作品集或案例研究展示 -4. 好的自我介绍的例子 -5. 来自招聘经理的提示和故事 +1. 针对不同面试场景的推荐准备 +2. 1 分钟推介公式 +3. 投资组合或案例研究展示 +4. 好的自我介绍示例 +5. 来自招聘经理的提示和故事 -## 建议的准备工作 +## 推荐准备 -从本质上讲，你应该始终准备一个自我介绍，几乎在所有情况下都要在**1 分钟之内**。 +本质上，你应始终准备一个**在几乎所有情况下都不到 1 分钟**的自我介绍。 -在面试之前，最好从招聘人员或招聘经理那里了解更多关于该轮面试的评估标准--特别是你是否会被评估为行为/适合方面，或者纯粹是技术标准。 在大型科技公司，编码回合可能完全不包括行为相关的标准，因此你的自我介绍很可能只是作为主要面试的 "热身"。 +在面试之前，最好从招聘人员或招聘经理那里了解更多关于该轮的评估标准——特别是你是否会根据行为/适合度方面或纯粹的技术标准进行评估。在大型科技公司中，编码轮次可能完全排除与行为相关的标准，因此你的自我介绍很可能只是作为主要面试的“热身”。 -然而，在行为面试或技术面试中，在创业公司或优先考虑实践经验而不是 LeetCode 式的面试的公司，你可能想把你的自我介绍扩展为**快速的投资组合展示**，或暗示你有一个项目组合，他们可以在面试后查看，或在面试结束时分配 5 分钟左右的时间来进行介绍。 +但是，在行为面试或初创公司或更看重实践经验而非 LeetCode 风格面试的公司的技术面试中，你可能希望将你的自我介绍扩展到**快速展示你的作品集**，或者暗示你有一个项目组合，他们可以在面试后查看，或者在面试结束时分配大约 5 分钟的时间来浏览。 -然而，请注意，无论在哪种情况下，如果你在这一轮做固定格式的编码面试，你应该保持自我介绍的简短，以确保你在实际的编码测试中有**多的时间**。 你花在自我介绍上的任何额外时间都会从你回答技术问题的时间中被剥夺。 +但是，请注意，在任何情况下，如果你在该轮次中进行固定格式的编码面试，你应该保持你的自我介绍简短，以确保你有**更多时间进行实际的编码测试**。你在自我介绍上花费的任何额外时间都将从你回答技术问题的时间中扣除。 - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + +
面试格式公司类型时长内容
编程或技术面试大型科技公司，有固定评估标准< 1 分钟1 分钟自我介绍
其他类型，可能不太强调标准的 LeetCode 风格编程测试约 1 分钟1 分钟自我介绍 + 展示作品集
行为或文化适配面试任何公司约 1 分钟1 分钟自我介绍 + 展示作品集
面试形式公司类型时长内容
编码或技术面试具有固定评估标准的大型科技公司\< 1 分钟1 分钟推介
其他可能不太强调标准 LeetCode 风格的编码测试~1 分钟1 分钟推介 + 暗示作品集展示
行为或文化契合度面试任何~1 分钟1 分钟推介 + 暗示作品集展示
-为了应对所有可能的情况，你应该准备一个 1 分钟的演讲和一个项目组合（建议但可选）。 +为了应对所有可能的情况，你应该准备一个 1 分钟的推介和一份项目组合（推荐但可选）。 -## 一分钟的推销话术 +## 1 分钟推介 -### 大局观 +### 概览 -大多数情况下，话术将涵盖这 4 项内容： +大多数时候，推介将涵盖这 4 个项目： -1. 工作经验的广度和深度 -2. 最高成就 -3. 如果工作经验不足 5 年，教育背景 -4. 申请职位的动机 +1. 工作经验的广度和深度 +2. 顶级成就 +3. 如果工作经验少于 5 年，则为教育背景 +4. 申请该职位的动机 -在制定你的推销方案时，要牢记目标--你要给人留下**好的第一印象**，成为这个职位的潜在理想人选。 要做到这一点，你应该在展示角色的关键要求的基础上，表现出自信、可亲。 想一想，如果你要雇用这个角色的候选人，你会注意些什么？ +在开发你的推介时，请记住目标——你想给潜在的理想候选人留下**良好的第一印象**。为此，你应该表现得自信、讨人喜欢，并且掌握该职位的关键要求。想想如果你要为这个职位招聘候选人，你会注意什么？ -不要试图讲得太深--专注于涵盖主要观点，并自信而流畅地阐述它们。 作为软件工程师，我们通过项目和代码来证明我们的能力。 过早地谈论太多，可能会让人觉得过于急切，而光说不练没有什么价值。 +不要试图深入探讨——专注于涵盖要点，并自信流畅地阐述它们。作为软件工程师，我们通过项目和代码来证明我们的实力。过早地谈论过多可能会显得过于急切，而仅仅是言语本身并没有多大价值。 -从本质上讲，对于招聘经理来说，自我介绍的作用是为他们回答这些关于候选人的问题： +从本质上讲，对于招聘经理来说，自我介绍是为了回答他们关于候选人的这些问题： -1. 这位候选人是否对前端/软件工程充满热情？ -2. 他们能否以清晰简明的方式描述事情？ -3. 他们是什么样的人？ 自信还是傲慢？ -4. 我想和这个人一起工作吗？ 他们看起来适合被训练吗？ +1. 这个候选人对前端/软件工程充满热情吗？ +2. 他们能以清晰简洁的方式描述事物吗？ +3. 他们是什么样的人？自信还是自负？ +4. 我想和这个人一起工作吗？他们看起来容易被指导吗？ -### 前端/网络开发人员的话术要点示例 +### 前端/Web开发人员的示例推介要点 -在特定角色的要求之上，如团队特定的框架和技术，前端招聘经理通常关注以下**4 个标准**： +除了特定于角色的要求（例如特定于团队的框架和技术）之外，前端招聘经理通常关注以下 **4 个标准**： -| 标准 | 例子 | +| 标准 | 示例 | | --- | --- | -| 了解前端的基本原理：HTML、CSS、JavaScript 和相关领域 | "我建立前端应用程序已经有几年了，也为 Lodash 和 jQuery 等流行的开源项目做出了贡献。"

"我是我的大学的网络开发课程的教学助理，指导学生从事涉及建立全栈 Web 应用的项目。" | -| 候选人了解的前端技术的广度和深度 | "我使用 React、Tailwind、Next.js、Prisma 和 MySQL 建立一个 Twitter 克隆，作为我的软件工程团队项目的一部分。" | -| 主动跟上现代前端技术的步伐 | "我学习了 Astro，并使用它重建了我的个人博客，因为 Astro 对于建立内容驱动的网站非常好。" | -| 候选人从事过的相关前端项目，这些项目的复杂性 | "在业余时间，我在 React 中建立了一个加密货币价格跟踪应用程序，以学习如何建立数据可视化重的客户应用程序，也解决了跟踪我的投资组合的个人痛点。" | +| 了解前端基础知识：HTML、CSS、JavaScript 和相关领域 | “我已经构建前端应用程序几年了，并且还为流行的开源项目（如 Lodash 和 jQuery）做出了贡献。”

“我曾是大学 Web 开发课程的助教，并指导学生进行涉及构建全栈 Web 应用程序的项目。” | +| 候选人掌握的前端技术的广度和深度 | “我使用 React、Tailwind、Next.js、Prisma 和 MySQL 构建了一个 Twitter 克隆，作为我的软件工程团队项目的一部分。” | +| 积极跟进现代前端技术 | “我学习了 Astro，并使用它重建了我的个人博客，因为 Astro 非常适合构建以内容为导向的网站。” | +| 候选人参与的与前端相关的项目、这些项目的复杂性 | “在业余时间，我用 React 构建了一个加密货币价格跟踪应用程序，以学习如何构建数据可视化密集型客户端应用程序，并解决跟踪我的投资组合的个人痛点。” | -请参考下面好的自我介绍的例子。 +请参考以下内容，了解良好的自我介绍示例。 ## 作品集展示 -如果你想要展示你的作品集，你需要确保你的作品集简洁易懂，在面试过程中能够快速地浏览。 +如果要扩展到作品集的展示，您需要确保您的作品集简洁，并且在面试期间易于浏览 每个项目的描述应包括： -- 项目的目的：它为用户做什么 -- 使用的框架/技术 -- 涉及的技术复杂性 +* 项目目的：它为用户做什么 +* 使用的框架/技术 +* 涉及的技术复杂性 -请参考这篇文章，以更详细地了解如何进行作品集展示（即将推出）。 +请参阅本文，以更详细地了解如何进行作品集展示（即将推出）。 -## 好的自我介绍的例子 +## 良好的自我介绍示例 ### 对于经验丰富的工程师 -> 我在 Airbnb 工作了 6 年，担任前端工程师，是重新设计 Airbnb 预订体验项目的首席开发者。 作为工作的一部分，我为 Airbnb 的主要设计系统做出了贡献，建立了几个 UI 组件，如旋转木马，评级小工具，并重构了现有的组件。 我也有为 Airbnb 的开源前端项目（如 Enzyme 和 react-dates）作出贡献的经验。 +> 我在 Airbnb 担任前端工程师 6 年，并且是重新设计 Airbnb 预订体验项目的首席开发人员。作为我工作的一部分，我通过构建几个 UI 组件（如轮播、评级小部件和重构现有组件）为 Airbnb 的主要设计系统做出了贡献。我也有贡献于 Airbnb 的开源前端项目（如 Enzyme 和 react-dates）的经验。 > -> 在业余时间，我喜欢学习新的前端技术，追赶不断发展的前端生态系统。 最近，我一直在探索新的 JavaScript 框架，如 Astro 和 SolidJS，让自己接触到构建用户界面的新方法，提高我作为前端工程师的技能。 +> 在业余时间，我喜欢学习新的前端技术，并赶上不断发展的前端生态系统。最近，我一直在探索新的 JavaScript 框架，如 Astro 和 SolidJS，以让自己接触到构建用户界面的新方法，并提高我作为前端工程师的技能。 -### 针对应届毕业生/大学生 +### 对于应届毕业生/大学生 -> 我于 2020 年毕业于东北大学，获得计算机科学学位。 我的兴趣是前端开发，我喜欢在网络上建立令人愉快的产品，因为可以自由地开发任何想到的东西，并且有快速的反馈回路。 +> 我于 2020 年毕业于东北大学，获得计算机科学学位。我对前端开发很感兴趣，并且喜欢在 Web 上构建令人愉悦的产品，因为可以自由地开发任何想到的东西，并且反馈循环很快。 > -> 我在学校时参加了一个网络开发课程，这让我学到了全栈开发的基础知识。 凭借这些技能，我成功地在 Uber 和 Palantir 等公司获得了软件工程实习机会。 在 Uber，我使用 React、Redux 和 GraphQL 建立了一个内部工具，帮助开发者管理他们的测试骑手和司机账户。 +> 我在学校上了一门 Web 开发课程，这门课程教我全栈开发的基础知识。凭借这些技能，我设法获得了 Uber 和 Palantir 等公司的软件工程实习机会。在 Uber，我构建了一个内部工具，使用 React、Redux 和 GraphQL 帮助开发人员管理他们的测试骑手和司机帐户。 > -> 我对谷歌的前端工程师职位感兴趣，因为我每天都在使用谷歌的产品，并且对他们精心设计的产品体验印象深刻。 能在这种影响数十亿人生活的产品上工作，那将是一个梦想成真。 +> 我对 Google 的前端工程师职位很感兴趣，因为我每天都使用 Google 产品，并且对他们深思熟虑的产品体验印象深刻。能够从事影响数十亿人生活的产品，将是一个梦想成真。 ## 听取招聘经理的意见 -> 通常情况下，我把自我介绍作为一个简单的热身活动来启动面试。 不需要技术技能，但它测试了沟通和以清晰简洁的方式描述事物的能力。 +> 通常，我使用自我介绍作为轻松的热身，以启动面试。不需要任何技术技能，但它测试了沟通能力和以清晰简洁的方式描述事物的能力。 -- 工程经理，LinkedIn。 +— 领英工程经理。 -> 候选人在介绍自己的时候不应该说得太深，因为这绝不是为了深入了解，只是快速概述一下。 +> 候选人在介绍自己的时候不应该过于冗长，因为它从来都不是一个深入的探讨，而只是一个快速的概述。 -- 人才招聘，Coinbase。 +— 人才招聘，Coinbase。 -> 结束前列出你所用过的技术栈或项目，以及你希望将来从事的工作/想要发展的职业方向，可能是一个好的建议。 +> 最好以你使用过的技术栈或项目，以及你希望在未来从事的工作/你希望你的职业生涯走向何方来结束。 -- 工程经理，确实如此。 +— 工程经理，Indeed。 -> 你的面试官也是一个人。 面试官心目中最重要的事情是他们是否希望这个人加入他们的团队--这不仅仅是技能的问题。 我们想知道你是谁，然后你有什么能力。 当然，加入与工作相关的个人风格是最好的。 +> 你的面试官也是一个人。面试官最关心的是他们是否希望这个人加入他们的团队——这不仅仅是关于技能。我们想知道你是谁，然后你有什么能力。当然，加入与工作相关的个人风格是最好的。 -- 高级工程师，Dropbox。 +— 高级工程师，Dropbox。 diff --git a/packages/behavioral-interview-guidebook/contents/why-work-here/en-US.langnostic.json b/packages/behavioral-interview-guidebook/contents/why-work-here/en-US.langnostic.json new file mode 100644 index 000000000..2cfd86107 --- /dev/null +++ b/packages/behavioral-interview-guidebook/contents/why-work-here/en-US.langnostic.json @@ -0,0 +1,62 @@ +{ + "frontmatter": { + "title": "1c33781b", + "description": "1df505af", + "seo_title": "cb96ed99", + "seo_description": "ab47f969", + "social_title": "25c5cbb4" + }, + "content": { + "source": { + "locale": "en-US", + "hashes": [ + "cd79c89f", + "72609533", + "4477ce22", + "64cffea3", + "bd456ea8", + "b2f3619d", + "e96c88dc", + "dadcb4ad", + "6307ab52", + "e7eacea6", + "a7a43d66", + "8a1f2a28", + "286d7d0f", + "675413b3", + "c2058a5a", + "22597e29", + "4784c77e", + "f66e2fc7", + "59163994", + "a0f00b8", + "e0ebcbcb" + ] + }, + "targets": { + "zh-CN": [ + "cd79c89f", + "72609533", + "4477ce22", + "64cffea3", + "bd456ea8", + "b2f3619d", + "e96c88dc", + "dadcb4ad", + "6307ab52", + "e7eacea6", + "a7a43d66", + "8a1f2a28", + "286d7d0f", + "675413b3", + "c2058a5a", + "22597e29", + "4784c77e", + "f66e2fc7", + "59163994", + "a0f00b8", + "e0ebcbcb" + ] + } + } +} diff --git a/packages/behavioral-interview-guidebook/contents/why-work-here/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/why-work-here/zh-CN.mdx index 7d5cff5df..9e7d6ca04 100644 --- a/packages/behavioral-interview-guidebook/contents/why-work-here/zh-CN.mdx +++ b/packages/behavioral-interview-guidebook/contents/why-work-here/zh-CN.mdx @@ -1,62 +1,65 @@ --- -title: 如何在行为面试中回答“为什么想在这里工作” -description: 学习如何简洁有效地回答有关公司动机的问题，适用于前端/网络开发人员/软件工程师。 由大型科技公司的前面试官撰写。 +title: 回答“为什么在这里工作” +description: 了解为前端工程师简洁有效地回答有关公司动机的问题的最佳方法。 +seo_title: 如何回答“为什么在这里工作”| 行为面试手册 +seo_description: 了解为前端工程师简洁有效地回答有关公司动机的行为面试问题的最佳方法。 +social_title: 回答“为什么在这里工作”| GreatFrontEnd --- -作为招聘经理，“为什么想在这里工作”是一个极其常见的问题，可能在超过 70％的面试中被问到。 然而，大多数候选人未能回答正确。 在本文中，您将从前面试官那里学习如何有效而简洁地回答此问题，适用于前端工程师/软件工程师： +作为招聘经理，“你为什么想在这里工作”是一个非常常见的问题，可能在 70% 以上的面试中都会被问到。然而，大多数候选人未能很好地回答这个问题。在本文中，您将从前面试官那里学习如何以有效和简洁的方式回答这个问题，适用于前端工程师/软件工程师： -1. 面试官的意图 -2. 建议的答案框架 -3. 示例问题和答案 +1. 面试官的意图 +2. 建议的答案框架 +3. 示例问题和答案 ## 面试官的意图 -大多数面试官询问此问题时，都有一个单一的目标-通过你加入公司的动机来更好地了解你。 他们想知道您是否足够感兴趣去做研究，或者是否有特殊原因构成了您的强烈动机。 +大多数面试官问这个问题只有一个目的——通过你加入公司的动机来更多地了解你。他们想知道你是否足够感兴趣去做你的研究，或者是否有特殊原因构成了你强大的动力。 ## 建议的答案框架 -要成功，建立答案有 3 个基本步骤： +要取得成功，构建你的答案有 3 个基本步骤： -### 1. 答案应在 60 至 90 秒之间 +### 1. 它应该需要 60 到 90 秒 -不要超过 60 至 90 秒。 任何超过这个时间可能都构成了一个独白。 供参考，1 分钟约 15 句话。 +永远不要超过 60 到 90 秒。任何更长的时间都可能构成独白。作为参考，1 分钟大约是 15 个陈述。 -### 2. 从公司的现任/前任员工那里收集有关公司/团队/职位的深入了解 +### 2. 从公司/团队/职位现任/前任员工那里收集关于公司/团队/职位的深刻见解 -如果您以前是面试官，您会知道，大多数候选人在“为什么想在这个公司/团队工作”这个问题上表现不佳，因为他们倾向于基于公司的公共信息回答该问题，这可能不一定代表个人团队或部门的文化或情况。 例如，想象一下，您正在评估两名游戏开发团队的候选人： +如果你以前是面试官，你就会知道大多数候选人在“你为什么想在这家公司/团队工作”这个问题上没有给人留下深刻印象，因为他们倾向于根据公司的公开信息来回答这个问题，而这可能不一定能代表个人团队或部门的文化或情况。例如，假设你正在评估 2 名游戏开发团队的候选人： -1. 候选人 A：“A 公司非常环保，我希望成为地球拯救行动的一部分”（作为团队经理，您知道您的团队成员从未谈论过地球拯救，因为您的工作与此完全无关） -2. 候选人 B：“A 团队正在基于 B 技术开发游戏，这是我恰好非常感兴趣的。” +1. 候选人 A：“A 公司非常环保，我想成为拯救地球的努力的一部分”（作为团队经理，你知道你的团队成员从未谈论过拯救地球，因为你的工作与此完全无关） +2. 候选人 B：“B 团队正在开发基于 B 技术的游戏，而这正是我非常感兴趣的。” -为了成为真正对该角色感兴趣的人，请努力寻找与您要加入的团队相关的见解，并利用它来证明您的兴趣（因此也适合）。 +为了脱颖而出，成为一个真正对这个角色感兴趣的人，你应该尽可能努力寻找特定于你所加入的团队的见解，并以此来证明你的兴趣（以及由此产生的适合度）。 -#### 这里是获取团队特定见解的一些常见途径： +#### 以下是一些获取团队特定见解的常见途径： -1. 从职位描述中获取有关团队堆栈或实践的更多见解（在某些情况下，可能存在许多您可以利用的细节） -2. 在 LinkedIn 上搜索团队，了解他们的个人工作范围、过去的项目、背景和兴趣爱好 -3. 在做了基本在线研究后，尝试得分信息性访谈、咖啡聊天或短视频通话与团队成员交流 -4. 在 Blind 上甚至 Reddit 上搜索团队（尽可能具体地查询） +1. 从职位描述中获得更多关于团队的技术栈或实践的见解（在某些情况下，你可以利用很多细节） +2. 在领英上搜索团队，了解更多关于他们的个人工作范围、过去的项目、背景和兴趣 +3. 尝试与团队成员进行信息面试或咖啡聊天或简短的视频通话（在进行基本的在线研究之后） +4. 在 Blind 甚至 Reddit 上搜索团队（尽可能具体地进行查询） -#### 这里是一些有用的问题： +#### 这里有一些有用的问题可以问： -1. 与其他公司相比，开发人员在您的团队中能获得哪些独特的挑战或学习机会？ -2. 如果我加入你的团队，可以期望做哪些项目？ -3. 该团队的运作方式与公司的其他团队有何不同？ -4. 该团队是否与其他团队密切合作？ 是哪些团队以及如何合作？ -5. 你能带我走过一个典型项目的流程吗？ +1. 开发者在您的团队中与在其他公司相比，会遇到哪些独特的挑战或学习机会？ +2. 如果我加入您的团队，我可能会参与哪些类型的项目？ +3. 这个团队的运作方式与公司内的其他团队有何不同？ +4. 这个团队是否与其他团队紧密合作？与哪些团队合作，如何合作？ +5. 您能带我了解一个典型项目的流程吗？ -### 3. 简要解释为什么加入这家公司/职位/团队是您职业生涯的战略和逻辑步骤 +### 3. 简要解释为什么加入这家公司/职位/团队对您的职业生涯来说是一个战略性和合乎逻辑的步骤 -这样做，您还可以借此机会巩固面试官对您的热情或您为建立专业知识所做的努力的印象。 +通过这样做，您还可以借此机会巩固面试官对您对该领域的热情或您为建立专业知识所做努力的印象。 ## 示例问题和答案 -### “为什么想在 TikTok Shop 团队工作？” +### “你为什么想在 TikTok Shop 团队工作？” -> 我在学校期间做过近 4 年的自由职业网络开发人员。 作为个人贡献者，我已经积累了丰富的经验，接下来的步骤是作为更大团队的一部分进行更大、更复杂的项目，以将我的开发技能提升到更高的水平。 +> 我在学校期间做了将近 4 年的自由职业 Web 开发人员。作为一名个人贡献者，我积累了丰富的经验，对我来说，下一步是作为更大团队的一部分，参与更大、更复杂的项目，以将我的开发技能提升到一个新的水平。 > -> TikTok 商城对我来说最重要的三件事是： +> 对我来说，TikTok 商务的 3 大优势是： > -> 1. 我喜欢知道我的开发努力可以具体地推动影响。 在当前阶段，TikTok 商城仍处于产品生命周期的相对初级阶段，在这个阶段这是可能的。 -> 2. TikTok 商城服务于广大群众，必须处理与可访问性、本地化和相对新的电子商务等相关的挑战，这使我能够在该领域发展我的技能。 -> 3. 字节跳动（TikTok 的母公司）内部开发了许多尖端技术，并使用开源技术。 我很兴奋向公司经验丰富的工程师学习如何将这些技术扩展到世界范围内。 +> 1. 我想知道我的开发工作能够切实地推动影响。在目前阶段，TikTok Shop 仍处于产品生命周期的相对初期阶段，这是有可能的。 +> 2. TikTok Shop 服务于广大民众，并且必须应对相关的挑战，例如可访问性、本地化和以相对较新的形式进行的电子商务，这使我能够在该领域发展我的技能。 +> 3. 字节跳动（TikTok 的母公司）内部开发了许多尖端技术，并且也使用开源技术。我很高兴向公司经验丰富的工程师学习如何将这些技术扩展到全球受众。 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 new file mode 100644 index 000000000..09d71245d --- /dev/null +++ b/packages/front-end-interview-guidebook/contents/algorithms/en-US.langnostic.json @@ -0,0 +1,84 @@ +{ + "frontmatter": { + "title": "66d3c445", + "description": "afeed345", + "seo_title": "d46d01d5", + "seo_description": "a31753e4", + "social_title": "afcadb6e" + }, + "content": { + "source": { + "locale": "en-US", + "hashes": [ + "e23ac2c5", + "781315d", + "b6465b86", + "13cff95f", + "493e8bd0", + "3410e584", + "c97eaa3d", + "d48a7b71", + "421ceb04", + "7e75ddb2", + "fe80380a", + "f0bcd2ed", + "7d9cb0ec", + "4ca7a565", + "b6dbe2f3", + "bf28427a", + "1ec4f54b", + "2b74a214", + "e1befcaf", + "6aa83ba1", + "e2bac672", + "71a2a58", + "9182d691", + "206a5a5b", + "5fffab6e", + "686cd762", + "12ba9aaa", + "51300c2d", + "193688c6", + "3276416d", + "a004e1c1", + "db9fea03" + ] + }, + "targets": { + "zh-CN": [ + "e23ac2c5", + "781315d", + "b6465b86", + "13cff95f", + "493e8bd0", + "3410e584", + "c97eaa3d", + "d48a7b71", + "421ceb04", + "7e75ddb2", + "fe80380a", + "f0bcd2ed", + "7d9cb0ec", + "4ca7a565", + "b6dbe2f3", + "bf28427a", + "1ec4f54b", + "2b74a214", + "e1befcaf", + "6aa83ba1", + "e2bac672", + "71a2a58", + "9182d691", + "206a5a5b", + "5fffab6e", + "686cd762", + "12ba9aaa", + "51300c2d", + "193688c6", + "3276416d", + "a004e1c1", + "db9fea03" + ] + } + } +} 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 d46d1372b..a8f8f625e 100644 --- a/packages/front-end-interview-guidebook/contents/algorithms/zh-CN.mdx +++ b/packages/front-end-interview-guidebook/contents/algorithms/zh-CN.mdx @@ -1,117 +1,124 @@ --- -title: 前端面试算法编码问题——如何准备 -description: 这是前端/网站开发者面试中准备算法编码问题的指南，包括需要了解的概念、面试评分标准和重要的实践问题。 +title: 数据结构与算法面试 +description: 前端工程师的 DSA 指南 - 需要了解的重要概念、要做的顶级练习题和其他技巧 +seo_title: 前端面试的数据结构与算法 +seo_description: 为前端面试量身定制的数据结构与算法问题准备指南 - 需要了解的重要概念、常见的面试问题和有用的技巧 +social_title: 破解数据结构与算法 | 前端面试手册 --- -算法编码问题就是可以在 LeetCode 上找到的问题。 算法问题通常具有以下特征： +算法编码问题正是您可以在 LeetCode 上找到的问题。 算法问题通常具有以下特征： -- 它们不特定于前端领域；可以通过大多数主流编程语言求解。 -- 通常附带不切实际的情景。 你在实际开发中不会遇到这样的问题。 有谁曾经不得不反转二叉树或计算字符串中回文子串的数量呢？ -- 代码效率（时间和空间复杂度）很重要，要想得到最有效的解决方案需要扎实掌握数据结构和算法知识。 +* 它们并非特定于前端领域； 它们可以在大多数主流编程语言中解决。 +* 通常伴随着不切实际的场景。 您在现实世界的开发中不会遇到这样的问题。 谁曾经翻转过二叉树或计算过字符串中回文子串的数量？ +* 代码的效率（时间和空间复杂度）很重要，并且产生最有效的解决方案需要扎实的数据结构和算法知识。 -虽然算法编码问题不是前端特有的，但在这些问题中表现出色所需的技能——强大的分析思考能力、有效的沟通能力、熟练掌握常见的数据结构和算法、良好的代码卫生习惯，仍是优秀的前端工程师必须具备的关键技能。 优秀的前端工程师也是优秀的软件工程师，而优秀的软件工程师应该掌握基本的数据结构和算法。 因此，在面试过程中，很多公司仍然会问有关算法编码的问题。 熟悉数据结构和算法对于解决 JavaScript 编码问题和用户界面编码问题也有帮助。 +尽管算法编码问题并非特定于前端，但要擅长这些问题所需的技能——强大的分析思维、有效的沟通、对常见数据结构和算法的扎实掌握、良好的代码卫生，仍然是优秀前端工程师应该具备的关键技能。 优秀的前端工程师也是优秀的软件工程师，而优秀的软件工程师应该掌握基本的 DSA。 因此，许多公司在面试过程中仍然会问算法编码问题也就不足为奇了。 熟悉数据结构和算法也有助于解决 JavaScript 编码问题和用户界面编码问题。 -关于算法编码面试的资源有很多，因为它们不特定于前端，所以我们不会在这里详细介绍。 如果您想了解有关算法编码面试的更多信息，我们建议参考[Tech Interview Handbook](https://www.techinterviewhandbook.org)。 +那里有大量涵盖算法编码面试的资源，由于它们并非特定于前端，因此我们不会在此页面上详细介绍。 如果您想了解有关算法编码面试的更多信息，我们建议您参考 [Tech Interview Handbook](https://www.techinterviewhandbook.org) 作为免费资源。 ## 示例 -- 反转链表。 -- 判断字符串是否包含平衡的括号。 -- 计算字符串中有多少个子串是回文的。 +* 反转链表。 +* 确定字符串是否包含平衡括号。 +* 确定字符串中有多少个子字符串是回文。 ## 如何准备 -1. 选择一种好的编程语言。 如果你想节省准备时间，你可能应该坚持使用 JavaScript 来解决算法问题，尽管需要注意的是 JavaScript 语言不包含某些常见有用的数据结构和算法，而其他语言，如 Python、Java 和 C++则包含。 个人建议使用 Python 来解决算法面试问题。 -2. 规划时间并按优先级处理主题和问题。 -3. 将学习和练习结合在一起。 -4. 通过编码面试备忘清单来加深印象。 +1. 选择一种好的编程语言来使用。 如果您想节省准备时间，您可能应该坚持使用 JavaScript 来解决算法问题，尽管请注意，JavaScript 语言不包含某些常见的有用数据结构和算法，而 Python、Java 和 C++ 等其他语言则包含。 我们建议使用 Python 来解决算法面试问题 +2. 规划您的时间并按重要性顺序处理主题和问题 +3. 将学习和练习结合起来解决一个主题 +4. 伴随练习使用编码面试备忘单来内化必须做的事情和必须记住的事情 -请参考[Tech Interview Handbook 的逐步指南](https://www.techinterviewhandbook.org/coding-interview-prep/)，了解如何准备算法编码面试。 +请参阅 [Tech Interview Handbook 关于如何准备算法编码面试的分步指南](https://www.techinterviewhandbook.org/coding-interview-prep/)。 ## 重要概念 -尽管你仍然可能被问到任何算法问题，但公司倾向于对前端工程师候选人采取温和的态度，并且可能不会问与动态规划或复杂图形算法等困难的话题有关的问题。 +尽管您仍然可能被问到任何算法问题，但公司倾向于对前端工程师候选人放轻松，并且可能不会问到涉及诸如动态规划或复杂图算法之类的难题。 -由于 DOM 是一棵树，优先学习有关树和各种树遍历算法的知识。 +由于 DOM 是一棵树，因此优先学习树和各种树遍历算法。 -| 类别 | 重要话题 | -| -------- | ---------------------------------------------------- | -| 数据结构 | 数组、映射、堆栈、树、图、矩阵（2D 数组）、集合 | -| 算法 | 二分查找、广度优先搜索、深度优先搜索、拓扑排序、递归 | +| 类别 | 重要主题 | +| --- | --- | +| 数据结构 | 数组、映射、堆栈、树、图、矩阵（2D 数组）、集合 | +| 算法 | 二分查找、广度优先搜索、深度优先搜索、拓扑排序、递归 | ## 常见 JavaScript 操作 +请注意常见的 JavaScript 操作及其时间复杂度。 + ### `Array` -| 操作 | 时间复杂度 | -| --------------------------- | ---------- | -| `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) | +| 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) | -* `n`是数组中元素的数量，`m`是要添加的元素的数量。 +\* `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.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)，因为它返回一个迭代器。 获取所有的 key 将需要 O(n)时间。 | +| `Map.prototype.keys()` | O(1) 因为它返回一个迭代器。获取所有键将花费 O(n) 时间。 | | `Map.prototype.set()` | O(1) | -| `Map.prototype.values()` | O(1)，因为它返回一个迭代器。 获取所有 value 将花费 O(n)时间。 | +| `Map.prototype.values()` | O(1) 因为它返回一个迭代器。获取所有值将花费 O(n) 时间。 | -* `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.entries()` | O(1) 因为它返回一个迭代器。获取所有条目将花费 O(n) 时间。 | | `Set.prototype.forEach()` | O(n) | | `Set.prototype.has()` | O(1) | -| `Set.prototype.keys()` | O(1)，因为它返回一个迭代器。 获取所有的 key 将需要 O(n)时间。 | -| `Set.prototype.values()` | O(1)，因为它返回一个迭代器。 获取所有 value 将花费 O(n)时间。 | +| `Set.prototype.keys()` | O(1) 因为它返回一个迭代器。获取所有键将花费 O(n) 时间。 | +| `Set.prototype.values()` | O(1) 因为它返回一个迭代器。获取所有值将花费 O(n) 时间。 | -* `n`是集合中元素的数量。 +\* `n` 是集合中的元素数量。 -## 算法编码面试评分标准 +## 算法编码面试标准 -在算法编码面试中，面试官评估候选人的技能，包括： +在算法编码面试中，面试官会根据以下技能评估候选人： -- **问题解决**: 采用系统和逻辑的方法来理解和解决问题。 将问题分解为更小的独立问题。 评估不同方法及其权衡。 -- **技术能力**: 能够将解决方案转化为工作代码，并表现出对所使用语言的深刻理解。 -- **沟通**: 询问问题以澄清细节，并清楚地解释自己的方法和思考。 -- **验证**: 确定要针对代码进行测试的各种情况，包括边缘情况。 能够诊断和解决出现的任何问题。 +* **解决问题**：使用系统和逻辑的方法来理解和解决问题。将问题分解为更小的独立问题。评估不同的方法及其权衡。 +* **技术能力**：将解决方案转化为可运行的代码，并展示对所用语言的深刻理解。 +* **沟通**：提问以澄清细节，并清楚地解释自己的方法和考虑因素。 +* **验证**：确定各种场景来测试代码，包括边缘情况。能够诊断和修复出现的任何问题。 ## 有用的提示 -- **虚构的想法**。 JavaScript 的标准库不包含队列，堆，二分查找等一些有用的数据结构和算法，这可能会使您在 JavaScript 编码面试中感到困难。 但是，你可以问面试官是否可以假装这样的数据结构/算法存在，并直接在你的解决方案中使用它而不实现它。 -- **纯函数**。 编写纯函数，这样可以使函数具有可重复使用性和模块化性，也就是说，函数不依赖于函数外的状态，并且不会产生副作用。 -- **明智地选择数据结构**。注意选择数据结构并了解代码的时间复杂度。 熟悉 JavaScript 数组、对象、集合、映射的时间/空间复杂度，如有必要，可以在解决方案中使用它们。 其中一些时间/空间的复杂度在不同的语言中有所不同。 如果可以使用哈希映射在 O(n)的运行时内完成任务，就不要编写 O(n2)的代码。 -- **递归边界**。 - - 如果您已经确定解决问题需要递归，请询问输入大小和如何处理递归栈溢出的情况。 通常情况下，你不必处理它，但是提出这个问题是一个好的信号。 - - 深嵌套的数据结构可以具有递归引用它本身的特征，这使得某些操作如序列化变得更加棘手。 问问面试官你是否要处理这样的情况。 通常情况下，你不必处理它，但是提出这个问题是一个好的信号。 +* **一厢情愿**。JavaScript 的标准库没有一些有用的数据结构和算法，如队列、堆、二分查找，这可以在 JavaScript 编码面试中让你的生活更轻松。但是，你可以问面试官是否可以假装存在这样的数据结构/算法，并在你的解决方案中直接使用它，而无需实现它。 +* **纯函数**。 旨在编写纯函数，这些函数具有可重用性和模块化的好处，也就是不依赖于函数之外的状态且不会引起副作用的函数。 +* **明智地选择数据结构。** 注意你对数据结构的选择，并注意代码的时间复杂度。 熟悉基本的 JavaScript Array、Object、Set、Map 操作的时间/空间复杂度，以备你希望在你的解决方案中使用它们。 某些时间/空间复杂度在不同语言之间有所不同。 如果可以使用哈希映射在 O(n) 运行时内完成，请不要编写以 O(n2) 运行的代码。 +* **递归边缘情况**。 + * 如果你已经确定解决问题需要递归，请询问输入大小以及如何处理递归堆栈溢出的情况。 通常你不需要处理它，但提出这个问题是一个好信号。 + * 嵌套的深层数据结构可以对自身进行递归引用，这使得某些操作（如序列化）更加棘手。 询问面试官是否必须处理此类情况。 通常你不需要处理它，但提出这个问题是一个好信号。 -## 实践问题 +## 练习题 -目前，最好的练习算法问题的平台无疑是 LeetCode。 但是，GreatFrontEnd 提供一些[数据结构和算法的练习问题](/questions/formats/algo-coding)，在其中，您可以练习实现常见的数据结构（[堆栈](/questions/algo/stack)、[队列](/questions/algo/queue)）和算法（[二分查找](/questions/algo/binary-search)、[归并排序](/questions/algo/merge-sort)）等在 JavaScript 中的操作。 +Blind 75 是 Yangshun Tay 编写的著名且简洁的算法问题列表。你可以在 [GreatFrontEnd 上的 Blind 75 问题列表](/interviews/blind75) 中练习。 + +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 new file mode 100644 index 000000000..d21dbfc01 --- /dev/null +++ b/packages/front-end-interview-guidebook/contents/coding/en-US.langnostic.json @@ -0,0 +1,72 @@ +{ + "frontmatter": { + "title": "5b978b7d", + "description": "bd4c77b5", + "seo_title": "8f53137e", + "seo_description": "eb3fda14", + "social_title": "d537d635" + }, + "content": { + "source": { + "locale": "en-US", + "hashes": [ + "df39301b", + "f43009db", + "ce8a3251", + "b799ac87", + "f3a6fb60", + "86fbba68", + "f2b13208", + "4767e65e", + "24094bd8", + "d47ea373", + "1c35d4db", + "67dc567f", + "904f055b", + "60315899", + "2a7816d0", + "86ae5ea", + "aba7aeae", + "aa4e97ec", + "663dd5eb", + "c25cc2cf", + "ef51026e", + "13cd49a7", + "3276416d", + "a92ddc10", + "55a3f186", + "eb1412a7" + ] + }, + "targets": { + "zh-CN": [ + "df39301b", + "f43009db", + "ce8a3251", + "b799ac87", + "f3a6fb60", + "86fbba68", + "f2b13208", + "4767e65e", + "24094bd8", + "d47ea373", + "1c35d4db", + "67dc567f", + "904f055b", + "60315899", + "2a7816d0", + "86ae5ea", + "aba7aeae", + "aa4e97ec", + "663dd5eb", + "c25cc2cf", + "ef51026e", + "13cd49a7", + "3276416d", + "a92ddc10", + "55a3f186", + "eb1412a7" + ] + } + } +} 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 7914a51b6..cb9abb9bf 100644 --- a/packages/front-end-interview-guidebook/contents/coding/zh-CN.mdx +++ b/packages/front-end-interview-guidebook/contents/coding/zh-CN.mdx @@ -1,72 +1,77 @@ --- -title: 前端面试编码问题——如何准备 -description: 准备前端/ Web开发人员面试中的编码问题——了解预期问题、编码技巧和100多个重要的实践问题。 +title: 前端编码面试 +description: 期望的问题类型、实用的编码技巧以及最佳资源的使用 +seo_title: 前端编码面试问题 | 如何准备 +seo_description: 您需要了解的为前端编码面试做好充分准备的一切 - 包括要准备的问题类型、编码技巧和要使用的资源 +social_title: 破解编码面试 | 前端面试手册 --- -编码面试是评估前端工程师的主要方式，可以跨越多轮和多个面试阶段，因此练习编码面试非常重要。 回顾一下，以下是您可能会被问到的三种编码问题类型： +编码面试是评估前端工程师的主要方式，并且可能跨越多轮和面试阶段，因此为编码面试进行练习非常重要。 -- **算法编码**：解决棘手的算法问题，评估您对数据结构、算法和时间复杂性的理解。 -- **JavaScript 编码**：在前端领域中实现与前端开发常用的函数或数据结构相关的 JavaScript。 -- **用户界面编码**：使用 HTML、CSS 和 JavaScript 构建用户界面（组件、小部件、应用程序），有时甚至使用 JavaScript 框架。 +总而言之，您可以被问到以下三种类型的编码问题： + +* **算法编码**：解决棘手的算法问题，评估您对数据结构、算法和时间复杂度的理解。 +* **JavaScript 编码**：用 JavaScript 实现与前端领域相关的函数或数据结构，并在前端开发过程中常用。 +* **用户界面编码**：使用 HTML、CSS 和 JavaScript 构建用户界面（组件、小部件、应用程序），有时甚至使用 JavaScript 框架。 ## 编码环境 -您可能会被要求使用以下一个或多个环境完成问题的编码： +您可能需要使用以下一个或多个环境完成问题编码： ### 在线基本代码编辑器 -您将得到一个基于浏览器的代码编辑器的 URL。 该编辑器具有实时协作功能，或者您将被要求共享屏幕。 这些基本代码编辑器通常只有一个窗格，因为问题不需要使用多种语言来完成，例如算法/JavaScript 编码问题。 您可能被允许或不被允许执行代码。 在线基本代码编辑器的示例是[CoderPad](https://coderpad.io/)。 +您将获得一个浏览器内代码编辑器的 URL。 该编辑器具有实时协作功能，或者您将被要求共享您的屏幕。 这些基本代码编辑器通常只有一个窗格，因为问题不需要使用多种语言来完成，例如算法/JavaScript 编码问题。 您可能被允许也可能不被允许执行您的代码。 在线基本代码编辑器的示例是 [CoderPad](https://coderpad.io/)。 -### 集成开发环境（IDE） +### 集成开发环境 (IDE) -基本代码编辑器和 IDE 之间的区别在于 IDE 允许在多个文件之间切换。 它们可以是您笔记本电脑上的原生应用程序，也可以在浏览器中运行。 通常情况下，您会被要求使用 IDE 来构建用户界面，并且需要使用多个文件或键入不止一种语言。 这是可用的最佳环境，因为它与大多数工程师开发的方式非常相似。 在面试官的批准下，您应该能够： +基本代码编辑器和 IDE 之间的区别在于，IDE 允许在多个文件之间切换。 它们可以是在浏览器中，也可以是您笔记本电脑上的原生应用程序。 当您必须构建用户界面并且必须使用多个文件或键入不仅仅是一种语言时，通常会要求您使用 IDE。 这是可用的最佳环境，因为它与大多数工程师的开发方式非常相似。 在面试官的批准下，您应该能够： -- 预览正在进行的用户界面并实时查看更新。 -- 使用浏览器控制台进行调试。 -- 使用 IDE 功能（如语法突出显示、键盘快捷方式、自动完成、智能感知、扩展）提高生产力。 -- 添加任何必要的第三方依赖项。 +* 预览正在进行中的 UI 并实时查看更新。 +* 使用浏览器控制台进行调试。 +* 使用 IDE 功能，如语法高亮显示、键盘快捷键、自动完成、智能感知、扩展来提高您的工作效率。 +* 添加任何必要的第三方依赖项。 -始终选择使用 IDE 如果您被赋予权利选择。 +如果可以选择，请始终选择使用 IDE。 -在线 IDE 的示例包括[JSFiddle](https://jsfiddle.net/)、[CodePen](https://codepen.io/)、[CodeSandbox](https://codesandbox.io/)和[StackBlitz](https://stackblitz.com/)。 +在线 IDE 的示例包括 [JSFiddle](https://jsfiddle.net/)、[CodePen](https://codepen.io/)、[CodeSandbox](https://codesandbox.io/) 和 [StackBlitz](https://stackblitz.com/)。 ### 白板 -在某些公司，您可能会被要求在白板上编写所有必需的代码。 想象一下没有办法预览在白板上编写的 HTML 和 CSS！ 这是候选人的噩梦，像谷歌和 Meta / Facebook 这样的大型科技公司在面试时已知会这样做。 大多数其他公司要么让您带自己的笔记本电脑，您可以在本地 IDE 或 Web 浏览器中的在线代码编辑器/ IDE 中编码。 +在某些公司，您可能需要直接在白板上编写所有必需的代码。 想象一下在白板上编写 HTML 和 CSS，而无法预览它！ 这对候选人来说是一场噩梦，像谷歌和 Meta/Facebook 这样的大型科技公司都知道在现场面试中这样做。 大多数其他公司要么让您自带笔记本电脑，然后在本地 IDE 或 Web 浏览器中的在线代码编辑器/IDE 上进行编码。 ---- +*** -下面是各种编码环境的摘要和您可以采取的措施： +以下是各种编码环境的摘要以及您可以执行的操作： -| 环境 | 预览 | 执行代码 | 添加第三方依赖 | -| -------------- | ---- | -------- | -------------- | -| 在线代码编辑器 | 否 | 有时 | 通常否 | -| IDE | 是 | 是 | 是 | -| 白板 | 否 | 否 | 否 | +| 环境 | 预览 | 执行代码 | 添加第三方依赖项 | +| ------------------ | ------- | ------------ | -------------------------- | +| 在线代码编辑器 | 否 | 视情况而定 | 通常没有 | +| IDE | 是 | 是 | 是 | +| 白板 | 否 | 否 | 否 | -## 通用编码提示 +## 一般编码技巧 -- 熟悉有用的编辑器键盘快捷键，因为在面试期间时间非常重要，每个按键都很重要。 知道如何： - - 跳到行首/行尾。 - - 上下移动行。 - - 复制行。 - - 更改符号（变量）名称。 -- 提前了解您将在自己的笔记本电脑、给予您的笔记本电脑还是白板上编码。 - - 如果您将在自己的笔记本电脑上进行编码，并且可以使用自己的 IDE，请确保 IDE 正常运行，正确安装了 Node.js 和 npm，并且可以在 localhost 上运行本地 Web 服务器并在您的浏览器中访问它们。 -- 不要过分依赖代码的预览和执行。 这向您的面试官表明，您不确定自己输入了什么，并进行尝试和错误开发，这不是积极的信号。 +* 熟悉有用的编辑器键盘快捷键，因为在面试期间时间至关重要，并且每次按键都很重要。 知道如何： + * 跳转到行首/行尾。 + * 将行上移/下移。 + * 复制一行。 + * 轻松重命名符号。 +* 事先了解您是否将在自己的笔记本电脑、给您的笔记本电脑或白板上进行编码。 + * 如果您将在自己的笔记本电脑上进行编码并且可以使用自己的 IDE，请确保 IDE 正常运行，Node.js 和 npm 已正确安装，并且您可以在 `localhost` 上运行本地 Web 服务器并在浏览器中访问它们。 +* 不要过分依赖代码的预览和执行。 这向您的面试官表明您不确定自己输入的内容，并且通过反复试验进行开发，这不是一个积极的信号。 -## 特定类型的提示 +## 特定于类型的提示 -请继续阅读每种编码面试类型的提示： +请继续阅读有关每种编码面试类型的提示： -- [算法编码](/front-end-interview-playbook/algorithms) -- [JavaScript 编码](/front-end-interview-playbook/javascript) -- [用户界面编码](/front-end-interview-playbook/user-interface) +* [算法编码](/front-end-interview-playbook/algorithms) +* [JavaScript 编码](/front-end-interview-playbook/javascript) +* [用户界面编码](/front-end-interview-playbook/user-interface) -## 练习问题 +## 练习题 -GreatFrontEnd 有一个长列表的[编码问题](/questions)，您可以练习并花时间检查它们。 +GreatFrontEnd 有一个很长的[编码问题列表](/questions)，您可以练习，您绝对应该花时间查看它们。 -请注意，我们在某些问题中特意保持模糊，并没有提出完整的要求。 这是为了训练您提前思考并考虑在解决方案时可能需要注意哪些可能的事项。 +请注意，我们在某些问题中故意含糊不清，并且没有在问题中呈现完整的需求。 这是为了训练您提前思考并考虑在处理解决方案时可能需要注意的事项。 -但是，我们将在解决方案中涵盖尽可能多的方面。 在阅读解决方案时，意识到您错过了某些东西可能会让您感到沮丧，但这是帮助您改进的学习经验。 最好在准备过程中学习，而不是在实际面试中学习。 +但是，我们将在解决方案中尽可能多地涵盖。 在阅读解决方案时意识到您遗漏了一些东西可能会令人沮丧，但这是一个学习体验，最终目标是帮助您改进。 最好在准备期间学习，而不是在实际面试期间学习。 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 new file mode 100644 index 000000000..51fcb5c17 --- /dev/null +++ b/packages/front-end-interview-guidebook/contents/javascript/en-US.langnostic.json @@ -0,0 +1,82 @@ +{ + "frontmatter": { + "title": "b87926c4", + "description": "f2bc0b45", + "seo_title": "7f6ef26b", + "seo_description": "9ac3df1b", + "social_title": "35078a6" + }, + "content": { + "source": { + "locale": "en-US", + "hashes": [ + "35c53c11", + "2bf0e959", + "cc47c3e5", + "493e8bd0", + "3a6772ae", + "88b10912", + "158e6f2f", + "84cfe32f", + "e37720df", + "b6d503a8", + "2edbb909", + "f4eb7140", + "479d88a5", + "2c871597", + "ddef7dac", + "9579c455", + "12238f3f", + "c0c09aea", + "a166c3ae", + "7e75ddb2", + "f0c57ca9", + "dbd74015", + "dcdaeeb9", + "a1792050", + "51300c2d", + "83e4297b", + "55890346", + "4466a204", + "87e4a903", + "a6cc79fd", + "efbc5f44" + ] + }, + "targets": { + "zh-CN": [ + "35c53c11", + "2bf0e959", + "cc47c3e5", + "493e8bd0", + "3a6772ae", + "88b10912", + "158e6f2f", + "84cfe32f", + "e37720df", + "b6d503a8", + "2edbb909", + "f4eb7140", + "479d88a5", + "2c871597", + "ddef7dac", + "9579c455", + "12238f3f", + "c0c09aea", + "a166c3ae", + "7e75ddb2", + "f0c57ca9", + "dbd74015", + "dcdaeeb9", + "a1792050", + "51300c2d", + "83e4297b", + "55890346", + "4466a204", + "87e4a903", + "a6cc79fd", + "efbc5f44" + ] + } + } +} 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 8b233efd0..bd6582cb1 100644 --- a/packages/front-end-interview-guidebook/contents/javascript/zh-CN.mdx +++ b/packages/front-end-interview-guidebook/contents/javascript/zh-CN.mdx @@ -1,119 +1,122 @@ --- -title: 前端面试JavaScript问题——如何准备 -description: 为前端/网站开发人员面试准备JavaScript问题的指南——了解的概念、面试规则和70多个重要的练习问题。 +title: JavaScript 编码面试 +description: 期望的问题类型、需要了解的重要概念以及要做的顶级练习题 +seo_title: JavaScript 编码面试问题 | 如何准备 +seo_description: 准备 JavaScript 编码面试问题的终极指南 - 包括问题类型、面试最佳实践、重要概念和练习题 +social_title: 破解 JavaScript 编码面试 | 前端面试手册 --- -编写 JavaScript 编码问题与编写算法编码问题的不同之处在于前者通常特定于前端领域，完成它们最有意义的是使用 JavaScript（或[TypeScript](https://www.typescriptlang.org/)）。 您还可能需要使用浏览器/JavaScript 特定的 API，或利用 HTML/CSS/JavaScript 知识。 您还可能需要使用浏览器/JavaScript 特定的 API，或利用 HTML/CSS/JavaScript 知识。 +编写 JavaScript 编码问题与算法编码问题的区别在于，前者通常特定于前端领域，使用 JavaScript（或 [TypeScript](https://www.typescriptlang.org/)）来完成它们是最有意义的。 您可能还需要使用特定于浏览器/JavaScript 的 API 和/或利用 HTML/CSS/JavaScript 知识。 -这些 JavaScript 编码问题往往具有实用价值，并且可以属于以下一类或多类： +这些 JavaScript 编码问题往往具有实践性，可以分为以下一个或多个类别： -1. 在 JavaScript 语言中实现标准内置类或方法。 -2. 实现在流行的库中常见的实用函数/类。 +1. 在 JavaScript 语言中实现标准的内置类或方法。 +2. 实现常用库中常见的实用函数/类。 ## 示例 ### JavaScript 标准内置类/方法 -当他们已经成为语言的一部分时，实现标准类/方法可能看起来有些多余。 然而，浏览器不一致曾经是一个普遍的问题，并且一些语言 API 在旧浏览器中找不到。 当他们已经成为语言的一部分时，实现标准类/方法可能看起来有些多余。 然而，浏览器不一致曾经是一个普遍的问题，并且一些语言 API 在旧浏览器中找不到。 因此，开发人员不得不通过在下载的 JavaScript 中实现这些 API 来进行填充。 能够实现这些本地函数还显示了对前端基础知识的良好理解。 能够实现这些本地函数还显示了对前端基础知识的良好理解。 +实现标准类/方法似乎是多余的，因为它们已经是语言的一部分。 然而，浏览器不一致曾经是一个猖獗的问题，并且在旧的浏览器中找不到一些语言 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`为例。 您是否知道： 您是否知道： +这些函数比看起来的要多。 让我们以无辜的 `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`访问它们时。 来源：[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) -您的实施不必处理所有这些情况，特别是数组突变的情况。 但是，如果您提到了这些情况，那么这是一个积极的信号。 您的实现越接近规范，您就会显得更加资深/有经验。 +您的实现不必处理所有这些情况，尤其是数组变异情况。 但是，如果您提到了这些情况，这是一个积极的信号。 您的实现越接近规范，您看起来就越资深/经验丰富。 ### 来自流行库的实用函数/类 -这些函数/类在使用 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)。 -- 流行的库： - - [`classnames`](/questions/javascript/classnames) - - 测试框架（如[Jest](https://jestjs.io/) / [Mocha](https://mochajs.org/)）中的“test”/“expect”函数。 - - [`Emitter`](/questions/javascript/event-emitter)（它存在于 Node.js 和许多第三方库中） - - [Immutable.js](https://immutable-js.com/) - - [Backbone.js](https://backbonejs.org/) +* 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` 函数 + * [`Emitter`](/questions/javascript/event-emitter)（作为 Node.js 和许多第三方库的一部分存在） + * [Immutable.js](https://immutable-js.com/) + * [Backbone.js](https://backbonejs.org/) -如果您查看这些库的源代码，您可能会发现其中一些实现非常复杂。 这是因为该库必须支持许多晦涩的真实世界用例。 与标准函数类似，您不需要在面试设置中处理所有这些边缘情况，但是您获得了调用它们的点。 +如果您查看这些库的源代码，您可能会发现某些实现非常复杂。 这是因为该库必须支持许多模糊的实际用例。 与标准函数类似，您不希望在面试环境中处理所有这些极端情况，但您可以因将它们指出来获得积分。 -## JavaScript 编码面试期间要做的事情 +## JavaScript 编码面试期间该做什么 -JavaScript 编码面试与算法编码面试有许多相似之处。 一般来说，你应该： +JavaScript 编码面试与算法编码面试有很多相似之处。总的来说，你应该： -1. 查找您正在编码的平台，并熟悉编码环境： - - 支持的编辑器快捷键。 - - 您是否可以执行代码。 - - 您是否可以安装第三方依赖项。 -2. 1 分钟内进行自我介绍。 除非要求，否则不要花费更长的时间，否则您可能没有足够的时间编码。 -3. 在收到问题后询问澄清性问题。 澄清以下内容： 澄清以下内容： - - 您可以使用更新的 JavaScript 语法（ES2016 及更高版本）吗？ - - 代码是要运行在浏览器上还是服务器上（例如 Node.js）。 - - 浏览器支持，因为这将影响您可以使用的浏览器 API。 -4. 向面试官提出解决方案。 与编码面试不同，JavaScript 编码面试的重点通常不在复杂的数据结构和算法上。 通过最佳的数据结构和算法选择，可能可以直接跳转到最佳解决方案。 -5. 编写解决方案并在编码时向面试官解释您的代码。 -6. 编码后，一次阅读您的代码，尝试检测基本错误，例如拼写错误，在初始化变量之前使用变量，不正确使用 API 等。 -7. 概述一些基本测试用例和一些边缘情况。 使用这些情况测试您的代码，并确定您的代码是否通过了它们。 如果失败，请调试问题并修复它们。 -8. 可选：如果涉及算法优化和智能数据结构选择，则解释时间/空间复杂度。 -9. 解释您所做出的任何权衡、您明确未处理的案例以及如果您有更多时间可以改进代码的方法。 -10. 面试可能不会在这里结束，面试官可能会有对此问题的跟进问题或给您提供另一个问题。 要为它们做好准备。 +1. 找出你正在使用的平台，并熟悉编码环境： + * 支持的编辑器快捷键。 + * 你是否可以执行代码。 + * 你是否可以安装第三方依赖项。 +2. 在一分钟内做自我介绍。除非被要求，否则不要超过这个时间，否则你可能没有足够的时间来编码。 +3. 收到问题后，提出澄清问题。澄清以下内容： + * 你可以使用较新的 JavaScript 语法（ES2016 及以后版本）吗？ + * 代码是打算在浏览器中运行还是在服务器上运行（例如 Node.js）。 + * 浏览器支持，因为这将影响你可以使用的浏览器 API。 +4. 向面试官提出解决方案。与编码面试不同，JavaScript 编码面试的重点通常不在于复杂的数据结构和算法。你很有可能可以直接跳到具有最佳数据结构和算法选择的最优解决方案。 +5. 编写你的解决方案，并在编码时向面试官解释你的代码。 +6. 编码后，通读你的代码一次，并尝试发现基本错误，例如拼写错误、在使用变量之前初始化它们、不正确地使用 API 等。 +7. 概述一些基本测试用例和一些边缘情况。使用这些用例测试你的代码，并确定你的代码是否通过了它们。如果失败，请调试问题并修复它们。 +8. 可选：如果代码涉及算法优化和智能数据结构选择，请解释时间和空间复杂度。 +9. 解释你所做的任何权衡、你明确没有处理的案例，以及如果你有更多时间，你将如何改进代码。 +10. 面试可能不会在这里结束，面试官可能会就这个问题向你提出后续问题或给你另一个问题。为他们做好准备。 -## JavaScript 编码面试规则 +## 如何准备 JavaScript 编码面试 -1. 通过参考下面的“重要概念”熟悉 HTML、CSS、JavaScript 和 DOM 概念。 [测验部分](/front-end-interview-playbook/quiz) 也可以是一个好的开始，因为您可能会以测验问题的形式被问到这些概念。 -2. 选择[学习计划](/interviews/get-started)并练习所选学习计划推荐的[JavaScript 编码问题](/questions/formats/javascript-functions)。 在做问题的同时，也可以学习某个主题。 +1. 通过参考下面的“重要概念”，熟悉 HTML、CSS、JavaScript 和 DOM 概念。 [测验部分](/front-end-interview-playbook/quiz) 也可以是一个好的开始，因为你可能会在编码期间以测验问题的形式被问到这些概念。 +2. 选择一个 [学习计划](/interviews/get-started) 并练习为所选学习计划推荐的 [JavaScript 编码问题](/questions/formats/javascript-functions)。 在做题的同时学习某个主题也是可以的。 ## 重要概念 | 类别 | 重要主题 | | --- | --- | -| 数据结构 | 数组、地图、堆栈、树、套装 | -| 算法 | 二进制搜索、广度优先搜索、深度优先搜索、递归 | -| JavaScript 语言 | 数据类型（检查类型、类型强制转换）、范围、闭合、回调、如何使用此处关键字、面向对象编程（原型、类、方法），箭头函数与普通函数、通过`Function.prototype.apply()` / `Function.prototype.call()`调用函数，`Promise`，处理多参数 | +| 数据结构 | 数组、映射、堆栈、树、集合 | +| 算法 | 二分查找、广度优先搜索、深度优先搜索、递归 | +| JavaScript 语言 | 数据类型（检查类型、类型强制转换）、作用域、闭包、回调、`this` 关键字的工作方式、JavaScript 中的面向对象编程（原型、类、方法）、箭头函数与普通函数、通过 `Function.prototype.apply()`/`Function.prototype.call()` 调用函数、`Promise`、处理可变参数 | | DOM | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托 | -| 运行时 API | 计时器（`setTimeout()`、`setInterval()`） | +| 运行时 API | 计时器 (`setTimeout()`、`setInterval()`) | -## 如何准备 JavaScript 编码面试 +## JavaScript 编码面试评分标准 -JavaScript 编码面试类似于算法编码面试，应该采用相似的方法。 自然地，JavaScript 编码面试与评估候选人的方式在某些方面与算法编码面试重叠。 +JavaScript 编码面试类似于算法编码面试，进行面试的方式也应该类似。当然，在候选人在 JavaScript 编码面试中如何被评估方面，将与算法编码面试有一些重叠。 -- **问题解决**: 有系统和逻辑的方法来理解和解决问题。 将问题分解为较小的独立问题。 评估不同的方法及其权衡。 -- **软件工程基础**: 熟悉数据结构、算法、运行时复杂度分析、使用设计模式、使用干净的抽象设计解决方案。 -- **领域专业知识**: 理解前端领域和相关语言：浏览器（DOM 和 DOM API）、HTML、CSS、JavaScript 和性能。 -- **沟通**: 询问澄清细节并清楚地解释自己的方法和考虑因素。 -- **验证**: 识别各种要测试代码的方案，包括边缘情况。 能够诊断并修复出现的任何问题。 +* **问题解决**：使用系统和逻辑的方法来理解和解决问题。将问题分解为较小的独立问题。评估不同的方法及其权衡。 +* **软件工程基础**：熟悉数据结构、算法、运行时复杂度分析、设计模式的使用、使用干净的抽象设计解决方案。 +* **领域专业知识**：了解前端领域和相关语言：浏览器（DOM 和 DOM API）、HTML、CSS、JavaScript、性能。 +* **沟通**：提问以澄清细节，并清楚地解释自己的方法和考虑因素。 +* **验证**：确定各种场景以测试代码，包括边缘情况。能够诊断和修复出现的任何问题。 ## 有用的提示 -- **虚构的想法**。 JavaScript 的标准库没有一些有用的数据结构和算法，例如队列、堆、二分搜索，这可以使您在 JavaScript 编码面试期间更轻松。 然而，您可以询问面试官是否可以假装这样的数据结构/算法存在，并直接在解决方案中使用它，而无需实现它。 -- **纯函数**。 编写纯函数，这些函数具有可重用和可插入性的好处，即函数不依赖于函数外的状态，并且不会产生副作用。 -- **明智地选择数据结构**。注意您选择数据结构的选择，并了解代码的时间复杂度。 如果要在解决方案中使用基本 JavaScript 数组、对象、集合、映射操作，应熟悉这些时间/空间复杂度。 这些时间/空间复杂度在不同的语言中可能有所不同。 不要编写运行时间为 O(n2)的代码，如果可以使用哈希图来在 O(n)运行时间内完成操作，则可以避免此类情况。 -- **`this`很重要**。 如果一个函数接受回调函数作为参数，请考虑`this`变量应该如何行动。 对于许多内置函数，`this`是回调函数调用时提供的参数之一。 -- **回调函数内的突变**。注意回调函数突变正在处理的数据结构。 您可能不需要在面试期间处理此情况，但应在相关情况下明确提出此类情况。 -- **递归边缘案例**。 - - 如果您已经确定解决问题需要递归，请问输入大小以及如何处理递归堆栈溢出的情况。 通常情况下，您不必处理它，但是引起此问题是一个很好的信号。 - - 嵌套深层次数据结构可能具有对它本身的递归引用，这使得某些操作（例如序列化）变得更加棘手。 问问面试官你是否要处理这样的情况。 通常情况下，您不必处理它，但是引起此问题是一个很好的信号。 +* **一厢情愿**。 JavaScript 的标准库没有一些有用的数据结构和算法，如队列、堆、二分查找，这可以使你在 JavaScript 编码面试中更轻松。但是，你可以询问面试官是否可以假装存在这样的数据结构/算法，并在你的解决方案中直接使用它，而无需实现它。 +* **纯函数**。 旨在编写纯函数，这些函数具有可重用性和模块化的好处，即不依赖于函数外部的状态且不会引起副作用的函数。 +* **明智地选择数据结构。** 注意你对数据结构的选择，并注意代码的时间复杂度。 熟悉基本 JavaScript 数组、对象、集合、映射操作的时间/空间复杂度，以防你希望在你的解决方案中使用它们。 其中一些时间/空间复杂度因语言而异。 如果可以使用哈希映射在 O(n) 运行时完成，则不要编写以 O(n2) 运行的代码。 +* **`this`很重要**。 如果一个函数接受一个回调函数作为参数，请考虑 `this` 变量应该如何表现。 对于许多内置函数，`this` 作为回调函数被调用的参数之一提供。 +* **回调函数中的突变。** 谨防回调函数改变其操作的数据结构。 你可能不需要在面试期间处理这种情况，但如果相关，你应该明确提及此类情况。 +* **递归边缘情况**。 + * 如果你已经确定解决这个问题需要递归，请询问输入大小以及如何处理递归堆栈溢出的情况。 通常你不需要处理它，但提出这个问题是一个好信号。 + * 嵌套的深层数据结构可能具有对自身的递归引用，这使得某些操作（如序列化）更加棘手。 询问面试官你是否必须处理此类情况。 通常你不需要处理它，但提出这个问题是一个好信号。 ## 最佳实践问题 -从经验上看，在频率和涵盖的重要概念方面，最佳的 JavaScript 编码面试问题是： +根据经验，根据涵盖的频率和重要概念，最佳的 JavaScript 编码面试问题是： -- [Debounce](/questions/javascript/debounce) -- [Throttle](/questions/javascript/throttle) -- [Array.prototype.filter](/questions/javascript/array-filter) -- [Promise.all](/questions/javascript/promise-all) -- [Curry](/questions/javascript/curry) -- [Flatten](/questions/javascript/flatten) -- [getElementsByTagName](/questions/javascript/get-elements-by-class-name) -- [Deep Clone](/questions/javascript/deep-clone) -- [Data Selection](/questions/javascript/data-selection) +* [Debounce](/questions/javascript/debounce) +* [Throttle](/questions/javascript/throttle) +* [Array.prototype.filter](/questions/javascript/array-filter) +* [Promise.all](/questions/javascript/promise-all) +* [Curry](/questions/javascript/curry) +* [Flatten](/questions/javascript/flatten) +* [getElementsByTagName](/questions/javascript/get-elements-by-class-name) +* [Deep Clone](/questions/javascript/deep-clone) +* [Data Selection](/questions/javascript/data-selection) -GreatFrontEnd 有[全面的 JavaScript 编码问题列表](/questions/javascript-interview-questions/javascript-functions)，您可以练习。 还有可以运行您的代码以验证正确性的自动化测试用例，以及由前 FAANG 资深工程师编写的解决方案。 +GreatFrontEnd 有一个 [全面的 JavaScript 编码问题列表](/questions/formats/javascript-functions)，你可以练习。 还有自动测试用例，你可以针对这些用例运行你的代码，以验证前 FAANG 高级工程师编写的正确性和解决方案。 -请注意，我们在某些问题中故意含糊不清，并没有在问题说明中全面介绍要求。 但是，我们将在解决方案中涵盖尽可能多的方面。 在阅读解决方案时，如果您发现错过了一些内容，可能会感到沮丧，但是这可以锻炼您的提前思考，并考虑在解决方案工作时需要注意哪些可能区域。 最好在练习期间找出，而不是在实际面试中发现。 +请注意，我们在某些问题中故意含糊不清，并且没有在问题描述中预先呈现完整的需求。 但是，我们将在解决方案中尽可能多地涵盖内容。 在阅读解决方案时，你可能会感到沮丧，因为你错过了一些东西，但这可以训练你提前思考并考虑在处理解决方案时可能需要注意的领域。 最好在练习中发现，而不是在实际面试中发现。 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 new file mode 100644 index 000000000..60c39dc29 --- /dev/null +++ b/packages/front-end-interview-guidebook/contents/overview/en-US.langnostic.json @@ -0,0 +1,112 @@ +{ + "frontmatter": { + "title": "f264a18", + "description": "cadf8c0a", + "seo_title": "597f69db", + "seo_description": "48c97f2d", + "social_title": "3a04eb09" + }, + "content": { + "source": { + "locale": "en-US", + "hashes": [ + "2e8b4723", + "1552b496", + "7579fce0", + "2b2ecb7d", + "dd48cb53", + "7b5438f6", + "12a4b48b", + "171ba949", + "2c0e1de9", + "9fe44503", + "c559dbe2", + "fcc379ee", + "5747a8a0", + "72b91d6", + "c68dfa68", + "967646dc", + "35cd17b5", + "84dd7a0c", + "6d972773", + "1922fbc3", + "ffabcd47", + "82f36e55", + "80e7d9b0", + "dc87e224", + "508cf78a", + "ea5939f0", + "f17fa2f", + "29cb15f3", + "788133a2", + "c34e2cd6", + "3535c343", + "ce77c4b6", + "8745c277", + "2f29f41", + "d16bbea", + "5ae72edb", + "736a07d5", + "6948f229", + "c39d20cb", + "14af9fbb", + "2d1f52c8", + "3607fb25", + "7f524bab", + "fe6b5994", + "e10248d9", + "70cd2c67" + ] + }, + "targets": { + "zh-CN": [ + "2e8b4723", + "1552b496", + "7579fce0", + "2b2ecb7d", + "dd48cb53", + "7b5438f6", + "12a4b48b", + "171ba949", + "2c0e1de9", + "9fe44503", + "c559dbe2", + "fcc379ee", + "5747a8a0", + "72b91d6", + "c68dfa68", + "967646dc", + "35cd17b5", + "84dd7a0c", + "6d972773", + "1922fbc3", + "ffabcd47", + "82f36e55", + "80e7d9b0", + "dc87e224", + "508cf78a", + "ea5939f0", + "f17fa2f", + "29cb15f3", + "788133a2", + "c34e2cd6", + "3535c343", + "ce77c4b6", + "8745c277", + "2f29f41", + "d16bbea", + "5ae72edb", + "736a07d5", + "6948f229", + "c39d20cb", + "14af9fbb", + "2d1f52c8", + "3607fb25", + "7f524bab", + "fe6b5994", + "e10248d9", + "70cd2c67" + ] + } + } +} 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 b030afe05..86238d895 100644 --- a/packages/front-end-interview-guidebook/contents/overview/zh-CN.mdx +++ b/packages/front-end-interview-guidebook/contents/overview/zh-CN.mdx @@ -1,143 +1,146 @@ --- -title: 前端面试——权威概述和准备指南 -description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指南。 了解所有内容：什么可以期望，不同的面试问题类型，以及如何准备。 +title: 前端面试：简介 +description: 您需要了解的一切 - 从问题类型到准备策略 +seo_title: 前端面试快速入门指南 - 必知的一切 +seo_description: 通过本快速入门指南开始您的前端面试准备。探索面试形式、基本技巧以及公司提出的问题类型。 +social_title: 前端面试 - 快速入门指南 | GreatFrontEnd --- -前端面试通常很难准备。 可能存在许多不同的面试形式，而不同公司的前端工程师评估标准也没有行业的规范结构。 有些公司针对前端工程师和通用软件工程师使用相同的面试流程，而有些公司（例如 Google 和 Amazon）则在通用软件工程师环节和前端领域特定环节之间均有面试流程。 +准备前端面试是出了名的难。面试形式多种多样，而且整个行业在评估前端工程师方面没有统一的标准结构。一些公司对前端工程师的面试流程与对普通软件工程师的面试流程相同，而另一些公司（例如谷歌和亚马逊）则混合使用，既有通用的软件工程环节，也有前端特定领域的环节。 -近年来，业界逐渐转向不再要求前端面试候选人解决数据结构和算法（DSA）问题。 相反，候选人将需要实现常见的前端库函数和/或构建实用的 UI 组件/应用程序，以测试他们对实际和相关的前端概念的理解。 这是一个令人鼓舞的趋势，因为与大多数 DSA 问题不同，前端面试问题与前端工程师的日常职责高度相关，是更准确的评估。 +近年来，行业正在逐渐放弃要求前端面试候选人解决数据结构和算法 (DSA) 问题。相反，候选人将不得不实现常见的前端库函数和/或构建实用的 UI 组件/应用程序，从而测试他们对实用且相关的前端概念的理解。这是一个令人鼓舞的趋势，因为与大多数 DSA 问题不同，前端面试问题与前端工程师的日常职责高度相关，并且是一种更准确的评估。 -但是，许多现有的软件工程面试资源都针对通用软件工程角色而不是一种更小众的和小众的前端工程师领域;你几乎找不到有关前端系统设计的任何资源。 这些因素加上可能的领域主题的广度使得准备前端面试是一个漫长，乏味且困难的过程。 +然而，许多现有的软件工程面试资源都是针对普通软件工程角色，而不是前端工程师，后者是一个规模小得多的细分领域；您几乎找不到任何关于前端系统设计的资源。这些因素加上可能涉及的领域主题的广泛性，使得准备前端面试成为一个漫长、乏味和艰巨的过程。 -请不要担心！ GreatFrontEnd 旨在成为前端工程师通过一站式平台获得必要知识并进行前端面试的最佳资源。 在 GreatFrontEnd 上，读者可以： +别担心！GreatFrontEnd 旨在成为前端工程师在前端面试中脱颖而出的最佳资源，它是一个一站式平台，为前端工程师提供必要的知识和实践。在 GreatFrontEnd 上，读者可以： -1. 学习如何创建一个专门针对前端工程职位的[**精彩简历**](/front-end-interview-playbook/resume)。 -2. 学习适用于所有问题类型的**重要的前端概念和技术**。 -3. 准备最常见的**前端面试问题类型**（编码，系统设计，测验，行为）。 -4. [**练习问题**](/questions)，涵盖最常见的前端面试格式和由前 FAANG 高级工程师编写的**高质量解决方案**。 -5. 浏览建议的[**学习计划**](/interviews/get-started)，并采用**结构化准备方法**。 +1. 学习如何为 [**前端工程职位列表创建一份很棒的简历**](/front-end-interview-playbook/resume)。 +2. 学习适用于所有问题类型的 **重要前端概念和技术**。 +3. 准备最常见的前端 **面试问题类型**（编码、系统设计、测验、行为）。 +4. 练习最常见前端面试形式的 [**练习题**](/questions)，以及由前 FAANG 高级工程师撰写的 **高质量解决方案**。 +5. 浏览建议的 [**学习计划**](/interviews/get-started) 并采用 **结构化的准备方法**。 -## 准备精彩简历 +## 准备一份很棒的简历 -您的简历是给潜在雇主留下印象的第一次机会，因此对于得到梦想公司的短名单至关重要。 +您的简历是给潜在雇主留下第一印象的机会，对于在您梦寐以求的公司获得候选资格至关重要。 -如果您在申请工作时遇到了困难，即使拥有必要的资格，也可能是因为您的简历。 即使高素质的候选人可能也不知道如何有效地展示他们的成就在简历中，因此可能无法获得短名单。 需要记住的是，低资格并不总是不被选中的原因；有时只是因为呈现不良和未包含重要内容。 一旦您通过简历筛选流程，过去的成就就变得次要了，您的技术能力成为首要考虑因素，这可以通过学习和改进来实现。 因此，通过提交代表您的高水平的优秀简历，进入门槛是极其重要的。 +如果您在申请工作时遇到面试困难，尽管您具备必要的资格，但这可能是因为您的简历。即使是高素质的候选人也可能不知道如何在简历中有效地展示他们的成就，因此可能无法入围。重要的是要记住，不合格并不总是未被选中的原因；有时这仅仅是展示不佳和未包含重要内容的问题。一旦您通过了简历筛选流程，您过去的成就就变得次要，您的技术技能变得至关重要，这些技能是可以学习和提高的。因此，通过提交一份能很好地代表您的优秀简历来敲开大门非常重要。 -虽然已有一些有关制作良好的软件工程简历的资源，例如[Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/)和[FAANG Tech Leads 的简历手册](https://www.faangtechleads.com/resume/handbook)，但它们都是通用的，不是针对前端工程师的。 我们写了一些[如何为前端工程职位定制简历的技巧](/front-end-interview-playbook/resume)。 +虽然已经有关于如何制作优秀的软件工程简历的现有资源，例如 [Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/) 和 [FAANG Tech Leads' Resume Handbook](https://www.faangtechleads.com/resume/handbook/)，但它们是通用的，并非特定于前端工程师。我们编写了一些 [关于如何为前端工程职位定制简历的提示](/front-end-interview-playbook/resume)。 -## 按问题类型准备 +## 按问题格式准备 -前端面试环节可能有许多不同的形式，并且每家公司的做法都不同。 为了有效地做好准备，您应该了解您面试的公司的不同面试阶段，每个阶段内的各种环节以及每个环节中将要问的问题类型。 +前端面试流程可以有多种不同的形式，每个公司的情况也各不相同。为了提高准备效率，您应该找出您正在面试的公司的不同面试阶段、每个阶段内的各个环节以及您将在每个环节中被问到的问题类型。 -每种问题格式都有自己的挑战和怪癖。 我们将介绍各种格式，如果您想了解更多信息，可以阅读每种类型的专页。 +每个问题格式都有其自身的挑战和怪癖。我们将向您介绍各种格式，如果您想了解更多信息，可以阅读每种类型的专用页面。 -### 编程问题 +### 编码问题 -编码问题将涉及编写代码（搞定！）。 但您需要编写的代码以及您将编写代码的平台可能截然不同。 您可能会问到： +编码问题将涉及编写代码（废话！）。但是，您需要编写的代码以及您编写代码的平台可能会有很大差异。您可能会被问到： -1. **算法编码**：解决棘手的算法问题，评估您对数据结构，算法和时间复杂度的理解。 [阅读算法编码面试](/front-end-interview-playbook/algorithms)的相关内容。 -2. **JavaScript 编码**：在 JavaScript 中实现与前端领域相关且在前端开发过程中常用的函数或数据结构。 [阅读 JavaScript 编码面试的相关内容](/front-end-interview-playbook/javascript)。 -3. **用户界面编码**：使用 HTML，CSS 和 JavaScript 构建用户界面（组件，小部件，应用程序），有时甚至包括使用 JavaScript 框架。 [阅读有关用户界面编码面试的相关内容](/front-end-interview-playbook/user-interface)。 +1. **算法编码**：解决棘手的算法问题，评估您对数据结构、算法和时间复杂度的理解。[阅读关于算法编码面试](/front-end-interview-playbook/algorithms)。 +2. **JavaScript 编码**：用 JavaScript 实现与前端领域相关的函数或数据结构，并在前端开发过程中常用。[阅读关于 JavaScript 编码面试](/front-end-interview-playbook/javascript)。 +3. **用户界面编码**：使用 HTML、CSS 和 JavaScript 构建用户界面（组件、小部件、应用程序），有时甚至使用 JavaScript 框架。[阅读关于用户界面编码面试](/front-end-interview-playbook/user-interface)。 -公司愈趋趋向使用领域特定的编程问题，而不是测试关于算法和数据结构的知识，因为前者对于评估前端工程工作所需的核心技能更为相关。 +公司正倾向于使用特定于领域的编码问题，而不是测试算法和数据结构，因为前者与评估前端工程工作所需的核心技能更相关。 ### 系统设计问题 -系统设计面试是高度无定形的面试，涉及设计软件系统来解决模糊的问题或情景。 候选人将需要将系统分解为较小的组件，绘制架构图，设计 API，在系统的某些部分进行深入交流，并讨论权衡取舍才能成功。 +系统设计面试是高度开放式的面试，涉及提出软件系统设计来解决一个模糊的问题或场景。候选人将不得不将一个系统分解成更小的组件，绘制架构图，设计 API，深入研究系统的某些部分并讨论权衡，以便取得成功。 -系统设计面试通常仅提供给高级别的候选人，并且所需的系统可以是以下类型和示例之一： +系统设计面试通常只针对高级候选人，所需的系统可以是以下类型和示例之一： -1. **分布式系统**：Twitter 后端，URL 缩短器 -2. **客户端应用程序**：新闻推送，照片共享应用程序 -3. **复杂的用户界面组件**：自动完成，下拉菜单，模态 +1. **分布式系统**：Twitter 后端、URL 缩短器 +2. **客户端应用程序**：新闻源、照片共享应用程序 +3. **复杂的用户界面组件**：自动完成、下拉菜单、模态 -大多数情况下，前端工程师将被要求设计客户端应用程序和复杂的用户界面组件，因为这些产品更相关于前端工程。 +大多数情况下，前端工程师将被要求设计客户端应用程序和复杂的用户界面组件，因为这些产品与前端工程更相关。 -[了解关于前端系统设计的更多信息](/front-end-interview-playbook/system-design) +[阅读更多关于前端系统设计 ->](/front-end-interview-playbook/system-design) ### 测验问题 -测验问题也称为琐事问题，是用于测试您对领域的理解的短问题。 每个问题不应花费超过一到两分钟的时间。 +测验问题，也称为琐事问题，是旨在测试您对该领域的理解的简短问题。每个问题不应超过一两分钟即可回答。 -通常不会有整个面试环节只问测验问题，但它们可能会在其他面试环节中出现。 +通常不会有整个面试轮次只问你测验问题，但它们可能会在其他面试轮次中突然出现。 -[阅读有关测验问题的更多信息](/front-end-interview-playbook/quiz)。 +[阅读更多关于测验问题 ->](/front-end-interview-playbook/quiz) ## 行为问题/面试 -在行为面试中，面试官会询问您过去的行为和经验，以评估您是否适合该工作和成熟水平。 +在行为面试中，面试官会询问您过去的行为和经验，以评估您是否适合这份工作以及成熟度。 -行为面试背后的理念是，过去的行为和经验是了解某个人将来行为的良好指标，因此面试官将提出旨在让您描述您所面临的具体情况以及您如何应对它们的问题，以更好地了解您的个人能力。 +行为面试背后的想法是，过去的行为和经验是某人未来行为的良好指标，因此面试官会提出旨在让您描述您所面临的具体情况以及您如何处理这些情况的问题，以便更好地了解您，超越您的技术能力。 -行为面试是一个大型主题，我们[撰写了一个完整的指南](/behavioral-interview-playbook)。 +行为面试本身就是一个很大的话题，我们已经[写了一整本关于它的手册](/behavioral-interview-playbook)。 ## 典型的招聘流程 -大多数公司将有类似以下的招聘流程： +大多数公司都会有一个类似于： -1. **初步筛选** - - 招聘人员通话（可能会问有关测验问题） - - 自动分级的在线评估或接回家的项目 -2. **电话筛选** - - 编程（实现算法，JavaScript 函数或构建用户界面） -3. **完整循环** - - 编程环节（实现算法，JavaScript 函数或构建用户界面） - - 系统设计环节 - - 行为环节 +1. **初步筛选** + * 招聘人员电话（可能会问测验问题） + * 自动评分的在线评估或带回家的项目 +2. **电话筛选** + * 编码（实现算法、JavaScript 函数或构建用户界面） +3. **全循环** + * 编码轮（实现算法、JavaScript 函数或构建用户界面） + * 系统设计轮 + * 行为轮 -最可靠的方法是询问招聘公司有关该角色的面试流程。 良好的公司甚至会准备详细的文件来解释每个面试阶段以及有关资源，指导候选人准备面试。 对于看到大量申请人的大公司来说，有人会通过[Glassdoor](https://www.glassdoor.com/), [Blind](https://www.teamblind.com/)和[Reddit](https://www.reddit.com/)等平台分享他们的面试经验。 +了解期望的最可靠方法是向公司招聘人员询问他们对该职位的面试流程。好的公司甚至会准备一份详细的文件来解释面试流程的每个阶段，以及指导候选人准备面试的资源。对于看到大量申请人的大公司来说，很有可能一些与他们面试过的候选人会在[Glassdoor](https://www.glassdoor.com/)、[Blind](https://www.teamblind.com/) 和 [Reddit](https://www.reddit.com/) 等平台上分享他们的经验。 -\*\*您必须知道要在面试中期望哪些问题类型，否则您将无处不飞，并且无法有效地准备。 +**您必须知道在面试中会遇到什么类型的问题，否则您将盲目行事，无法有效地准备。** -### 回合类型矩阵 +### 轮次类型矩阵 -以下矩阵显示了每个面试轮次中每种问题类型的相关程度/可能性。 面试轮可能包括来自不同问题类型的问题。 +下表显示了每次面试轮次中每种问题类型的相关性/可能性。面试轮次可能包含来自不同问题类型的问题。 -| 环节 | 测验 | 算法 | UI | JavaScript | 系统设计 | -| ------------ | ---- | ---- | --- | ---------- | -------- | -| 在线评估 | 中等 | 高 | 高 | 高 | 无 | -| 招聘人员通话 | 中等 | 无 | 无 | 无 | 无 | -| 接回家的项目 | 无 | 无 | 高 | 中等 | 中等 | -| 编程 | 低 | 高 | 高 | 高 | 低 | -| 行为问题 | 低 | 无 | 无 | 无 | 无 | -| 系统设计 | 低 | 无 | 低 | 无 | 高 | -| 招聘经理 | 低 | 无 | 无 | 无 | 低 | +| 轮次 | 测验 | 算法 | UI | JavaScript | 系统设计 | +| ----------------- | ------ | ---------- | ---- | ---------- | ------------- | +| 在线评估 | 中等 | 高 | 高 | 高 | 无 | +| 招聘人员电话 | 中等 | 无 | 无 | 无 | 无 | +| 待办项目 | 无 | 无 | 高 | 中等 | 中等 | +| 编码 | 低 | 高 | 高 | 高 | 低 | +| 行为 | 低 | 无 | 无 | 无 | 无 | +| 系统设计 | 低 | 无 | 低 | 无 | 高 | +| 招聘经理 | 低 | 无 | 无 | 无 | 低 | -### 公司问的问题类型 +### 公司提出的问题类型 -以下是美国顶尖公司问的问题类型摘要。 +以下是美国顶级公司提出的问题类型的摘要。 -| 公司 | 测验 | 算法 | JavaScript | UI | 系统设计 | 行为面试 | -| :------------ | :--: | :--: | :--------: | :-: | :------: | :------: | -| 爱彼迎 | 否 | 是 | 是 | 是 | 否 | 是 | -| 亚马逊 | 是 | 是 | 是 | 是 | 是 | 是 | -| 苹果 | 是 | 是 | 是 | 是 | 未知 | 是 | -| 字节跳动 | 是 | 是 | 是 | 是 | 否 | 是 | -| Dropbox | 否 | 是 | 是 | 是 | 是 | 是 | -| Facebook/Meta | 是 | 否 | 是 | 否 | 是 | 是 | -| 谷歌 | 是 | 是 | 是 | 是 | 是 | 是 | -| 领英 | 是 | 是 | 是 | 是 | 未知 | 是 | -| Lyft | 否 | 否 | 是 | 是 | 是 | 是 | -| 微软 | 是 | 是 | 是 | 是 | 是 | 是 | -| 推特 | 是 | 是 | 是 | 是 | 是 | 是 | -| Uber | 未知 | 未知 | 是 | 是 | 未知 | 是 | +| 公司 | 测验 | 算法 | JavaScript | UI | 系统设计 | 行为 | +| :-- | :-: | :-: | :-: | :-: | :-: | :-: | +| Airbnb | 否 | 是 | 是 | 是 | 否 | 是 | +| 亚马逊 | 是 | 是 | 是 | 是 | 是 | 是 | +| 苹果 | 是 | 是 | 是 | 是 | 未知 | 是 | +| 字节跳动 | 是 | 是 | 是 | 是 | 否 | 是 | +| Dropbox | 否 | 是 | 是 | 是 | 是 | 是 | +| Facebook/Meta | 是 | 否 | 是 | 否 | 是 | 是 | +| 谷歌 | 是 | 是 | 是 | 是 | 是 | 是 | +| 领英 | 是 | 是 | 是 | 是 | 未知 | 是 | +| Lyft | 否 | 否 | 是 | 是 | 是 | 是 | +| 微软 | 是 | 是 | 是 | 是 | 是 | 是 | +| 推特 | 是 | 是 | 是 | 是 | 是 | 是 | +| Uber | 未知 | 未知 | 是 | 是 | 未知 | 是 | -**问题类型传奇** +**问题类型图例** -- **测验**：封闭的测验/问答样式问题。 -- **算法**：实现解决算法问题的功能。 通常不特定于前端领域。 -- **JavaScript**：在 JavaScript 中实现与前端领域相关的功能/类。 -- **用户界面**：使用 HTML/CSS/JavaScript 构建用户界面。 一些公司允许您使用自己选择的框架，而有些公司只允许使用 Vanilla JS/某些框架。 -- **系统设计**：设计系统并讨论体系结构及其组成部分。 -- **行为问题**：讨论与他人合作的具体经验以及您如何处理困难情况。 +* **测验**：封闭式测验/琐事风格的问题。 +* **算法**：实现一个解决算法问题的函数。它通常不是前端领域特定的。 +* **JavaScript**：用 JavaScript 实现一个与前端领域相关的函数/类。 +* **UI**：使用 HTML/CSS/JavaScript 构建用户界面。一些公司允许您使用您选择的框架，而另一些公司只允许 Vanilla JS/某些框架。 +* **系统设计**：设计一个系统并讨论架构及其组件。 +* **行为**：讨论您与他人合作的特定经验以及您如何处理困难的情况。 ## 学习和实践 -继续阅读，了解如何准备以下前端面试格式/问题类型： +请继续阅读以了解如何准备以下前端面试格式/问题类型： -- [编程问题](/front-end-interview-playbook/coding) - - [算法问题](/front-end-interview-playbook/algorithms) - - [JavaScript 问题](/front-end-interview-playbook/javascript) - - [用户界面问题](/front-end-interview-playbook/user-interface) -- [系统设计问题](/front-end-interview-playbook/system-design) -- [测验问题](/front-end-interview-playbook/quiz) +* [编码问题](/front-end-interview-playbook/coding) + * [算法问题](/front-end-interview-playbook/algorithms) + * [JavaScript 问题](/front-end-interview-playbook/javascript) + * [用户界面问题](/front-end-interview-playbook/user-interface) +* [系统设计问题](/front-end-interview-playbook/system-design) +* [测验问题](/front-end-interview-playbook/quiz) diff --git a/packages/front-end-interview-guidebook/contents/quiz/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/quiz/en-US.langnostic.json new file mode 100644 index 000000000..d0b648222 --- /dev/null +++ b/packages/front-end-interview-guidebook/contents/quiz/en-US.langnostic.json @@ -0,0 +1,54 @@ +{ + "frontmatter": { + "title": "e480f0cf", + "description": "bcff4ba6", + "seo_title": "1d7d3f68", + "seo_description": "1ee4b47e", + "social_title": "ea77f7d5" + }, + "content": { + "source": { + "locale": "en-US", + "hashes": [ + "98f38cd1", + "493e8bd0", + "3b0d82ae", + "978b80ee", + "ba9aa997", + "2d4699d8", + "14246030", + "38ec276", + "159edb1e", + "7e75ddb2", + "9ac8168", + "5962f6f", + "f4d4d23d", + "b892bb91", + "3276416d", + "e6a7ed6e", + "21ad3e33" + ] + }, + "targets": { + "zh-CN": [ + "98f38cd1", + "493e8bd0", + "3b0d82ae", + "978b80ee", + "ba9aa997", + "2d4699d8", + "14246030", + "38ec276", + "159edb1e", + "7e75ddb2", + "9ac8168", + "5962f6f", + "f4d4d23d", + "b892bb91", + "3276416d", + "e6a7ed6e", + "21ad3e33" + ] + } + } +} diff --git a/packages/front-end-interview-guidebook/contents/quiz/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/quiz/zh-CN.mdx index 0b5ed7baf..611ed4439 100644 --- a/packages/front-end-interview-guidebook/contents/quiz/zh-CN.mdx +++ b/packages/front-end-interview-guidebook/contents/quiz/zh-CN.mdx @@ -1,56 +1,59 @@ --- -title: 前端面试测验题——如何准备 -description: 准备测验式前端面试问题的指南——预期情况，需要学习的概念，以及100多个重要的练习题。 +title: 前端问答面试题 +description: 问答式前端面试题 — 期望什么、要学习的概念以及 100 多个重要的练习题。 +seo_title: 前端问答面试题 | 如何准备 +seo_description: 准备问答式前端面试题的指南 — 期望什么、要学习的概念以及 100 多个重要的练习题。 +social_title: 破解问答式面试 | 前端面试手册 --- -测验题，也称为问答题，是用于测试您对领域了解的短小封闭式问题。 每个问题不应花费超过一两分钟的时间来回答，不过，您的回答可能会引发进一步的讨论。 因此，重要的是要对您所给出的答案背后的概念有良好的理解，而不是盲目地背诵和复述。 +问答题，也称为琐事题，是旨在测试你对该领域理解的简短封闭式问题。每个问题不应超过一两分钟的回答时间，但是，可以从你的答案中衍生出进一步的讨论。因此，对你给出的答案背后的概念有很好的理解非常重要，而不是盲目地记忆和重复。 ## 示例 -- [解释 CSS 盒模型是什么。](/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models) -- [什么是 CSS 选择器优先级？](/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work) -- [`let`、`var`或`const`创建的变量有什么区别？](/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const) -- [解释 JavaScript 中的`this`如何工作。](/questions/quiz/explain-how-this-works-in-javascript) +* [解释 CSS 盒子模型是什么。](/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models) +* [什么是 CSS 选择器特异性？](/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work) +* [使用 `let`、`var` 或 `const` 创建的变量之间有什么区别？](/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const) +* [解释 `this` 在 JavaScript 中的工作原理。](/questions/quiz/explain-how-this-works-in-javascript) -除了要求您了解前端基础知识（HTML、CSS、JavaScript），如果您声称了解某些具体框架，面试官也可能就相关问题向您询问（无论是面试时口头提问还是确认您的简历时）： +除了被问到前端基础知识（HTML、CSS、JavaScript）之外，如果你声称自己了解它们（在面试期间口头或面试官浏览你的简历时），你可能会被问到特定于框架的问题： -- X 技术解决了哪些问题？ -- X 技术的优点和缺点是什么？ -- X 技术的底层是如何工作的？ -- X 技术与 Y 技术有何区别？ +* X 技术解决了什么问题？ +* X 技术的优缺点是什么？ +* X 技术在幕后是如何工作的？ +* X 技术与 Y 技术相比如何？ ## 相关环节 -通常不会有面试只问测验式问题的环节。 但是，在专注于其他格式（如编码和系统设计）的面试中，面试官可能会向您提问测验式问题。 +通常不会有仅询问你问答题的面试环节。但是，面试官可能会在专注于其他形式（如编码和系统设计）的面试中向你提出问题。 -- **招聘专员电话**: 由于测验式问题的封闭性质，甚至非技术人员（如招聘专员）也可以提出测验式问题。 值得庆幸的是，非工程师可能无法评估准确性，并且可能只是将您的答案中的关键字与解决方案进行匹配。 在最糟糕的情况下，只要回复听起来合理并包含正确关键字的内容，您可能仍然能够通过。 -- **在线评估**: 虽然不常见，但有可能您会被要求回答多选题并从中选择正确答案。 -- **编码环节**: 面试官可能会在开始任何编码之前向您询问一些测验式问题以热身。 或者当您编写和解释代码时，面试官可能想进一步了解您刚才提到的某些内容。 因此，最好对您说/做的一切有良好的理解。 -- **系统设计环节**: 就像在编码环节一样，面试官可以就您所说的东西进一步提问。 -- **招聘经理环节**: 招聘经理环节通常不涉及技术，但他们可能会查看您的简历，并就其中提到的技术/项目向您提出相关的测验式问题。 +* **招聘人员电话**: 由于问答题的封闭性质，即使是非技术人员（如招聘人员）也可以提出这些问题。值得庆幸的是，非工程师可能无法评估准确性，可能只是将你的答案中的关键词与交给他们的解决方案进行匹配。在最坏的情况下，你可能仍然可以通过回复听起来合理并包含正确关键词的内容来通过。 +* **在线评估**: 虽然不常见，但你可能会被提供多项选择题，并且必须从中选择一个正确的答案。 +* **编码环节**: 面试官可能会在任何编码开始之前问你几个问答题来热身。或者，当你正在编码和解释你的代码时，面试官可能希望深入研究你刚才提到的内容。因此，最好对你所说/所做的一切都有很好的理解。 +* **系统设计环节**: 就像在编码环节一样，面试官可以就你所说的事情提出进一步的问题。 +* **招聘经理环节**: 招聘经理环节通常不是技术性的，但他们可能会查看你的简历，并就你的简历中提到的技术/项目向你提问相关的问答题。 -正如您所看到的，您几乎可以在任何可能的环节中都会被问及测验式问题。 随时做好准备。 +正如你所看到的，你可能会在几乎所有可能的环节中被问到问答题。随时做好准备。 ## 重要概念 | 领域 | 主题 | | --- | --- | -| HTML | 语义化 HTML，块级元素和行内元素，``、` ``` -**jQuery refresher**：jQuery UI 的`slider()`方法（构造函数）接收了一个 JavaScript 对象，作为定制选项。 执行`$('#slider')`选择`
`元素并返回一个 jQuery 对象，其中包含方便的方法来对该元素 "做一些事情"，如`addClass`，`removeClass`等和其他 DOM 操作方法。 在 jQuery 方法中，选定的元素可以通过`this`关键字访问。 jQuery 的 API 是围绕这个 "选择一个元素并对其进行处理 "的方法而建立的，因此`slider()`方法不需要一个根 DOM 元素的参数。 +**jQuery 补充**：jQuery UI 的 `slider()` 方法（构造函数）接受一个 JavaScript 对象作为自定义选项。执行 `$('#slider')` 会选择 `
` 元素，并返回一个 jQuery 对象，该对象包含用于“对元素执行某些操作”的便捷方法，例如 `addClass`、`removeClass` 等以及其他 DOM 操作方法。在 jQuery 方法中，可以通过 `this` 关键字访问所选元素。 jQuery API 围绕这种“选择一个元素并对其执行某些操作”的方法构建，因此 `slider()` 方法不需要根 DOM 元素的参数。 -slider 可以通过传入一个普通的 JavaScript 对象的选项来进行定制： +可以通过传入一个纯 JavaScript 选项对象来定制滑块： ```html
@@ -36,56 +41,60 @@ slider 可以通过传入一个普通的 JavaScript 对象的选项来进行定 animate: true, max: 50, min: 10, - // See other options here: https://api.jqueryui.com/slider/ + // 在这里查看其他选项：https://api.jqueryui.com/slider/ }); ``` ### Vanilla JavaScript 风格 -在初始化组件方面没有 vanilla JavaScript 风格，因为 vanilla JavaScript 不是一个标准或框架。 但如果你读够了 GreatFrontEnd 对我们的 vanilla JavaScript [UI 编码问题](/questions/formats/ui-coding)的解决方案，你会发现我们推荐的 API 与 jQuery 的类似，构造函数接收一个根元素和选项： +由于 vanilla JavaScript 不是标准或框架，因此没有用于初始化组件的 vanilla JavaScript 风格。但是，如果您阅读了足够多的 GreatFrontEnd 的 vanilla JavaScript [UI 编码问题](/questions/formats/ui-coding) 的解决方案，您会发现我们推荐的 API 与 jQuery 的 API 类似，构造函数接受一个根元素和选项： ```js function slider(rootEl, options) { - // Do something with rootEl and options. + // 对 rootEl 和 options 做一些事情。 } ``` -### React +### React（或类似的基于组件的库） -React 迫使你把 UI 写成包含其自身逻辑和外观的组件。 React 组件是返回标记的 JavaScript 函数（关于如何呈现自身的描述）。 React 组件可以接受 "props"，它本质上是对组件选项的定制。 +React 迫使你将 UI 编写为组件，其中包含逻辑和结构。React 组件是返回标记的 JavaScript 函数，是对其自身如何呈现的描述。 + +React 组件可以接收 `props`，它们本质上是组件的自定义选项。 ```js function Slider({ min, max }) { - // 使用 props 来呈现自定义组件。 + // 使用 props 渲染自定义组件。 return
...
; } ; ``` -组件不会在 root 元素中。 为了将该元素渲染到页面中，需要使用一个单独的 API。 +组件不接受根元素。要将元素渲染到页面中，需要使用单独的 API。 ```jsx import { createRoot } from 'react-dom/client'; import Slider from './Slider'; const domNode = document.getElementById('#gfe-slider'); -// React 将管理此元素内的 DOM。 +// React 将管理此元素中的 DOM。 const root = createRoot(domNode); -// 在元素内显示 Slider 组件。 +// 在元素中显示 Slider 组件。 root.render(); ``` -如果整个页面是 React 应用，你通常不需要自己调用`createRoot()`，因为根/页级组件只有一个`createRoot`调用。 +如果整个页面是一个 React 应用程序，你通常不需要自己调用 `createRoot()`，因为在根/页面级别只有一个 `createRoot()` 调用。 -## 定制外观 +## 自定义外观 -尽管 UI 库中的 UI 组件提供了默认的样式，但开发者通常希望用他们公司/产品的品牌和主题颜色来定制它们。 因此，所有的用户界面组件将允许通过一些方法来定制外观： +即使 UI 库中的 UI 组件提供默认样式，开发人员通常也希望使用其公司/产品的品牌和主题颜色对其进行自定义。 + +因此，大多数 UI 组件（尤其是那些构建为第三方库的组件）将允许通过以下几种方法自定义外观： ### 类注入 -这里的想法很简单，组件接受一个 prop/option，允许开发者提供他们自己的类，这些类被添加到实际的 DOM 元素中。 这种方法不是很稳健，因为如果组件也通过类来添加自己的样式，那么在组件的类和开发者提供的类中可能会有冲突的属性。 +这里的想法很简单，组件接受一个 prop/选项，允许开发人员提供他们自己的类，并且这些类被添加到实际的 DOM 元素中。这种方法不是很健壮，因为如果组件也通过类添加自己的样式，则组件的类和开发人员提供的类中可能存在冲突的属性。 #### React @@ -104,22 +113,22 @@ function Slider({ className, value }) { ``` ```css -/* UI library default stylesheet */ +/* UI 库默认样式表 */ .gfe-slider { height: 12px; } ``` ```css -/* Developer's custom stylesheet */ +/* 开发人员的自定义样式表 */ .my-custom-slider { color: red; } ``` -通过类注入，开发者可以将组件的文本`color`改为`red`。 +通过类注入，开发人员可以将组件的文本 `color` 更改为 `red`。 -如果组件内有许多 DOM 元素，一个`className` prop 是不够的，你也可以为不同元素的`className` 设置多个不同名称的 prop： +如果组件中有许多要定位的 DOM 元素，并且一个 `className` prop 不够用，你还可以为不同元素的 `className` 拥有多个不同命名的 prop： ```jsx import { useId } from 'react'; @@ -149,13 +158,13 @@ function Slider({ label, value, className, classNameLabel, classNameTrack }) { ```js $('#gfe-slider').slider({ - // 在现实中，jQuery UI 在 'class' 字段中使用 + // 实际上，jQuery UI 接受一个 `classes` 字段 // 因为有多个元素。 class: 'my-custom-slider', }); ``` -在现实中，所有 jQuery UI 的组件初始化器都接受`classes`字段，以允许添加额外的类到单个元素。 下面的例子取自[jQuery UI Slider](https://api.jqueryui.com/slider/#option-classes)： +实际上，所有 jQuery UI 的组件初始化器都接受 `classes` 字段，以允许向各个元素添加额外的类。以下示例取自 [jQuery UI Slider](https://api.jqueryui.com/slider/#option-classes)： ```js $('#gfe-slider').slider({ @@ -167,9 +176,9 @@ $('#gfe-slider').slider({ }); ``` -#### 非确定性风格 +#### 缺点：非确定性样式 -类注入有一个不明显的缺点--最终的视觉结果是不确定的，可能不是预期的那样。 以下面的代码为例： +类注入有一个不明显的缺点——最终的视觉结果是不确定的，可能不是预期的结果。以下面的代码为例： ```jsx import clsx from 'clsx'; @@ -186,7 +195,7 @@ function Slider({ className, value }) { ``` ```css -/* UI library 默认样式表 */ +/* UI 库默认样式表 */ .gfe-slider { height: 12px; color: black; @@ -194,30 +203,32 @@ function Slider({ className, value }) { ``` ```css -/* 开发者的自定义样式表 */ +/* 开发人员的自定义样式表 */ .my-custom-slider { - color: red; /* .gfe-slider 也定义了一个颜色的值。*/ + color: red; /* .gfe-slider 也定义了 color 的值。 */ } ``` -在上面的例子中，`.gfe-slider`和`.my-custom-slider`类都指定了`color`，由于这两个选择器具有相同的特殊性，获胜的样式实际上是后来出现在 HTML 页面上的类。 如果样式表的加载顺序没有保证（例如，如果样式表是懒惰地加载的），那么视觉结果将不是确定的。 这时，开发者开始使用`！important`或`.my-custom-slider.my-custom-slider`等黑客手段，让他们的选择器赢得特异性战争，CSS 代码开始变得不可维护。 +在上面的例子中，`.gfe-slider` 和 `.my-custom-slider` 类都指定了 `color`，并且由于这两个选择器具有相同的特异性，因此获胜的样式实际上是出现在 HTML 页面后面的类。 -在 jQuery UI 中，如果一个自定义类被添加，现有的默认值不会被使用。 这消除了 "获胜风格 "的模糊性，但用户现在必须重新实现原类中存在的所有必要风格。 这种方法也可以应用于 React 组件，以解决模糊不清的问题。 +如果样式表的加载顺序无法保证（例如，如果样式表是延迟加载的），则视觉结果将是不确定的。结果是开发人员开始使用 `!important` 或 `.my-custom-slider.my-custom-slider` 等黑客手段来让他们的选择器赢得特异性之战。有了所有这些黑客手段，CSS 代码开始变得难以维护。 -尽管它可能存在缺陷，但类注入仍然是一个非常受欢迎的选择。 +在 jQuery UI 中，如果添加了自定义类，则不使用现有的默认值。这消除了“获胜样式”的歧义，但用户现在必须重新实现原始类中存在的所有必要样式。这种方法也可以应用于 React 组件以解决歧义。 + +尽管存在缺陷，但类注入仍然是一个非常受欢迎的选项。 ### CSS 选择器钩子 -从技术上讲，如果开发者阅读组件的源代码，并通过使用相同的类来定义他们的自定义样式，就可以实现定制。 然而，这样做是很危险的，因为依赖组件的内部结构，而且不能保证类名在将来不会改变。 +从技术上讲，如果开发人员阅读组件的源代码并通过使用相同的类来定义他们的自定义样式，他们可以实现自定义。但是，这样做很危险，因为它依赖于组件的内部结构，并且不能保证类名将来不会改变。 -如果 UI 库的作者能够将这些类/属性作为他们的 API 的一部分，这就有了这些保证： +如果 UI 库作者可以将这些类/属性作为其 API 的一部分，并提供以下保证： -1. 选择器列表已发布，供外部参考。 -2. 已发布的选择器将不会被更改。 如果它们被改变，这将是一个破坏性的变化，需要按照 semver 的要求进行版本升级。 +1. 选择器列表已发布以供外部参考 +2. 现有的已发布选择器将不会更改。如果它们被更改，这将是一个重大更改，并且需要根据 semver 进行版本更新 -然后，这是一种可接受的做法，开发者可以通过在他们的样式表中使用这些选择器来 "钩住 "它们（针对它们）。 +那么这是一个可以接受的做法，开发人员可以通过在他们的样式表中使用这些选择器来“钩住”它们（定位它们）。 -钩住一个组件的选择器的一个例子： +一个钩住组件选择器的例子： ```jsx import { useId } from 'react'; @@ -237,18 +248,21 @@ function Slider({ label, value }) { ``` ```css -/* UI library 默认样式表 */ +/* UI 库默认样式表 */ .gfe-slider { font-size: 12px; } -/* 在这个样式表中没有定义其他的类，gfe-slider-label和gfe-slider-range被添加到组件中，只是为了让开发者获得对底层元素的访问。 */ +/* 此样式表中未定义其他类， +gfe-slider-label 和 gfe-slider-range 被添加 +到组件中，只是为了让开发人员能够访问 +底层元素。 */ ``` ```css -/* Developer's 默认样式表 */ +/* 开发者自定义样式表 */ .gfe-slider { - font-size: 16px; /* 与默认的.gfe-slider冲突 */ + font-size: 16px; /* 与默认的 .gfe-slider 冲突 */ padding: 10px 20px; } @@ -261,7 +275,7 @@ function Slider({ label, value }) { } ``` -这种方法为开发者省去了在组件中传递类的麻烦，因为他们只需要编写 CSS 来定制样式。 [Reach UI](https://reach.tech/styling)是 React 的一个无头 UI 组件库，使用元素选择器。 每个组件在底层 DOM 元素上都有一个`data-reach-*`属性。 +这种方法使开发人员免于将类传递到组件的麻烦，因为他们只需要编写 CSS 来定制样式。 [Reach UI](https://reach.tech/styling) 是一个用于 React 的无头 UI 组件库，它使用元素选择器。 每个组件在底层 DOM 元素上都有一个 `data-reach-*` 属性。 ```css [data-reach-menu-item] { @@ -269,17 +283,17 @@ function Slider({ label, value }) { } ``` -然而，这种方法仍然受到 "类注入 "的非确定性风格问题的影响，并且不容易允许按实例进行样式设计。 如果需要每个实例的样式，这种方法可以与类的注入方法相结合。 +然而，这种方法仍然受到“类注入”带来的不确定性样式问题的影响，并且不容易实现每个实例的样式。 如果需要每个实例的样式，可以将此方法与类注入方法结合使用。 ### 主题对象 -该组件不是接收类，而是接收一个用于样式的键/值的对象。 如果只有一个严格的属性子集需要定制，或者你想把样式限制在几个属性上，这就很有用。 +组件不接收类，而是接收一个用于样式的键/值对象。 如果只有一小部分属性需要自定义，或者您只想将样式限制为少数属性，这将非常有用。 ```jsx const defaultTheme = { color: 'black', height: 12 }; function Slider({ value, label, theme }) { - // Combine with default. + // 与默认值合并。 const mergedTheme = { ...defaultTheme, ...theme }; return ( @@ -306,19 +320,19 @@ function Slider({ value, label, theme }) { ; ``` -然而，由于没有使用有冲突的样式的类，而且内联样式的特异性比类高，所以没有特异性冲突，内联样式将获胜。 然而，需要支持的选项数量可能真的会迅速增长。 内联样式也存在于每个组件实例的 DOM 中，如果这个组件在一个页面中被渲染了数百/数千次，这可能对性能不利。 +但是，由于没有使用具有冲突样式的类，并且内联样式的特异性高于类，因此没有特异性冲突，内联样式将胜出。 但是，需要支持的选项数量可能会增长得非常快。 内联样式也存在于每个组件实例的 DOM 中，如果此组件在页面中呈现数百/数千次，这可能会对性能不利。 -主题对象只是一种将造型限制在某些属性和可选的一组值上的方法，这些值不需要作为内联样式使用，而是可以与其他造型方法相结合。 +主题对象只是一种将样式限制为某些属性的方法，并且可以选择一组可接受的值，这些值不需要用作内联样式，而是可以与其他样式方法结合使用。 -### CSS 预处理程序的编译 +### CSS 预处理器编译 -UI 库通常用 CSS 预处理器编写，如[Sass](https://sass-lang.com/)和[Less](https://lesscss.org/)。 [Bootstrap](https://getbootstrap.com/)是用 Sass 编写的，他们提供了一种方法来[自定义所使用的 Sass 变量](https://getbootstrap.com/docs/5.3/customize/sass/)，以便开发者可以生成一个自定义的 UI 库样式表。 +UI 库通常使用 CSS 预处理器编写，例如 [Sass](https://sass-lang.com/) 和 [Less](https://lesscss.org/)。 [Bootstrap](https://getbootstrap.com/) 使用 Sass 编写，它们提供了一种 [自定义 Sass 变量](https://getbootstrap.com/docs/5.3/customize/sass/) 的方法，以便开发人员可以生成自定义 UI 库样式表。 -这种方法很好，因为它不依赖覆盖 CSS 选择器来实现定制。 此外，产生的 CSS 数量也较少，没有多余的重写样式。 缺点是需要一个编译的步骤。 +这种方法很棒，因为它不依赖于覆盖 CSS 选择器来实现自定义。 产生的 CSS 数量也更少，并且没有多余的被覆盖样式。 缺点是需要一个编译步骤。 ### CSS 变量 / 自定义属性 -[CSS 变量](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)（或更正式地称为 CSS 自定义属性）是由 CSS 作者定义的实体，它包含特定的值以便在整个文档中重复使用。 `var()`函数，如果给定的变量未被设置，它接受回退值。 +[CSS 变量](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)（或更正式地称为 CSS 自定义属性）是由 CSS 作者定义的实体，其中包含要在整个文档中重复使用的特定值。 `var()` 函数，如果给定的变量未设置，它接受回退值。 ```jsx function Slider({ value, label }) { @@ -332,40 +346,40 @@ function Slider({ value, label }) { ``` ```css -/* UI library default stylesheet */ +/* UI 库默认样式表 */ .gfe-slider { - /* 如果没有设置，则回调为12px。 */ + /* 如果未设置，则回退为 12px。 */ font-size: var(--gfe-slider-font-size, 12px); } ``` ```css -/* Developer's custom stylesheet */ +/* 开发者自定义样式表 */ :root { --gfe-slider-font-size: 15px; } ``` -开发者可以通过`:root`选择器为`--gfe-slider-font-size`全局定义一个值，并为`.gfe-slider`类设置字体大小为 15px。 这种方法的好处是它不需要 JavaScript，然而，每个组件的定制将更加麻烦（但仍有可能）。 +开发人员可以通过 `:root` 选择器全局定义 `--gfe-slider-font-size` 的值，并将 `.gfe-slider` 类的字体大小设置为 15px。 这种方法的好处是不需要 JavaScript，但是，每个组件的自定义会更加麻烦（但仍然是可能的）。 -### Render Props +### Render props -在 React 中，render props 是一个组件用来知道要渲染什么的函数 prop。 它对于将行为和表现形式分开是很有用的。 许多行为/无头 UI 库，如[Radix](https://www.radix-ui.com/)、[Headless UI](https://headlessui.com/)和[Reach UI](https://reach.tech/menu-button)大量使用了 render props。 +在 React 中，render props 是组件用来知道要呈现什么的函数 props。 它对于将行为与表示分开很有用。 许多行为/无头 UI 库，如 [Radix](https://www.radix-ui.com/)、[Headless UI](https://headlessui.com/) 和 [Reach UI](https://reach.tech/menu-button) 大量使用 render props。 -{/* TODO: Section on manipulation of component after initialization */} +{/* TODO: 关于初始化后组件操作的部分 */} ## 国际化 (i18n) -你的用户界面是否适用于多种语言？ 增加对更多语言的支持有多容易？ +您的 UI 是否支持多种语言？添加对更多语言的支持有多容易？ -### 避免用某种语言对标签进行硬编码 +### 避免用某种语言硬编码标签 -一些 UI 组件内有标签字符串（例如，图片轮播有上一个/下一个按钮的标签）。 如果能让这些标签字符串成为组件 props/options 的一部分，允许自定义这些标签字符串就更好了。 +一些 UI 组件在其内部有标签字符串（例如，图片轮播有 prev/next 按钮的标签）。最好允许通过将这些标签字符串作为组件 props/options 的一部分来自定义它们。 ### 从右到左的语言 -有些语言（如阿拉伯语、希伯来语）是从右向左阅读的，用户界面必须水平翻转。 该组件可以接受一个 "方向 "props/options，并改变元素的渲染顺序。 例如，在 RTL 语言中，上一页和下一页的按钮将分别在右边和左边。 +一些语言（例如阿拉伯语、希伯来语）是从右向左阅读的，UI 必须水平翻转。组件可以接收一个 `direction` prop/option 并更改元素的渲染顺序。例如，在 RTL 语言中，prev 和 next 按钮将分别位于右侧和左侧。 -使用[CSS 逻辑属性](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)来为你的风格做准备，让你的布局适用于不同的[书写模式](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes)。 +使用 [CSS 逻辑属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Logical_Properties) 来使您的样式具有前瞻性，并让您的布局适用于不同的 [书写模式](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Writing_Modes)。 -{/* TODO: Give examples of how to implement RTL. */} +{/* TODO: 给出如何实现 RTL 的例子。 */} diff --git a/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/en-US.langnostic.json new file mode 100644 index 000000000..a13082c73 --- /dev/null +++ b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/en-US.langnostic.json @@ -0,0 +1,110 @@ +{ + "frontmatter": { + "title": "840f6e65", + "description": "e8d1ee29", + "seo_title": "2ffcae27", + "seo_description": "fe1885a", + "social_title": "2ffcae27" + }, + "content": { + "source": { + "locale": "en-US", + "hashes": [ + "7f1fffed", + "81cc1826", + "bdb69cc8", + "900e38b", + "d3697278", + "1c6e60e8", + "7ec059be", + "e2c69bb6", + "1d54ea6d", + "8ec8cc8e", + "117c7433", + "5f4ca2bc", + "fda09b00", + "1ec3f9b9", + "14e70e0f", + "5f89ebf6", + "4b290d06", + "91cda1b7", + "3b3e557d", + "7ef0c666", + "f2c2fd5c", + "12b04d09", + "2c98cc5a", + "969ca9a6", + "56a2c656", + "3f7c40a", + "b9b66c7f", + "64619fc4", + "2f7a4e16", + "241cc128", + "463e0551", + "3c644c8b", + "4db7b5a0", + "86784729", + "fdc54fc7", + "499e5031", + "edd76fef", + "90c3c142", + "2bd9cd4c", + "5d246309", + "97763a57", + "a0bce83c", + "8f5fb6c2", + "9790b325", + "7bacbe4b" + ] + }, + "targets": { + "zh-CN": [ + "7f1fffed", + "81cc1826", + "bdb69cc8", + "900e38b", + "d3697278", + "1c6e60e8", + "7ec059be", + "e2c69bb6", + "1d54ea6d", + "8ec8cc8e", + "117c7433", + "5f4ca2bc", + "fda09b00", + "1ec3f9b9", + "14e70e0f", + "5f89ebf6", + "4b290d06", + "91cda1b7", + "3b3e557d", + "7ef0c666", + "f2c2fd5c", + "12b04d09", + "2c98cc5a", + "969ca9a6", + "56a2c656", + "3f7c40a", + "b9b66c7f", + "64619fc4", + "2f7a4e16", + "241cc128", + "463e0551", + "3c644c8b", + "4db7b5a0", + "86784729", + "fdc54fc7", + "499e5031", + "edd76fef", + "90c3c142", + "2bd9cd4c", + "5d246309", + "97763a57", + "a0bce83c", + "8f5fb6c2", + "9790b325", + "7bacbe4b" + ] + } + } +} diff --git a/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/zh-CN.mdx index 59799deeb..ebb31a4e3 100644 --- a/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/zh-CN.mdx +++ b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/zh-CN.mdx @@ -1,160 +1,163 @@ --- -title: 前端用户界面问题备忘单 -description: 在前端/网络开发人员面试时，改善你必须建立的用户界面的顶级技巧 - 代码结构、管理状态、可访问性等。 +title: UI 面试问题备忘单 +description: 一份备忘单，可用于在前端面试中改进您必须构建或设计的用户界面。 +seo_title: 用户界面问题备忘单 | 前端面试手册 +seo_description: 一份备忘单，可用于在前端面试中改进您必须构建或设计的用户界面 - 组件组织、状态设计、用户体验等 +social_title: 用户界面问题备忘单 | 前端面试手册 --- -以下是一些提示，可帮助您在前端/ Web 开发人员面试期间改善您必须构建/设计的用户界面。 这些提示可应用于[用户界面编码面试](/front-end-interview-playbook/user-interface)和[前端系统设计面试](/front-end-system-design-playbook/types-of-questions)。 +以下是一些提示，可用于改进您在前端面试中必须构建/设计的用户界面。这些可以应用于 [用户界面编码面试](/front-end-interview-playbook/user-interface) 和 [前端系统设计面试](/system-design/types-of-questions)。 -## 概览 +## 一般 -- **分解问题**:将问题分解为可以逐步构建的阶段/里程碑，并逐步编写您的代码。 -- **经常测试**:完成每个功能后在浏览器中测试 UI，以便您可以尽早捕获漏洞。 较早捕获的错误更容易修复。 确保当前功能正常工作，然后再进行下一个功能。 -- **使用 JavaScript 框架（如果可能）**: 如果您选择使用纯 JavaScript 构建复杂的 UI，您的生活将非常艰难，因为代码可能会很快变得非常长而杂乱。 我们建议使用框架构建应用程序和游戏。 -- **未雨绸缪，计划周全**:考虑一下您的面试官可能要求您添加下一个功能。 设计代码的方式，使新功能可以轻松添加。 +* **分解问题**：将问题分解为相互构建的阶段/里程碑，并逐步编写代码。 +* **经常测试**：在完成每个功能后在浏览器中测试 UI，以便您可以尽早发现错误。尽早发现的错误更容易修复。在继续下一个功能之前，请确保当前功能正常工作。 +* **如果可能，使用 JavaScript 框架**：如果您选择使用 Vanilla JavaScript 构建复杂的 UI，您的生活将会非常艰难，因为代码会变得非常冗长和混乱。我们建议尽可能使用框架构建应用程序和游戏。 +* **提前思考并相应地计划**：考虑一下您的面试官可能要求您接下来添加哪些功能。以一种易于添加新功能的方式设计您的代码。 ## 组件组织 -您如何构建代码？ +您如何组织代码？ -- **采用容器/表示模式**:为了实现良好的解耦合，渲染代码应该与数据源无关。 将组件分成提供数据的外部组件和根据数据呈现视图的内部无状态组件。 这使视图可以从本地组件/应用状态切换到从网络加载的数据等情况，反之亦然，只要更改外部组件，内部组件就可以按原样使用。 -- **将应用程序分解为子组件**: 如果 UI 具有多个部分，请将 UI 分解为较小的组件，并确定每个组件需要的属性/状态。 -- **最小 API 面积**: 不要将不需要的额外数据传递给内部组件。 -- **组件实例化**: 在要求构建 UI 组件时，定义 API（通常是函数）以允许创建多个独立的组件实例，其中包括可配置的选项和默认值。 避免编写代码（例如依赖全局变量）以防止创建单独的 UI 组件实例。 - - **纯 JavaScript**:创建一个接受 DOM 元素（容器元素）和选项对象的函数。 在函数内部，您可以动态创建 DOM 元素并将其附加到容器元素。 组件 API 的另一个灵感来源是[jQuery UI](https://jqueryui.com)，但它依赖于 jQuery。 - - **其他 JavaScript UI 框架**：大多数现代 JavaScript UI 框架（如 React）默认强制您按组件进行思考。 +* **采用 [容器/呈现模式](https://www.patterns.dev/posts/presentational-container-pattern/)**：为了实现良好的解耦，渲染代码应该与数据源无关。将组件分成一个提供数据的外部组件和一个根据数据渲染视图的内部无状态组件。这使得视图可以轻松地从本地组件/应用程序状态切换到从网络加载的数据，反之亦然，您只需更改外部组件，内部组件即可按原样使用。 +* **将应用程序分解为子组件**：如果 UI 有多个部分，请将 UI 分解为更小的组件，并确定每个组件所需的 props/state。 +* **最小的 API 表面积**：不要将多余的数据传递给不需要它们的内部组件。 +* **组件实例化**：当被要求构建 UI 组件时，定义 API（通常是函数）以允许创建组件的多个独立实例以及可配置的选项和默认值。避免编写代码（例如，依赖全局变量），这会阻止创建单独的 UI 组件实例。 + * **Vanilla JavaScript**：创建一个接受 DOM 元素（容器元素）和选项对象的函数。在函数中，您可以动态创建 DOM 元素并附加到容器元素。组件 API 的另一个灵感来源是 [jQuery UI](https://jqueryui.com)，但它依赖于 jQuery。 + * **其他 JavaScript UI 框架**：大多数现代 JavaScript UI 框架（如 React）默认情况下会迫使您从组件的角度进行思考。 ## 状态设计 -状态是您的 UI 中随时间而变化的数据，通常是由用户交互或后台事件（网络请求响应、时间流逝、WebSocket 事件）导致的。 +状态是 UI 中随时间变化的数据，通常是由于用户交互或后台事件（网络请求响应、时间流逝、WebSocket 事件）引起的。 -面试中的大多数 UI 问题都需要状态，因此设计状态非常重要。 +面试中的大多数 UI 问题都需要状态，并且良好地设计状态至关重要。 -- **确定 UI 中所需的最小状态**: 状态越小，代码的可读性和理解能力就越强 -> 减少错误的可能性。 - - 识别必要状态和派生状态。 派生状态是可以从必要状态计算出的状态。 -- **将呈现代码与数据管理代码分开**: 将 UI 作为数据的功能并将代码分为两组（呈现代码和数据管理代码），以获得更好的可读性。 如果使用诸如 React 之类的 JavaScript 框架，则一般强制执行此操作。 -- **对于复杂的状态交互，请使用状态-减少器模式**: 如果问题需要许多状态字段，并且某些操作需要同时更改多个字段，请使用[减少器来汇总状态更新逻辑](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer)。 由 Redux 首先推广，状态-减少器模式鼓励您确定 UI 的状态、可执行的操作以及如何将操作与状态结合以导出下一个状态。 如果您使用 React，则可以通过[`useReducer` React hook](https://reactjs.org/docs/hooks-reference.html#usereducer)实现此模式。 Redux 通常过于适用于面试，而`useReducer`应该足够。 +* **确定 UI 中所需的最少状态**：状态越小，代码就越容易阅读和理解 -> 出现错误的概率越低。 + * 确定基本状态与派生状态。派生状态是可以从基本状态计算的状态。 +* **分离渲染代码与数据管理代码**：使 UI 成为数据的函数，并将代码分成两组（渲染代码和数据管理代码），以提高可读性。如果您使用 JavaScript 框架（如 React），您或多或少会被迫这样做。 +* **对复杂的状态交互使用状态-reducer 模式**：如果问题需要许多状态字段，并且某些操作需要同时更改多个字段，请使用 [reducer 来合并状态更新逻辑](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer)。状态-reducer 模式最初由 Redux 推广，它鼓励您确定 UI 的状态、可以采取的操作以及如何将操作与状态结合起来以推导出下一个状态。如果您使用 React，您可以通过 [`useReducer` React hook](https://reactjs.org/docs/hooks-reference.html#usereducer) 实现此模式。Redux 通常对于面试来说是过度的，而 `useReducer` 应该足够了。 -React 的文档["管理状态"](https://beta.reactjs.org/learn/managing-state)是有关如何正确设计和使用组件状态的杰出资源。 提到的一些想法与 React 无关，可以适用于任何 UI 框架。 +[React 的](https://beta.reactjs.org) 关于 [“管理状态”](https://beta.reactjs.org/learn/managing-state) 的文档是关于如何正确设计和使用组件状态的绝佳资源。提到的一些想法并非特定于 React，可以应用于任何 UI 框架。 ## JavaScript -您的 JavaScript 是否使用现代语言语法和优秀实践，同时避免不良实践？ +您的 JavaScript 是否使用现代语言语法和良好实践，同时避免不良实践？ -- **使用样式指南**:使用 JavaScript 样式指南，如[Airbnb 的 JavaScript 样式指南](https://github.com/airbnb/javascript)。 在开发过程中，静态分析工具如[ESLint](https://eslint.org)可以帮助您执行其中一些良好实践。 但是，在面试期间可能没有这些工具可用。 尝试适应使用良好编码风格编写代码，而不需要工具的帮助。 -- **不要触碰全局环境**:这适用于 Vanilla JavaScript 场景。 避免声明全局变量和全局函数以污染全局范围。 编写立即调用的函数表达式（IIFE）并将所有自定义代码放在其中。 +* **使用样式指南**：使用 JavaScript 样式指南，如 [Airbnb 的 JavaScript 样式指南](https://github.com/airbnb/javascript)。在开发过程中，[ESLint](https://eslint.org) 等静态分析工具可以帮助您执行其中一些良好实践。但是，这些工具可能在面试期间不可用。尝试习惯于在没有工具帮助的情况下编写具有良好编码风格的代码。 +* **不要动全局环境**：这适用于 Vanilla JavaScript 场景。避免通过声明全局变量和全局函数来污染全局范围。编写一个立即调用的函数表达式 (IIFE) 并将所有自定义代码放入其中。 ## HTML -您是否使用正确的属性编写语义化的 HTML？ +您是否使用正确的属性编写语义 HTML？ -- **语义标签**: 为标题使用标题标签，为交互元素使用按钮标签，为连续元素使用列表标签等。 不要为所有内容使用`
`！ -- **标题层次**: 确保标题标签具有层次结构，并且 DOM 中没有多个`

`。 -- **交互元素**: 使用`