首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

分享 10 道常见的 JavaScript 面试题

-328b59806cf7 你在准备 JavaScript 面试?...如果是的话,那今天这篇文章,你一定不能错过,因为我会在文章中分享10 道常见的 JavaScript 面试题以及如何参考答案,帮助你在面试中获得好成绩。 现在,我们就开始吧。 1....讲解JavaScript中的事件冒泡和捕获 事件冒泡和捕获是在 DOM 中传播事件的两种方式。 事件冒泡是指事件首先被最内层元素捕获和处理,然后传播到外层元素。...解释原型继承在 JavaScript 中的工作原理 在 JavaScript 中,所有对象都有一个原型,它们从中继承属性和方法。...被立即调用,然后 setTimeout 被调用,回调函数记录“Hello!” 和 2000 毫秒的时间。之后立即调用 console.log("Ended!") 。

16010

编写模块化CSS——BEM

同样,我也不能立即知道.button-secondary是否也是修饰符! 很具有讽刺意味,但是这个丑陋的语法让我的代码更简洁,更易于维护。...所以强烈推荐你尝试它:) 我们来看看 BEM 的第三个重要部分 —— 元素元素(Elements) 元素是块的子节点。为了表明某个东西是一个元素,你需要在块名添加 __element。...创建新的块来保存孙元素 在上述情况下,你可以轻松地将 .comments__comment 拆为 .comments 和 .comment : ? 这更有意义,不是?...然而,同时由于它们被一起使用,所以为 .block__list 或 .block__item 创建一个新的块是没有意义的 。你会命名什么来保持在上下文中有意义?...我必须立即知道一个 class 放在这个伟大工程中的什么地方,以防止大脑过载。 其他两个方面尚未考虑: 我必须 立即知道组件是否使用 JavaScript

2.1K70
您找到你想要的搜索结果了吗?
是的
没有找到

web前端开发初学者十问集锦(5)

也就是函数的定义与函数调用结合在了一起,是函数的一种定义方式,本质上就是函数表达式(命名的或者匿名的)在创建立即执行; (2)立即执行函数的书写方式 常见的主要有两种方式。...比如 元素不能调整图片位置来防止被覆盖,但是 可以调整文字内容,以防止被浮动的元素覆盖。 总之,浮动的元素是不会遮盖其它的元素内容的。大家可自行验证。...注意: (1)JavaScript变量均为对象。当您声明一个变量时,就创建了一个新的对象。 (2)JavaScript拥有动态类型。...注意: JavaScript语言规定:JS字符串定义不可改变,因此没有办法让string的某个字符发生更改,所以不能使用下标来改变字符串的某个字符,即使这样写也不会报语法错误,只是没有效果。...(包括元素的所有关联文件)完全加载到浏览器才执行,即JavaScript 此时可以访问网页中的所有元素

86220

浏览器学习之渲染原理与渲染优化

还有一些DOM元素对应几个可见对象,它们一般是一些具体复杂结构的元素,无法用一个矩形来描述。...当渲染对象被创建并添加到树中,它们并没有位置和大小,所以当浏览器生成渲染树以后,就会根据渲染树来进行布局(又称回流)。这一阶段浏览器要做的事情就是要弄清各个节点在页面中的确切位置和大小。...通常这一行为又称为“自动重排” 布局阶段结束是会绘制阶段,遍历渲染树并调用渲染对象的paint方法,将它们的内容显示在屏幕上,绘制使用UI基础组件。...async是在下载完成之后,立即异步加载,加载好立即执行,多个带async属性的标签,不能保证加载的顺序 defer是在下载完成之后,立即异步加载。...加载好,如果DOM树还没构建好,则先等DOM树解析好再执行,如果DOM树已经准备好,则立即执行。

1.1K31

编写模块化CSS:命名空间

当我为Mastering Responsive Typography建站,我添加了一个如下所示的付款表单: ? 响应式排版的付款表单 在上面的设计中,您可以看到该表单包含两行输入元素。...你可以选择任何的对象,并把它放在你喜欢的地方,而且并不会破坏你的网站的结构。 这也意味着对象不应该更改外部任何结构。 因此,对象块不能包含任何这些属性/值: absolute 和 fixed 定位。...例如,您刚刚看到.jsCountdown类就可以立即知道,.o-countdown需要JavaScript才能正常工作。...你会这样做? ? 显然咱不能这么干。那么更好的方式就是改变我们的CSS样式。所以或许这么改? ? 虽然改动CSS的版本稍微好一点,但是在排版风格方面,解决问题方式定不会只有一种。...我必须立即知道组件是否使用JavaScript。 我必须立即知道是否可以安全地编辑一个类而不会影响其他任何其他CSS。 我必须立即知道每个class是适合于什么,以防止大脑过载。

