- 教程
- 前端
【免费下载链接】Front-end-Developer-Interview-Questions
A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.
Front-end Developer Interview Questions 是一份面向前端求职者、面试官以及自我提升者的开源面试题库。本文以仓库中的 土耳其语翻译版题库 为绝对主体,完整继承其全部 9 大类、150 余道题目与全部编码题代码示例,并结合仓库内 英文原版题库、站点构建配置 等源码资源进行逐类解读与考点扩充。读完本文,你将掌握该题库的完整结构、每道题背后的核心考点,以及如何把这份题库直接用于面试准备、候选人考察或系统性自我测验。
一、这份土耳其语题库是什么:从翻译到独立页面
仓库根目录的 README.md 这样定义项目定位:它包含大量可用于评估候选人的前端面试题,并不推荐在同一候选人身上用完所有题目(那会花费数小时),从清单中挑选几项即可帮助考察目标技能;同时许多题目是开放式问题,可能引出的深入讨论比标准答案更能反映一个人的真实能力。
土耳其语翻译版正是这一核心内容的多语言化产物。它在 src/translations/turkish/README.md 中通过 Front Matter 定义了自身的站点元信息:
--- title: Ön Yüz Yazılımcısı - Front-end Developer - Mülakat Soruları layout: layouts/page.njk permalink: /translations/turkish/index.html lang: tr ---从源码结构看,这段 Front Matter 与站点构建体系深度耦合:
layout: layouts/page.njk表明该页面复用 page.njk 布局,并经由 default.njk 与全局样式(如 content.css、header.css、navigation.css)渲染为完整页面;permalink: /translations/turkish/index.html指定了生成后的站点路径,而lang: tr供 EleventyI18nPlugin(defaultLanguage: 'en')做多语言内容处理;- 语言注册表 src/_data/translations.json 中登记了 34 种语言,其中土耳其语(
Turkish/turkish/)与中文、日语、韩语等并列,被站点首页的翻译索引(translations.njk)统一展示。
因此,这份土耳其语文档并非孤立文本,而是整个多语言面试题库体系中的正式一员,可直接通过git clone后安装依赖、运行 Eleventy 构建在本地站点中查看。
二、题库总览:九大方向一次看全
土耳其语版保留了与英文原版一致的结构骨架,目录如下:
- Genel Sorular(通用问题)
- HTML Soruları(HTML 问题)
- CSS Soruları(CSS 问题)
- JS Soruları(JavaScript 问题)
- Test Soruları(测试问题)
- Performans Soruları(性能问题)
- Ağ Soruları(网络问题)
- Kodlama Soruları(编码问题)
- Eğlenceli Sorular(趣味问题)
对照英文原版可以发现,土耳其语版覆盖了 src/questions/ 下除 Accessibility(无障碍,英文版中以外部链接形式提供)之外的几乎全部方向,同时在通用问题部分还保留了英文原版未完全对齐的早期版本问题(如 5 个样式文件集成、FOUC、CORS 等),内容量非常完整。题库还附有一段重要提示:很多问题的答案不是封闭的,回答方式本身可能引发有趣的讨论,从而比直接答案更能反映候选人的能力——这也是使用本题库时的核心心法。
三、Genel Sorular:通用问题详解
本节考察候选人的学习能力、工程习惯与知识广度,对应英文原版 src/questions/general-questions.md。完整问题如下:
- Dün -ya da bu hafta- neler öğrendin?(你昨天/本周学到了什么?)——考察持续学习意愿,追问可包括:学习渠道、是否落地到项目。
- Kod yazmanda seni cezbeden şey ne?(编码中吸引你的是什么?)——考察内在动机,优秀回答通常涉及"解决问题"或"创造价值"而非单纯工具。
- Deneyimlediğin son teknik meydan okuma / problem neydi ve onu nasıl çözdün?(最近遇到的技术挑战是什么,如何解决?)——建议用 STAR 结构作答:情境、任务、行动、结果。
- Website yada web application hazırlarken UI, güvenlik, performans, SEO, sürdürülebilirlik veya teknoloji için nelere dikkat edersin?(构建网站或 Web 应用时,在 UI、安全、性能、SEO、可维护性或技术选型上注意什么?)——此题覆盖面极广,可结合性能、测试、网络等章节的专项题目作答。
- Bize biraz geliştirme ortamından bahset. -İşletim Sistemi, Web Tarayıcı, Araçlar, Kod Editörü/IDE, vb.-(谈谈你的开发环境:操作系统、浏览器、工具、编辑器/IDE 等。)
- Hangi version kontrol sistemlerine aşinasın?(你熟悉哪些版本控制系统?)——Git 是必然提及项,可补充分支策略(如 Git Flow / Trunk-based)。
- Web sayfasını oluştururken hangi adımları takip edersin?(创建网页时遵循哪些步骤?)——典型回答:需求分析 → 信息架构 → 原型 → 设计 → 语义化 HTML → CSS → JS 增强 → 测试与性能优化。
- Eğer 5 farklı stil dosyası varsa, bunları siteye entegre etmenin en iyi yolu nedir?(如果有 5 个不同的样式文件,如何最好地集成?)——核心考点是"减少请求、合并压缩",答案可落在构建工具合并 + 压缩 + 合理的加载顺序上。
- "Aşamalı geliştirme (progressive enhancement)" ile "kontrollü azalma (graceful degradation)" arasında ne fark vardır?(渐进增强与优雅降级的区别?)——渐进增强是从基础功能出发向上增强;优雅降级是先做完整体验再向下兼容。本题同时出现在英文原版通用问题中,属经典必考题。
- Web sitesindeki dosyaları nasıl optimize edersin?(如何优化网站资源?)——可结合 性能问题 章节:压缩 CSS/JS、图片优化与格式选择、合并请求、利用缓存。
- Belli bir zamanda, tek bir alanadı üzerinden web tarayıcısı ne kadar kaynak indirebilir?(浏览器同一时刻能从单个域名下载多少资源?)——HTTP/1.1 时代通常约 6 个并发连接,例外情况包括 HTTP/2 多路复用(不再受此限制)、CDN 分担、浏览器差异等。注意以当前环境为准:HTTP/2 普及后该限制已显著缓解,但域名分片(domain sharding)思想仍是考点。
- Sayfa yüklenme hızını azaltmanın yollarından 3 tanesini söyleyebilir misin?(说出 3 种降低页面加载时间的方法?)——例如:压缩与合并静态资源、启用缓存与 CDN、延迟加载图片/脚本、避免阻塞渲染的 JS。
- Yeni dahil olduğunuz bir projede, kodlama için
Tabboşluk kullanılıyor ama sizSpaceile boşluk bırakmayı tercih ediyorsunuz. Bu durumda ne yaparsınız?(新项目用 Tab 而你习惯空格,怎么办?)——考察团队协作心态,标准答案是遵循团队现有约定并推动工具化统一(如 .editorconfig / Prettier)。 - Basit bir slayt/galeri sayfası oluşturun(创建一个简单的幻灯片/画廊页面)——实操题,可考察 DOM 操作、事件委托(见 JS 问题)、CSS 动画等。
- Eğer bu yıl bir teknolojide en iyi olmak isteseydin, hangisini seçerdin?(如果今年要精通一项技术,你会选什么?)——考察目标感与技术视野。
- Yazılım standartlarının öneminden bahseder misin?(谈谈软件标准的重要性?)——可提及 W3C、WHATWG 及可访问性、跨浏览器一致性。
- FOUC nedir? FOUC'a nasıl engel olabilirsin?(什么是无样式内容闪烁 FOUC?如何避免?)——浏览器先渲染未带样式的 HTML 再应用 CSS 所致;规避手段包括在
<head>中同步加载 CSS、避免阻塞样式表的延迟注入。 - Web adresinin ilk adres girilirken sayfanın tam olarak yüklenmesine kadar ki işlemleri açıklayabilir misin?(从输入网址到页面完全加载的过程?)——经典全链路题:DNS 解析 → TCP 连接 → TLS 握手 → HTTP 请求 → 服务端处理 → 响应 → 浏览器解析 HTML/CSS/JS → 构建渲染树 → 布局与绘制。此题同时在 网络问题 中重复出现,可见其重要性。
- CSS animasyonlarının JavaScript animasyonlara göre artılarını ve eksiklerini açıklayabilir misin?(CSS 动画相对 JS 动画的优缺点?)——CSS 动画:声明式、可由浏览器优化(合成器处理 transform/opacity)、主线程占用小;JS 动画:灵活可控、可做复杂物理模拟。英文原版还追问了 FOUC 相关的细节,见 src/questions/general-questions.md。
- CORS ne anlama geliyor ve nasıl bir problemi çözüyor?(CORS 是什么,解决什么问题?)——跨域资源共享,通过 HTTP 头(
Access-Control-Allow-Origin等)让服务器声明允许哪些源读取响应,解决浏览器同源策略下的跨域读取限制。
四、HTML Soruları:HTML 问题详解
本节对应英文原版 src/questions/html-questions.md,覆盖文档模式、多语言、存储与脚本加载等基础且高频的考点:
doctypeın işlevi nedir?(doctype的作用?)——触发标准模式(standards mode)渲染,避免 quirks mode 的怪异兼容行为。- Full standards mode, almost standards mode ve quirks mode arasındaki farklar nelerdir?(标准模式、近似标准模式与怪异模式的区别?)——怪异模式模拟老浏览器盒模型等行为;近似标准模式仅对少数表格单元格规则不一致;现代文档使用
<!DOCTYPE html>进入完整标准模式。 - HTML ve XHTML arasındaki farklar nelerdir?(HTML 与 XHTML 的区别?)——XHTML 是 XML 语法的 HTML:要求标签闭合、属性小写、正确嵌套。
- Sayfaların
application/xhtml+xmlolarak çalıştırılmasında herhangi bir sakınca var mıdır?(以application/xhtml+xml提供页面有无问题?)——该 MIME 类型在旧浏览器兼容性差,XML 解析错误会导致整页白屏,因此实践中多使用text/html。 - Sayfa içeriği çoklu dil olan siteyi nasıl sunabilirsin?(如何提供多语言内容的站点?)——
lang属性、<hreflang>、国际化路由(如本仓库/translations/{lang}/的路径结构)与内容翻译策略。 - Çoklu dil olan sayfalarda tasarım veya kodlama olarak nelerden kaçılmalısın?(多语言页面在设计或编码上要避免什么?)——避免硬编码文案、注意文本长度差异导致的布局溢出、注意 RTL 语言与字体、日期与数字的本地化。
data-özelliği ne faydalar sağlar?(data-*属性有什么好处?)——在 HTML 元素上携带自定义数据供 JS 读取(datasetAPI),无需依赖 class 命名 hack。- HTML5'i 'open web platform' olarak düşün. HTML5'in yapı taşları/temelleri nelerdir?(把 HTML5 视为开放 Web 平台,其基石是什么?)——语义化标签、CSS3、Canvas/SVG、Web Storage、Web Workers、拖放、地理定位、音视频等 API 的组合。
cookie,sessionStoragevelocalStoragearasındaki farkları açıklayabilir misin?(三者区别?)——cookie 随每次 HTTP 请求发送且容量小(约 4KB)、可设过期时间;sessionStorage标签页级临时存储;localStorage持久存储,容量更大(约 5MB 级别),后两者不随请求发送。<script>,<script async>ve<script defer>arasındaki farkları açıklayabilir misin?(三种脚本加载方式的区别?)——普通脚本阻塞解析;defer在解析完成后、DOMContentLoaded 前按序执行;async下载完即执行、不保证顺序。- CSS
<link>lerin<head></head>arasında ve JS<script>lerinin</body>etiketinden önce olması niye genelde iyi bir fikirdir? Herhangi bir istisna biliyor musun?(为什么 CSS 链接放<head>、JS 放</body>前?例外?)——CSS 尽早加载避免 FOUC 与重排;JS 放尾部避免阻塞渲染。例外:defer/async脚本、必须提前执行的关键脚本(如样式判断、特性检测)。 - Progressive rendering nedir?(什么是渐进式渲染?)——不等待全部资源而逐步渲染页面,手段包括懒加载、优先渲染首屏、分批渲染。
- Önceden farklı bir HTML templating dili kullandın mı?(你用过不同的 HTML 模板语言吗?)——可提及 Nunjucks/Jinja(本仓库站点正使用 Nunjucks,见 eleventy.config.js 中
templateFormats: ['njk', 'md', 'html'])、Handlebars、Mustache 等。
五、CSS Soruları:CSS 问题详解
本节是题库中题量最大的部分之一,对应英文原版 src/questions/css-questions.md。它从选择器优先级到盒模型、从 BFC 到 Flexbox/Grid,系统覆盖 CSS 核心机制:
- class 与 ID 的区别——ID 页面唯一、权重更高(见下方级联问题),class 可复用。
- "Resetting" ve "normalizing" CSS'ler arasındaki farklar nelerdir?(reset 与 normalize 的区别?)——reset 清零所有默认样式;normalize 保留有用默认值并统一跨浏览器差异。
- Floats 与工作原理——元素脱离文档流向左/右浮动,后续内容环绕;衍生出清除浮动(clearfix)问题。
- z-index 与层叠上下文——z-index 仅在定位元素与 flex/grid 子项等场景生效,且层叠上下文会限制其作用范围。
- BFC (Block Formatting Context)——块级格式化上下文,触发条件包括
overflow非 visible、float、display: inline-block/flow-root等,可用于清除浮动、防止外边距折叠。 - Çeşitli 'clearing' teknikleri(各种清除浮动技术及适用场景)——
clear: both、clearfix(:after伪元素)、overflow: hidden、display: flow-root。 - CSS Sprites 与集成方式——将多张小图合并为一张雪碧图,通过
background-position定位,减少 HTTP 请求。 - Image replacement 技术——用文本配合 CSS 背景图替换图片,保留可访问性(如
text-indent移出文本)。 - 浏览器特定样式问题解决——特性检测与优雅回退、厂商前缀(-webkit-、-moz-)、自动化工具。
- 特性受限浏览器(feature-constrained)的支持策略——渐进增强、
@supports、polyfill。 - İçerikleri görsel olarak gizlemek(仅对屏幕阅读器可见的隐藏方式)——
clip/clip-path裁剪、position: absolute移出视口等,避免display: none。 - Grid 系统的使用——传统 12 栅格框架到现代 CSS Grid。
- Media queries / 移动端 CSS——断点设计、移动优先策略。
- SVG 样式化经验——SVG 属性与 CSS 均可控制,
fill、stroke等。 - 打印样式优化——
@media print、避免背景图、调整页面边距。 - "Kaliteli CSS yazmak için 'işte bu!' dediğiniz şeyler"(写出高质量 CSS 的要点)——命名规范(BEM)、层叠与优先级控制、性能(避免深层选择器)。
- CSS 预处理器(SASS、Compass、Stylus、LESS)优缺点——变量/混合/嵌套提升生产力,但增加构建步骤与调试映射成本。
- 非标准字体的集成——
@font-face、字体子集化、font-display策略。 - Tarayıcılar HTML elementlerin CSS seçicilerle eşleştiğini nasıl algılıyor?(浏览器如何匹配选择器?)——从右向左匹配,所以最右侧选择器(关键选择器)的编写直接影响匹配性能。
- Sözde elementler (pseudo-elements)——
::before/::after生成内容,用于装饰、清除浮动等。 - Box model 与不同盒模型渲染——content-box 与 border-box,通过
box-sizing切换。 * { box-sizing: border-box; }的作用与优势——全局使用 border-box 后,width直接包含内边距与边框,布局计算更符合直觉。- Display 属性取值——block、inline、inline-block、flex、grid、none、contents 等。
- inline 与 inline-block 区别——inline 不可设宽高、垂直 margin 无效;inline-block 可设宽高但仍保持行内排列。
- relative / fixed / absolute / static 定位区别——static 默认;relative 相对自身偏移;absolute 相对最近定位祖先;fixed 相对视口。
- CSS 中 C(Cascading)的优先级如何确定——按重要性 > 来源 > 特异性(ID > class/属性/伪类 > 类型/伪元素)> 源码顺序裁决;可结合
!important与层叠上下文运用。 - 本地/生产环境用过的 CSS 框架及改进想法——考察对框架的理解深度。
- Flexbox / Grid 实践——一维布局 vs 二维布局的取舍。
- Responsive 与 Adaptive 的区别——响应式按视口流式调整;自适应针对预设断点切换固定布局。
- Retina 图形处理——
@2x资源、srcset/image-set、矢量图。 translate()与 absolute positioning 的选择——transform不触发重排、可在合成器上运行,动画性能更优;绝对定位参与文档流计算,可能引发重排。
六、JS Soruları:JavaScript 问题详解
本节是技术深度的主战场,对应英文原版 src/questions/javascript-questions.md,覆盖原型、作用域、异步、事件模型等核心机制:
- Event delegation(事件委托)——利用事件冒泡在父元素统一监听,减少监听器数量、支持动态元素。
- JavaScript 中
this如何工作——由调用方式决定:普通调用、方法调用、new、call/apply/bind、箭头函数词法绑定。英文原版还追问 ES6 中this的变化(箭头函数)。 - Prototypal inheritance(原型继承)——对象通过
__proto__链式查找属性,Object.create与构造函数结合。 - AMD 与 CommonJS 区别——AMD 异步模块(浏览器端),CommonJS 同步(Node 端)。
- IIFE 为什么
function foo(){ }();不工作,如何修复——表达式与声明歧义,需改写为(function foo(){ })();或!function(){}();。 null、undefined与undeclared区别与检查方式——null 显式空值、undefined 未赋值、undeclared 未声明;检查分别用=== null、typeof x === 'undefined'、typeof对未声明变量返回'undefined'。- Closure(闭包)是什么、如何/为何使用——函数记住其词法作用域,用于私有变量、柯里化、回调。
- 匿名函数的使用场景——回调、IIFE、事件处理器、函数式工具。
- 代码组织方式——module pattern、classical inheritance、ES Modules。
- Host objects 与 native objects 区别——宿主对象由环境提供(如
window、document),原生对象由语言规范定义(如Object、Array)。 function Person(){}、var person = Person()、var person = new Person()区别——声明构造器;直接调用返回 undefined 且污染作用域;new创建实例。.call与.apply区别——除参数传递方式(逐个 vs 数组)外功能一致;现代可用...展开替代 apply。Function.prototype.bind——返回绑定this的新函数,不立即执行。undefined与null区别——类型与语义差异(typeof null === 'object')。document.write()何时使用——几乎不用;会阻塞解析且覆盖文档,仅个别同步脚本场景例外。- 特性检测、特性推断与 UA 字符串——推荐特性检测(如
'localStorage' in window);UA 解析不可靠。 - AJAX 详细解释——异步请求技术栈:
XMLHttpRequest/fetch、状态码、JSON 解析、错误处理。 - AJAX 优缺点——无刷新更新、减少整页流量;代价是 SEO 挑战、历史与可访问性问题。
- JSONP 如何工作、为何不算 AJAX——通过
<script>标签跨域回调注入,非 XMLHttpRequest,仅支持 GET 且存在安全风险。 - JavaScript 模板(Mustache.js、Handlebars 等)使用经验——前后端模板共享与 XSS 转义。
- Hoisting(提升)——
var声明与函数声明提升到作用域顶部,赋值不提升;let/const存在暂时性死区。 - Event bubbling(事件冒泡)——事件从目标元素逐级向上传播,与捕获(capturing)相对。
- Attribute 与 property 区别——HTML 属性(字符串)与 DOM 对象属性(任意值),二者在部分场景自动同步(如
id),在部分场景不同步(如value)。 - 为什么扩展 JS 内置对象不是好主意——污染全局、与未来规范冲突、多库冲突。
- document load event 与 DOMContentLoaded 区别——前者等待全部资源(图片、样式)加载完成,后者仅等待 DOM 解析完成。
==与===区别——宽松相等触发类型转换,严格相等不转换。- Same-origin policy(同源策略)——协议、域名、端口一致才可互访;跨域需 CORS 或代理。
- 编码:让
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]工作——扩展Array.prototype.duplicate,返回this.concat(this)。 - 为什么叫三元运算符,"Ternary" 表示什么——三个操作数(条件、真值、假值)。
"use strict";是什么、优缺点——严格模式禁止隐式全局变量、with、重复参数等;优点是可预期与更安全,缺点是旧代码可能报错。- fizzbuzz 循环(3 的倍数输出 "fizz",5 的倍数 "buzz",15 的倍数 "fizzbuzz",到 100)——经典逻辑题,考察循环、条件分支与代码整洁度。
- 为什么不污染全局作用域——避免命名冲突、模块化、可维护性。
load事件的缺点与替代——load过晚;替代为DOMContentLoaded、defer/async、具体资源事件。- SPA 是什么、如何 SEO 友好——单页应用客户端渲染;SSR/预渲染/静态生成可改善 SEO(英文原版 general-questions.md 中也讨论了 SSR/CSR/静态渲染/水合)。
- Promises 及 polyfill 经验——异步链式处理、错误传播。
- Callbacks 与 Promises 优缺点——Promise 避免回调地狱、错误统一处理,但增加一层抽象。
- 编译到 JS 的语言(TypeScript 等)优缺点——类型安全、可维护性 vs 构建复杂度。
- JS 调试技术与工具——DevTools、断点、
console系列、source map。 - 遍历对象属性与数组项的语言结构——
for...of、for...in、Array.forEach/map/filter(英文原版另有forEachvsmap对比)。 - 可变(mutable)与不可变(immutable)对象区别——不可变对象创建后不可修改;JS 例子如
Object.freeze、字符串与数字;不可变性利于可预测性与并发,代价是性能与 GC 压力;实现方式有拷贝、Object.freeze、不可变库。 - 同步与异步函数区别——同步阻塞调用栈,异步由事件循环调度。
- Event loop、call stack 与 task queue——调用栈执行同步任务,任务队列(宏任务/微任务)驱动异步回调。
foo、function foo() {}、var foo = function() {}区别——标识符引用、函数声明(提升)与函数表达式(赋值时创建)。
七、Test / Performans / Ağ:测试、性能与网络问题详解
测试问题(对应 src/questions/testing-questions.md)
- 测试代码的优缺点——优点是回归保障、重构信心、文档化行为;缺点是编写与维护成本、初期速度下降。
- 用什么工具测试功能——单元测试(Jest/Vitest/Mocha)、端到端(Playwright/Cypress)、覆盖率工具。
- 单元测试与功能/集成测试的区别——单测隔离验证最小单元;集成/功能测试验证模块协作与用户流程。
- 代码风格 lint 工具的目的——统一风格、静态发现潜在错误、规范团队协作。
性能问题(对应 src/questions/performance-questions.md)
- 查找性能问题的工具——DevTools Performance 面板、Lighthouse、网络面板、内存分析器。
- 提升滚动性能的方法——使用
transform/opacity动画、避免频繁强制同步布局、防抖节流、虚拟滚动。 - layout、painting、compositing 区别——布局(计算几何尺寸)、绘制(生成像素)、合成(GPU 层合并);合成层操作最便宜。
网络问题(对应 src/questions/network-questions.md)
- 为什么传统上从多个域名提供静态资源更好——突破单域名并发连接数限制(并行下载);注意 HTTP/2 后应避免过度分片。
- 输入 URL 到页面加载完成的全过程——DNS → TCP → TLS → HTTP → 渲染管线(同通用问题章节)。
- Long-Polling、Websockets 与 Server-Sent Events 区别——长轮询是模拟推送的 HTTP 请求;WebSocket 全双工持久连接;SSE 服务器到客户端的单向事件流。
- 请求/响应头解析:
- Expires / Date / Age / If-Modified-Since:过期时间、响应生成时间、缓存已存在时间、条件请求;
- Do Not Track:用户隐私偏好声明;
- Cache-Control:
max-age、no-cache、no-store等缓存策略; - Transfer-Encoding:分块传输编码;
- ETag:实体标签用于条件验证;
- X-Frame-Options:点击劫持防护。
- HTTP 方法——GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE、CONNECT 及其语义与幂等性。
八、Kodlama Soruları:编码题专项解析
本节包含 8 道带代码的实做题,是土耳其语版题库中信息密度最高的部分,全部代码示例必须完整保留并逐一解析:
1.foo的值是多少?
var foo = 10 + '20';答案:"1020"。数字与字符串相加触发类型转换,10被转为字符串后拼接。
2. 如何让这段代码工作?
add(2, 5); // 7 add(2)(5); // 7答案:柯里化。add需同时支持一次传两参和分两次传参:
function add(x, y) { if (y !== undefined) return x + y; return function (z) { return x + z; }; }3. 下列表达式返回什么?
"i'm a lasagna hog".split("").reverse().join("");答案:"goh angasal a m'i"。先按字符拆分、反转、再拼接。
4.window.foo的值是什么?
( window.foo || ( window.foo = "bar" ) );答案:"bar"。window.foo未定义,短路或会执行赋值表达式,整个表达式返回"bar"。
5. 下面两个 alert 的输出是什么?
var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);答案:第一个 alert 输出"Hello World";第二个 alert 抛出ReferenceError,因为bar是 IIFE 内部的局部变量,外部不可访问(foo + bar中bar未定义)。
6.foo.length的值是多少?
var foo = []; foo.push(1); foo.push(2);答案:2。数组被 push 了两个元素。
7.foo.x的值是什么?
var foo = {n: 1}; var bar = foo; foo.x = foo = {n: 2};答案:foo.x是undefined。复合赋值链的执行顺序是:先计算foo.x的引用(此时foo仍指向{n:1}),再把{n:2}赋给foo,最后把{n:2}赋给foo.x(即bar.x)。最终bar是{n:1, x:{n:2}},foo是{n:2}。
8. 这段代码打印什么?
console.log('one'); setTimeout(function() { console.log('two'); }, 0); console.log('three');答案:依次打印one、three、two。setTimeout即使延迟为 0 也会进入任务队列,在同步代码执行完后才执行。英文原版 coding-questions.md 在此基础上加入了Promise.resolve().then变体(微任务先于宏任务),可一并练习。
九、Eğlenceli Sorular:趣味问题详解
本节用于缓解面试压力、考察候选人的个性与文化契合度(对应英文原版 src/questions/fun-questions.md):
- 做过最酷的项目是什么?
- 喜欢的开发者工具有哪些?
- 前端社区中谁影响了你?
- 有宠物相关的项目吗?什么类型?
- Internet Explorer 你最喜欢的特性是什么?——开放式幽默题,常引出对兼容性工作的思考。
- 你的咖啡怎么喝?——最经典的破冰题。
十、如何把这份题库用起来
结合仓库结构与题库自带提示,推荐三种用法:
- 面试官侧:不要一次用完全部题目(那会耗时数小时)。从 通用问题、HTML、CSS、JavaScript 等各方向精选 3~5 题,重点利用开放式问题引出深层讨论。
- 求职者侧:按"通用 → HTML → CSS → JS → 编码"的顺序自测,编码题务必亲手运行;测试、性能、网络三类可结合 DevTools 实操验证。
- 自我提升侧:把题库当作知识地图,逐题对照英文原版 src/questions/ 下的完整清单查漏补缺。
十一、参与与许可
土耳其语版在文档末尾记录了项目历史:该项目于 2009 年由 @paul_irish、@bentruyman、@cowboy、@ajpiano、@SlexAxton、@boazsender、@miketaylr、@vladikoff、@gf3、@jon_neal、@sambreed、@iansym 等贡献者发起,目前由 roblarsen 与 vvscode 维护,并持续由大量社区贡献者通过翻译与内容补充保持活跃。贡献者完整名单见 CONTRIBUTORS.md,授权条款见 LICENSE.md。如需在本仓库中查看其他语言的翻译版本,可查阅 src/translations/ 目录(含中文、日文、韩文等 30 余种语言)与语言注册表 src/_data/translations.json。
一句话总结:这份土耳其语版前端面试题库完整承接了英文原版的九大知识体系与全部编码示例,既是土耳其语开发者求职备考的实用手册,也是任何语言背景下系统检验前端基本功的可靠清单——配合英文原版 src/questions/ 目录逐题对照学习,效果最佳。
- 教程
- 前端
【免费下载链接】Front-end-Developer-Interview-Questions
A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.
相关推荐
React Toast Notifications高级用法:10个实用技巧提升用户体验
React Toast Notifications高级用法:10个实用技巧提升用户体验 React Toast Notifications是一个轻量级且功能强大
Kine监控与运维:Prometheus指标收集与健康检查全攻略
Kine监控与运维:Prometheus指标收集与健康检查全攻略 Kine作为一款轻量级的Kubernetes存储后端,允许将Kubernetes数据存储在My
云原生后端Front-end-Developer-Interview-Questions项目深度解析:前端面试宝典
Front end Developer Interview Questions项目深度解析:前端面试宝典 Front end Developer Intervi
教程前端
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考