前端教程文档【免费下载链接】javascript-questionsA long list of (advanced) JavaScript questions, and their explanations :sparkles:项目地址https://gitcode.com/GitHub_Trending/ja/javascript-questions点击查看免费下载本篇文章以 ar-EG/README_ar-EG.md埃及阿拉伯语俗语版为核心骨架完整还原其收录的全部 43 道进阶 JavaScript 选择题及其答案解析并结合仓库英文原版 README.md 中对应的权威解释英文版共 155 道题阿拉伯语两个版本覆盖其中前 43 题对每一题背后的运行机制做中文深度讲解。读完本文你将系统掌握 JavaScript 的变量提升与临时死区、块级作用域、this绑定规则、对象引用语义、原型链与继承、事件传播与事件循环、隐式类型转换、存储 API 与生成器等高频面试考点可直接用于面试准备、知识复习与日常避坑。仓库与文档背景本仓库是一份长期维护的 JavaScript 进阶问答清单创建于 2019 年题目按从基础到进阶组织每题采用问题 多选选项 可折叠答案解析的形式。英文原版位于根目录 README.md文中明确提示题目基于 2019 年前后的 JavaScript 语法与行为且仓库持续更新新题。埃及阿拉伯语版 ar-EG/README_ar-EG.md 由社区以埃及俗语阿拉伯语 英文混写的方式翻译覆盖英文版前 43 题题目编号与英文版一一对应。此外仓库还提供了标准阿拉伯语版 ar-AR/README_AR.md47 题、日语版 ja-JA/README-ja_JA.md86 题等其他语言的译文各语言版本题目结构完全一致方便对照学习。仓库采用 MIT 许可证见 LICENSE允许自由使用与修改。一、变量声明提升Hoisting与临时死区TDZ第 1 题var与let的初始化时机题目代码function sayHi() { console.log(name); console.log(age); var name Lydia; let age 21; } sayHi();正确选项Dundefined和ReferenceError。解析在函数内部name用var声明其内存空间在创建阶段就被预先分配默认值为undefined因此在使用console.log打印时尚未执行到赋值行name仍是undefined。而let以及const虽然也会被提升但不会被初始化在声明行之前访问会触发所谓临时死区Temporal Dead Zone抛出ReferenceError。第 16 题后置递增与前置递增let number 0; console.log(number); console.log(number); console.log(number);正确选项C0、2、2。后置运算符x先返回原值再自增前置运算符x先自增再返回新值。第一行输出0number 变 1第二行先自增到 2 再输出2第三行输出 2。第 20 题use strict禁止隐式全局变量function getAge() { use strict; age 21; console.log(age); }正确选项CReferenceError。在严格模式下给未声明的变量赋值不再自动创建全局变量而是抛出ReferenceError。第 23 题var允许重复声明var num 8; var num 10; console.log(num);正确选项B10。var允许以同名重新声明并覆盖最终值取最后一次赋值的10let与const则不允许重复声明同名变量。第 26 题全局执行上下文在 JavaScript 中global对象和this关键字总是存在。——正确选项A正确。任何代码都运行在全局执行上下文global execution context中其中容纳所有全局变量。第 9 题拼写错误导致的隐式全局对象let greeting; greetign {}; // Typo! console.log(greetign);正确选项A{}。greetign是拼写错误但由于未声明就赋值在非严格模式下会隐式创建为全局对象属性浏览器中即window.greetign {}。官方答案建议使用use strict来避免这类问题呼应第 20 题。二、块级作用域、闭包与循环陷阱第 2 题var与let在循环中的经典闭包问题for (var i 0; i 3; i) { setTimeout(() console.log(i), 1); } for (let i 0; i 3; i) { setTimeout(() console.log(i), 1); }正确选项C3 3 3和0 1 2。由于事件队列机制setTimeout的回调在循环结束后才执行。第一个循环用var声明i它是全局/函数作用域的单一变量循环结束时i已是 3因此三个回调都打印 3第二个循环用let声明i它拥有块级作用域每次迭代都会生成独立的新绑定所以分别输出 0、1、2。第 27 题continue跳过本轮for (let i 1; i 5; i) { if (i 3) continue; console.log(i); }正确选项C1、2、4。continue在条件满足时跳过本轮剩余语句直接进入下一次迭代因此 3 不会被打印。第 30 题事件队列中的setTimeoutconst foo () console.log(First); const bar () setTimeout(() console.log(Second)); const baz () console.log(Third); bar(); foo(); baz();正确选项BFirst、Third、Second。浏览器运行环境由 JavaScript 引擎与 Web APIs如setTimeout共同构成。setTimeout的回调callback会先被安排到任务队列中主线程继续执行后续同步代码foo与baz待调用栈清空后才执行回调因此Second最后输出。三、this绑定规则第 3 题箭头函数没有自己的thisconst shape { radius: 10, diameter() { return this.radius * 2; }, perimeter: () 2 * Math.PI * this.radius, }; shape.diameter(); shape.perimeter();正确选项B20和NaN。diameter是普通方法this指向shape返回10 * 2 20perimeter是箭头函数其this指向定义时的外层作用域如window而不是shape。外层没有radiusthis.radius为undefined运算结果自然是NaN。第 33 题call立即执行 vsbind返回新函数const person { name: Lydia }; function sayHi(age) { console.log(${this.name} is ${age}); } sayHi.call(person, 21); sayHi.bind(person, 21);正确选项DLydia is 21和function。两者都能显式指定this但call会立即调用函数而bind只返回一个绑定了this的新函数不会立即执行因此console.log打印出的是一段函数体。第 12 题new与普通调用的区别function Person(firstName, lastName) { this.firstName firstName; this.lastName lastName; } const lydia new Person(Lydia, Hallie); const sarah Person(Sarah, Smith);正确选项APerson {firstName: Lydia, lastName: Hallie}和undefined。new会创建并返回一个新空对象并把this绑定到它而不带new调用构造函数时this指向全局对象浏览器中即window相当于执行window.firstName Sarah函数本身没有返回值所以sarah是undefined。四、对象、引用与原型链第 6 题对象按引用赋值let c { greeting: Hey! }; let d; d c; c.greeting Hello; console.log(d.greeting);正确选项AHello。对象彼此赋值时不会创建副本只是把引用内存地址复制给新变量c与d指向同一个对象因此通过c修改属性会同时反映到d上。第 46 题英文版数组元素持有引用副本英文版 README.md 对引用语义做了更深入的图解第 46 题const members [person]复制的是引用而非对象本身随后person null只是改变了person这个变量的指向数组第一个元素仍持有原对象引用所以打印结果是[{ name: Lydia }]。注意复制引用与共享同一个引用在行为上是不同的。第 5 题对象键永远是字符串const bird { size: small }; const mouse { name: Mickey, small: true };正确选项Amouse.bird.size不合法。JavaScript 中所有对象键除 Symbol 外底层都是字符串即使书写时不带引号。mouse[bird.size]会先求值bird.size得到small等价于mouse[small]返回true而mouse.bird访问的是不存在的bird属性得到undefined再访问undefined.size便抛出cannot read property of undefined。第 7 题与对包装对象let a 3; let b new Number(3); let c 3; console.log(a b); console.log(a b); console.log(b c);正确选项Ctrue、false、false。new Number(3)虽然显示为数字 3实际却是一个包装对象。只比较值宽松相等3 3为true同时比较值和类型对象与原始值、以及两个不同的对象之间都不严格相等因此后两行均为false。第 11 题实例方法要挂到prototype上function Person(firstName, lastName) { this.firstName firstName; this.lastName lastName; } const member new Person(Lydia, Hallie); Person.getFullName function() { return ${this.firstName} ${this.lastName}; }; console.log(member.getFullName());正确选项ATypeError。直接给构造函数添加属性并不会让已有实例获得该方法。正确的做法是挂到原型上Person.prototype.getFullName function() { return ${this.firstName} ${this.lastName}; };这样所有由Person创建的实例都能共享同一个方法避免在每个实例中复制一份函数从而节省内存。第 14 题并非所有对象都有prototype所有对象都有prototype。——正确选项B错误。唯一的例外是基对象base object它位于原型链的最顶端是所有对象继承方法的源头。第 28 题扩展内置构造函数的原型String.prototype.giveLydiaPizza () { return Just give Lydia pizza already!; }; const name Lydia; console.log(name.giveLydiaPizza());正确选项AJust give Lydia pizza already!。String是一个构造函数可以向其prototype添加方法。字符串等原始值在调用方法时会被自动装箱temporarily boxed为对象因此可以直接调用该原型方法。第 39 题一切皆原始值或对象正确选项Aprimitive 或 object。JavaScript 的原始类型primitives包括boolean、null、undefined、bigint、number、string、symbol。原始值本身没有方法但调用如foo.toUpperCase()时引擎会自动装箱执行完再还原undefined与null除外。第 24 题对象的键是字符串Set 不是const obj { 1: a, 2: b, 3: c }; const set new Set([1, 2, 3, 4, 5]); obj.hasOwnProperty(1); obj.hasOwnProperty(1); set.has(1); set.has(1);正确选项Ctrue、true、false、true。对象的数字键会被转成字符串因此1与1都能命中hasOwnProperty而Set采用严格相等的成员判定数字1与字符串1是两个不同的值。第 25 题重复对象键取最后值const obj { a: one, b: two, a: three }; console.log(obj);正确选项C{ a: three, b: two }。同一对象中出现重名键时后写的值覆盖先写的值。第 29 题对象作键会被转成[object Object]const a {}; const b { key: b }; const c { key: c }; a[b] 123; a[c] 456; console.log(a[b]);正确选项B456。对象作为另一个对象的键时会被自动字符串化为[object Object]。于是a[b]与a[c]实际都是对a[[object Object]]赋值第二次赋值 456 覆盖了 123。第 18 题对象比较的是引用function checkAge(data) { if (data { age: 18 }) { console.log(You are an adult!); } else if (data { age: 18 }) { console.log(You are still an adult.); } else { console.log(Hmm.. You dont have an age I guess); } } checkAge({ age: 18 });正确选项CHmm.. You dont have an age I guess。原始值比较值本身而对象比较的是引用——即便结构和内容完全相同两个不同的对象字面量在内存中也是两个地址。正确的对象比较方式是把它们序列化为字符串或逐一比较内部属性。第 22 题关联对象与数组的按引用陷阱补充第 46 题的结论提醒我们当把对象塞进数组或传给另一个变量时复制的是引用而修改引用副本指向的同一对象所有持有该引用的位置都会同步变化。这是第 6 题与第 46 题共同揭示的核心结论。五、函数、类型转换与运算符第 4 题一元与!true; !Lydia;正确选项A1和false。一元试图把操作数转为数字true转1、false转0。字符串Lydia是真值truthy对它取反就是询问这个真值是否为假结果自然是false。第 15 题隐式类型转换coercionfunction sum(a, b) { return a b; } sum(1, 2);正确选项C12。JavaScript 是动态类型语言允许隐式类型转换。遇到字符串时会把数值转成字符串再拼接因此结果是12。第 48 题英文版运算符结合性英文版第 48 题console.log(3 4 5)的答案是75。当多个运算符优先级相同时按结合性从左到右求值先算3 4 7再与5拼接得到75。这与第 15 题的隐式转换规则一致。第 49 题英文版parseInt的解析行为const num parseInt(7*6, 10)的结果是7。parseInt从字符串第一个字符开始按基数radix解析遇到不是合法数字的字符此处是*即停止忽略后续内容。第 17 题标签模板字面量Tagged Template Literalsfunction getPersonInfo(one, two, three) { console.log(one); console.log(two); console.log(three); } const person Lydia; const age 21; getPersonInfo${person} is ${age} years old;正确选项B[, is , years old]、Lydia、21。使用标签模板时函数收到的第一个参数永远是由纯字符串片段组成的数组不含插值后续参数按顺序接收各插值变量的值。第 19 题剩余参数的typeof是objectfunction getAge(...args) { console.log(typeof args); } getAge(21);正确选项Cobject。...args收集所有实参为一个数组而数组是对象因此typeof返回object。第 21 题eval执行字符串代码const sum eval(10*105);正确选项A105。eval把传入的字符串当作代码执行表达式10 * 10 5求出数值105。第 34 题IIFE 返回值的类型function sayHi() { return (() 0)(); } typeof sayHi();正确选项Bnumber。sayHi返回立即执行函数IIFE的结果0它是数字。顺便复习JavaScript 内置类型共 7 种null、undefined、boolean、number、string、object、symbol函数不是独立类型而属于object。第 36 题typeof的输出永远是字符串console.log(typeof typeof 1);正确选项Bstring。typeof 1返回字符串number再对number求typeof结果自然是string。第 40 题reduce与concat扁平化[[0, 1], [2, 3]].reduce( (acc, cur) { return acc.concat(cur); }, [1, 2] );正确选项C[1, 2, 0, 1, 2, 3]。初始值[1, 2]作为acc的初值第一轮把[0, 1]拼接得到[1, 2, 0, 1]第二轮再拼接[2, 3]最终得到[1, 2, 0, 1, 2, 3]。第 41 题双重取反!!!!null; !!; !!1;正确选项Bfalse、false、true。null与空字符串都是假值双重取反得到false1是真值双重取反得到true。这是把任意值转成布尔值的惯用技巧。第 35 题六个假值题目要求在0、new Number(0)、、 、new Boolean(false)、undefined中选出假值。正确选项A0、、undefined。JavaScript 只有 6 个假值undefined、null、NaN、0、空字符串、false。任何构造函数返回的对象包括new Number(0)、new Boolean(false)都是真值。六、类、事件与浏览器 API第 8 题静态方法不属于实例class Chameleon { static colorChange(newColor) { this.newColor newColor; return this.newColor; } constructor({ newColor green } {}) { this.newColor newColor; } } const freddie new Chameleon({ newColor: purple }); freddie.colorChange(orange);正确选项DTypeError。static方法只存在于构造函数本身上不会被继承到实例中因此实例freddie调用colorChange会抛出TypeError。第 10 题函数也是对象function bark() { console.log(Woof!); } bark.animal dog;正确选项A代码完全合法。JavaScript 中函数也是对象可以像普通对象一样添加属性。第 13 题事件传播的三个阶段正确选项DCapturing Target Bubbling。事件传播依次经历捕获阶段Capturing——事件从最外层祖先元素逐层下传至目标元素目标阶段Target冒泡阶段Bubbling——再从目标逐层向上冒回。第 31 题event.target指向触发元素div onclickconsole.log(first div) div onclickconsole.log(second div) button onclickconsole.log(button) Click! /button /div /div正确选项Cbutton。event.target永远是事件实际发生的元素本例中是button而不是绑定处理器的元素若需阻止事件继续传播可调用event.stopPropagation()。第 32 题冒泡阶段触发顺序div onclickconsole.log(div) p onclickconsole.log(p) Click here! /p /div正确选项Ap然后div。点击p时事件经历三个阶段默认的处理器在最后的冒泡阶段触发因此从最深的目标元素p开始向上依次触发div。第 22 题sessionStorage的生命周期sessionStorage.setItem(cool_secret, 123);正确选项B用户关闭标签页时。sessionStorage中的数据在标签页关闭后被清除而localStorage会一直保留直到被代码显式删除。第 42 题setInterval的返回值setInterval(() console.log(Hi), 1000);正确选项A唯一的标识符unique id。setInterval返回一个定时器 ID可传给clearInterval以停止该定时器的重复执行。七、数组、错误处理与生成器补充第 37 题稀疏数组empty slotsconst numbers [1, 2, 3]; numbers[10] 11; console.log(numbers);正确选项C[1, 2, 3, 7 x empty, 11]。向超出数组长度的索引写入值时中间未被占用的位置会形成空槽empty slots其值被视为undefined不同浏览器控制台的展示格式略有差异如 Chrome 显示为7 × empty。第 38 题catch块的块级作用域(() { let x, y; try { throw new Error(); } catch (x) { (x 1), (y 2); console.log(x); } console.log(x); console.log(y); })();正确选项A1、undefined、2。catch (x)中的x是仅存在于catch块内的局部变量与外层let x无关块内x被赋为 1块外x仍是undefined而y没有块内同名遮蔽直接修改了外层的y为 2。第 43 题展开字符串[...Lydia];正确选项A[L, y, d, i, a]。字符串是可迭代的展开运算符spread operator会把每个字符分别放入数组元素。英文版补充生成器Generator英文版 README.md 第 44 题以function* generator(i) { yield i; yield i * 2; }为例展示了生成器的暂停/恢复机制普通函数一旦执行不可中途停止而生成器每次遇到yield便产出yield而非 return当前值并暂停调用next()后从上次停下的位置继续。第一次next()产出 10第二次产出10 * 2 20。英文版补充Promise.race英文版第 45 题中两个Promise分别在 500ms 与 100ms 后 resolvePromise.race只取第一个定论settle的 Promise 结果因此输出two。这与事件循环的时间语义密切相关。结语与进一步学习埃及阿拉伯语版的 43 道题覆盖了 JavaScript 进阶面试中最常被追问的几大知识板块变量提升与临时死区、var/let在闭包与循环中的差异、箭头函数与this的绑定、call/bind的区别、对象引用与原型链、隐式类型转换与假值列表、事件传播与事件循环、浏览器存储与定时器 API。若想继续挑战更多题目可以对照以下资源深化英文原版完整 155 题README.md标准阿拉伯语版47 题ar-AR/README_AR.md日语版86 题ja-JA/README-ja_JA.md简体中文版zh-CN/README-zh_CN.md建议在本地浏览器控制台或 Node.js 中逐题实际运行代码观察输出并与解析对照再结合 LICENSE 中的 MIT 许可自由将这些题目用于个人项目或团队分享。赞分享前端教程文档【免费下载链接】javascript-questionsA long list of (advanced) JavaScript questions, and their explanations :sparkles:项目地址https://gitcode.com/GitHub_Trending/ja/javascript-questions点击查看免费下载相关推荐如何将闲置电视盒子改造成全能Linux服务器终极指南如何将闲置电视盒子改造成全能Linux服务器终极指南 你是否曾经想过那些被遗忘在角落里的旧电视盒子其实蕴藏着巨大的潜力它们不仅能够播放视频还能变身为功能前端教程文档JavaScript 进阶面试题全解析基于 javascript-questions 德语版 133 道题的精讲JavaScript 进阶面试题全解析基于 javascript questions 德语版 133 道题的精讲 本技术指南围绕开源项目 javascript前端教程文档DiceDB JSON.OBJLEN 命令实战指南统计 JSON 对象键数量DiceDB JSON.OBJLEN 命令实战指南统计 JSON 对象键数量 导读 JSON.OBJLEN 是 DiceDB JSON 数据类型模块中的核心查前端教程文档上一篇3个步骤快速上手B站视频解析工具让下载B站视频变得简单高效下一篇深入解读 Vue 3 响应式核心包vue/reactivity 使用指南与源码级原理剖析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