2.6K70

详解 JS 中的事件循环、宏微任务、Primise对象、定时器函数,以及其在工作中的应用和注意事项

微任务 微任务是在当前宏任务执行完毕立即执行的任务,事件循环会在每个宏任务之后执行所有队列中的微任务 它们的执行时机是在下一个宏任务开始之前,当前宏任务的后续阶段,微任务的执行时间早于宏任务 微任务通常用于处理异步操作的结果...这些函数是异步的,意味着它们不会阻塞代码的执行,而是在指定的延时将任务加入到 JavaScript 的事件队列中,等待当前执行栈清空再执行。...requestAnimationFrame 的使用示例 假设你想要创建一个简单的动画,使一个元素在水平方向上移动: let xPos = 0; function animate() { xPos...用途选择:process.nextTick 非常适合在当前操作完成立即需要运行的情况,例如在事件或低级逻辑之后立即处理错误或进行清理。...当你更改数据,DOM 不会立刻更新。nextTick 允许你在 DOM 更新完成立即运行回调函数,这对于 DOM 依赖的操作非常有用。

8610

36个助你成为专家需要掌握的JavaScript概念

8、 立即调用函数表达式和模块 立即调用的函数表达式是定义立即运行的函数。它们主要用于避免污染全局作用域。...但是有些人选择Object.create而不是使用new关键词是有原因的。 当用Object.create创建时,你可以使用现有对象作为新创建对象的原型。...它们可以在数组的原型中找到。 如果你有一个数组,你想对每个元素做点什么,那么你可以使用map方法。...每次创建函数时,都会创建JavaScript闭包。 了解应该使用闭包的原因,以便更深入地理解它们。 22、高阶函数 高阶函数是以其他函数作为参数或返回函数的函数。高阶函数让合成释放出最大的能量。...这使得箭头在某些情况下是一个很好的选择,但在另一些情况下则是一个很糟糕的选择。 因此,永远不要养成使用箭头函数的习惯。根据你的用例实现它们

69920

从 8 道面试题看浏览器渲染过程与性能优化

但为了避免因为引入了锁而带来更大的复杂性,Javascript 在最初就选择了单线程执行。 2. 为什么 JS 阻塞页面加载 ?...当 JavaScript 引擎执行时 GUI 线程会被挂起,GUI 更新会被保存在一个队列中等到引擎线程空闲时立即被执行。...减少关键 CSS 元素数量 当我们声明样式表时,请密切关注媒体查询的类型,它们极大地影响了 CRP 的性能 。 3.... 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素...一般一个元素开启硬件加速后会变成合成层,可以独立于普通文档流中,改动可以避免整个页面重绘,提升性能。 注意不能滥用 GPU 加速,一定要分析其实际性能表现。

1.1K40

分享63个最常见的前端面试题及其答案

闭包是在函数返回保持对函数中变量的访问的一种方式。闭包通常用于数据隐私、封装和创建具有持久状态的函数。...const 与 let 类似,但用于在初始分配不应重新分配的变量。 17、“重置”和“规范化”CSS 有什么区别?你会选择哪个,为什么?...可变对象可以随着时间的推移改变其状态,而不可变对象在创建不能修改。JavaScript 中不可变对象的一个例子是字符串。 不变性的优点包括更简单的代码和更容易的调试,而缺点包括潜在的内存开销。...集合不能包含重复值,而数组可以。当唯一性很重要时,集合很有用。 31、你能举一个解构对象或数组的例子? 解构允许您将对象或数组中的值提取到不同的变量中。...37、您能说出对于 JavaScript 应用程序来说很重要的两种编程范例 原型继承和函数式编程是 JavaScript 中两个重要的编程范式。 38、什么是函数式编程?

4.4K20

分享 63 道最常见的前端面试及其答案

闭包是在函数返回保持对函数中变量的访问的一种方式。闭包通常用于数据隐私、封装和创建具有持久状态的函数。...const 与 let 类似,但用于在初始分配不应重新分配的变量。 17、“重置”和“规范化”CSS 有什么区别?你会选择哪个,为什么?...可变对象可以随着时间的推移改变其状态,而不可变对象在创建不能修改。JavaScript 中不可变对象的一个例子是字符串。 不变性的优点包括更简单的代码和更容易的调试,而缺点包括潜在的内存开销。...集合不能包含重复值,而数组可以。当唯一性很重要时,集合很有用。 31、你能举一个解构对象或数组的例子? 解构允许您将对象或数组中的值提取到不同的变量中。...37、您能说出对于 JavaScript 应用程序来说很重要的两种编程范例 原型继承和函数式编程是 JavaScript 中两个重要的编程范式。 38、什么是函数式编程?

18030

为什么 RSC 才是正确答案?

它仔细规划了树中交互元素的放置。然后,React 继续将必要的 JavaScript 逻辑绑定到这些元素。...这三个问题——必须加载整个页面的数据、加载整个页面的 JavaScript 以及水合整个页面——创建了一个从服务器到客户端的全有或全无的瀑布问题,其中每个问题都必须在进行下一个之前先解决。...代码分割意味着你可以将特定的代码段标记为不立即需要加载,从而指示你的捆绑程序将它们分隔成单独的 标记。...这就引出了一个重要的问题:用户真的应该下载这么多数据?其次,当前的方法要求所有 React 组件在客户端进行水合作用,而不考虑它们对交互性的实际需求。...服务器组件允许将渲染过程划分为可管理的块,然后在准备好立即将其传输到客户端。这种方法允许用户更早地开始查看页面的某些部分,而无需等待整个页面在服务器上完成呈现。

22210

5种你未必知道的JavaScript和CSS交互的方法

随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊。本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作。...我们的网页中都有.js文件和.css文件,但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道!...用JavaScript获取伪元素(pseudo-element)属性 大家都知道如何通过一个元素的style属性获取它的CSS样式值,但能获取伪元素(pseudo-element)的属性值?...我们可以使用curl.js等这样JavaScript加载器来延迟加载这些外部资源,可你知道CSS样式表也可以延迟加载,而且在加载成功回调函数会给予通知。...就是这5给你也许还没有发现的CSS和JavaScript交互的方法。你还有新的发现?分享出来!

89720

大话 JavaScript(Speaking JavaScript):第一章到第五章

IIFE 是一个在定义立即调用的函数表达式。在函数内部,存在一个新的作用域,防止tmp成为全局的。请参阅IIFE 引入新的作用域了解 IIFE 的详细信息。...为什么你要使用 JavaScript?本章将从七个重要方面来看,这些方面在你选择编程语言时很重要,并且认为 JavaScript 总体上做得很好: 它是免费提供的?...为了使并行化工作,回调必须以特殊的方式编写;主要限制是不能改变在回调中未创建的数据。 JavaScript 被广泛使用? 通常广泛使用的语言有两个好处。首先,这样的语言有更好的文档和支持。...可以说,JavaScript 中的数组太灵活了:它们不是元素的索引序列,而是从数字到元素的映射。这样的映射可以有空洞:数组“内部”没有关联值的索引。...由于 Sun(现在是 Oracle)对 Java 一词拥有商标,因此标准化的官方名称不能JavaScript。因此,选择了 ECMAScript,源自 JavaScript 和 Ecma。

28910

vue高频面试题合集(三)附答案

$options.el); }};写过自定义指令 原理是什么指令本质上是装饰器,是 vue 对 HTML 元素的扩展,给 HTML 元素增加自定义功能。...Vue模版编译原理知道,能简单说一下?简单说,Vue的编译过程就是将template转化为render函数的过程。...这些被标记的节点(静态节点)我们就可以跳过对它们的比对,对运行时的模板起到很大的优化作用。编译的最后一步是将优化的AST树转换为可执行的代码。...Vue data 中某一个属性的值发生改变,视图会立即同步执行重新渲染?不会立即同步执行重新渲染。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。...只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。谈谈Vue和React组件化的思想1.我们在各个页面开发的时候,会产生很多重复的功能,比如element中的xxxx。

63840

要深入 JavaScript,你需要掌握这 36 个概念

这里列出了36个JavaScript概念,你需要掌握这些概念才能成为一个更懂 JS 的前端开发者。 1.调用堆栈执行 我们都知道堆栈溢出,但是你知道堆栈溢出是由什么原因导致的?...奇怪? 不。 这个特性称为自动装箱。每当读取一个基本类型的时候,JS 后台就会创建一个对应的基本包装类型对象,从而让我们能够调用一些方法来操作这些数据。...使用 new,Object.create 和 Object.assign 创建对象 创建对象有很多方法。 但是,大都会选择Object.create方法而不是new关键字。...每次创建函数时都会在函数创建创建JavaScript闭包。 22. 高阶函数 高阶函数是将其他函数作为参数或返回结果的函数。...这使得箭头函数在某些情况下是一个不错的选择,而在另一些情况下则是一个非常糟糕的选择。 因此,不要一上来就使用箭头函数。 需要根据你实际情况还使用它们。 28.

45910

一年前端面试打怪升级之路_2023-02-27

三者的区别如下: script 立即停止页面渲染去加载资源文件,当资源加载完毕立即执行js代码,js代码执行完毕后继续渲染页面; async 是在下载完成之后,立即异步加载,加载好立即执行,多个带async...属性的标签,不能保证加载的顺序; defer 是在下载完成之后,立即异步加载。...加载好,如果 DOM 树还没构建好,则先等 DOM 树解析好再执行;如果DOM树已经准备好,则立即执行。多个带defer属性的标签,按照顺序执行。...使用absolute或者fixed,使元素脱离文档流,这样他们发生变化就不会影响其他元素 避免频繁操作DOM,可以创建一个文档片段documentFragment,在它上面应用所有DOM操作,最后再把它添加到文档中...将元素先设置display: none,操作结束再把它显示出来。

46020

通过 20 个棘手的ES6面试问题来提高咱们的 JS 技能

问题1:可以解释一下 `ES5` 和`ES6`的区别?.../myModule'; 问题 2:什么是 IIFE (立即调用的函数表达式) 主题: JavaScript 难度: ⭐⭐⭐ IIFE是一个立即调用的函数表达式,它在创建立即执行 ?...主题: JavaScript 难度: ⭐⭐⭐ 选择使用类的一些原因: 语法更简单,更不容易出错。 使用新语法比使用旧语法更容易(而且更不易出错)地设置继承层次结构。...问题 13: ES6 中的临时死区是什么 主题: JavaScript 难度: ⭐⭐⭐⭐ 在 ES6 中,let 和const 跟 var、class和function一样也会被提升,只是在进入作用域和被声明之间有一段时间不能访问它们...它们与模型并不完全对应,因此通常需要选择一个特定的scheme或辅助方法来实现原型中的类。 问题 18: ES6 Map 和 WeakMap 有什么区别?

1.4K10

把 React 作为 UI 运行时来使用

它们总是在重建和删除之间不断循环。 React 元素具有不可变性。例如你不能改变 React 元素中的子元素或者属性。...如果你想要在稍后渲染一些不同的东西,需要从头创建新的 React 元素树来描述它。 我喜欢将 React 元素比作电影中放映的每一帧。它们捕捉 UI 在特定的时间点的样子。它们永远不会再改变。...在这个例子中, 宿主实例会被重新创建。React 会遍历整个元素树,并将其与先前的版本进行比较: dialog → dialog :能重用宿主实例?能 — 因为类型是匹配的。...input → p :能重用宿主实例不能,类型改变了! 需要删除已有的 input 然后重新创建一个 p 宿主实例。...如果我们像函数一样调用 Commonts() ,不管 Page 是否想渲染它们都会被立即执行: ? 但是如果我们传递的是一个 React 元素,我们不需要自己执行 Comments : ?

2.5K40

Web前端面试敲重点知识,14个TypeScript核心基础面试题和答案

随着 JavaScript 项目规模的扩大,它们变得越来越难以维护,首先,要知道JavaScript 从未设计过用于构建大型的应用程序,它最初的目的是为网页提供小型脚本功能的。...14、TypeScript 支持静态类 ?为什么 ? 1、为什么越来越多的企业选择使用TypeScript ? 随着 JavaScript 项目规模的扩大,它们变得难以维护,这有几个原因。...我们使用数组来存储相同类型的值,数组是有序和索引的值集合 索引从 0 开始,即第一个元素的索引为 0,第二个元素的索引为 1,依此类推 image.png 4、什么是 any 类型,何时使用 ?...函数是执行特定代码的代码块 函数可以有选择地接受一个或多个参数,处理它们,并有选择地返回一个值。 image.png 8、如何在 TypeScript 中创建对象 ?...这些语言需要静态类,因为所有代码,即数据和函数,都需要在一个类中并且不能独立存在。静态类提供了一种方法来允许这些功能,而无需将它们与任何对象相关联。

11.4K10
领券