25个常见的前端开发人员面试问答

图片来自Pexels

问题：

1. HTML5中的语义元素是什么？
2. CSS3 中的视口高度和宽度？
3. 什么是CSS断点？
4. 关于 ID 和类的 CSS 最佳实践是什么？
5. 什么是 SASS/SCSS？
6. Sass/SCSS 中的 mixin 是什么？
7. ES6 有哪些新特性？
8. 什么是事件冒泡？
9. JavaScript 中的原型继承是什么？
10. JavaScript 中的抽象函数？
11. this箭头函数中的关键字是什么？
12. this普通函数中的关键字是什么？
13. localStorage 和 sessionStorage 有什么区别？
14. 什么是 CORS？
15. 什么是HTTP请求？
16. 我们有多少种HTTP方法？
17. 什么是API和REST API？
18. 发起 AJAX 请求？
19. 浏览器的工作原理是什么？
20. JavaScript 中的纯函数是什么？
21. JavaScript 中的事件处理？
22. JavaScript 执行上下文？
23. 如何在 React 中管理状态？
24. Redux 的工作原理是什么？
25. 什么是展示组件和功能组件？

让我们简单描述一下：

1. HTML5 中的语义元素是什么？

语义元素能够清晰地向浏览器和开发者描述其含义。

• 非语义元素示例：<div>and <span>- 不说明其内容。
• 语义元素示例：<form>，，<table>和<article>- 明确定义了其内容。

更多详情：W3Schools

2. CSS3 中的视口高度和宽度？

视口单位是一套全新的单位，旨在应对我们今天面临的挑战。单页网站、全宽网格布局、排版以及许多其他方面都依赖于视口的大小。此前，我们只能通过百分比或 JavaScript 来勉强解决这些问题。

这套新的单位制由四个不同的单位组成。每个轴两个单位，以及这两个单位的最小值和最大值。

• vw：视口宽度的 1/100
• vh：视口高度的 1/100
• vmin：最小边的百分之一
• vmax最大边的百分之一

注意：IE9使用vm而不是vmin。它不支持vmax。
需要澄清的是：在纵向模式下1vmax等于，而在横向模式下，将等于。1vh1vmax1vw

更多详情：来源

3. 什么是 CSS 断点？

CSS断点是指网站内容根据设备宽度做出响应的点，从而为用户呈现最佳布局。CSS断点也称为媒体查询断点，因为它们与媒体查询一起使用。

/* For mobile phones: */
.col {
  width: 100%;
}

/* For tablets: */
@media only screen and (min-width: 600px) {
  .col-s {width: 50%;}
}

/* For desktop: */
@media only screen and (min-width: 768px) {
  .col-lg {width: 33.33%;}
}

更多详情：后轮驱动

4. 关于 ID 和 Class 的 CSS 最佳实践是什么？

我们需要一些方法来描述 HTML/XHTML 文档中的内容。像 `<div>` <h1>、<p>`<span>` 和 `<div> ` 这样的基本元素<ul>通常就能满足需求，但我们的基本标签集并不能涵盖所有可能的页面元素类型或布局选择。为此，我们需要 ID 和类。例如<ul id="nav">，`<unordered list>` 标签可以让我们专门针对这个无序列表，从而可以对其进行区别于页面上其他无序列表的操作。或者，页面上可能有一个部分没有相关的标签来标识它，例如页脚，我们可以像这样使用 `<div>` 标签<div id="footer">。又或者，我们可能在侧边栏中使用一些框来分隔那里的内容：` <div>` 标签<div class="sidebar-box">。

更多详情：CSS技巧

5. 什么是 SASS/SCSS？

Sass（Synactically awesome style sheets，语法超棒的样式表）是一种样式表语言，最初由 Hampton Catlin 设计，后由 Natalie Weizenbaum 开发。……Sass 是一种预处理器脚本语言，它可以被解释执行或编译成层叠样式表 (CSS)。SassScript 是脚本语言本身。

更多关于Sass/SCSS 官方网站和我的孟加拉语博客文章的详细信息

6. Sass/SCSS 中的 mixin 是什么？

CSS预处理器最强大的功能之一Sass是抽象mixin，它将常见模式抽象成语义化且可重用的代码块。例如，假设你要为一个按钮设置样式，那么你无需记住所有属性，只需使用一个选择器即可包含按钮的样式。

@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

当这段代码编译成 CSS 后，看起来像下面这样：

.box {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}

7. ES6 有哪些新特性？

JavaScript ES6 带来了全新的语法和强大的新功能，让你的代码更现代化、更易读。它允许你用更少的代码实现更多功能。ES6 引入了许多优秀的特性，例如箭头函数、模板字符串、类销毁、模块等等。

• 箭头
• 课程
• 增强型对象字面量
• 模板字符串
• 解构
• 默认 + 其余 + 扩展
• let + const
• 迭代器 + for...of
• 发电机
• Unicode
• 模块
• 模块加载器
• 地图 + 集合 + 弱地图 + 弱集合
• 代理
• 符号
• 可子类化的内置函数
• 承诺
• 数学、数字、字符串、数组和对象 API
• 二进制和八进制字面量
• 反射 API
• 尾部呼叫

更多详情：ES6 特性

8. 什么是事件冒泡？

起泡原理很简单。

当一个元素上发生事件时，它首先会运行该元素的处理程序，然后运行其父元素的处理程序，再一直向上运行其所有祖先元素的处理程序。

假设我们有 3 个嵌套元素：FORM > DIV > P，每个元素都有一个事件处理程序：

 <style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

点击内部<p>第一个运行onclick：

• 关于这一点<p>。
• 然后是外侧<div>。
• 然后是外侧<form>。
• 以此类推，直到文档对象。

更多详情：JavaScript.info

9. JavaScript 中的原型继承是什么？

继承是指一个对象能够访问另一个对象的方法和其他属性。对象可以从其他对象继承东西。在 JavaScript 中，继承是通过一种叫做原型（prototype）的机制实现的，这种继承形式通常被称为原型继承。

DigitalOcean的更多详情

10. JavaScript 中的抽象函数？

在面向对象编程中，抽象是四大核心原则之一（其他三个原则是封装、继承和多态）。抽象之所以重要，主要有两个原因：

• 抽象化隐藏了某些细节，只展示对象的核心特征。它力求减少和提取细节，使开发者能够一次专注于少数几个概念。这种方法提高了代码的可理解性和可维护性。
• 抽象有助于减少代码重复。抽象提供了处理横切关注点的方法，并使我们能够避免代码紧耦合。

缺乏抽象必然会导致可维护性问题。

CSS技巧的更多细节

this11. Arrow 函数中的关键字是什么？

在传统的函数表达式中，this关键字会根据调用上下文绑定到不同的值。然而，对于箭头函数来说，关键字this是词法绑定的。这意味着它使用的是包含该箭头函数的代码中的值。

例如，请看下面的 setTimeout 函数：

// ES5
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(function() {
      console.log(this.id);
    }.bind(this), 1000);
  }
};

在 ES5 示例中，.bind(this)需要使用 `this` 来将上下文传递给函数。否则，默认情况下 `this`this将为 `undefined`。

// ES6
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(() => {
      console.log(this.id);
    }, 1000);
  }
};

ES6 箭头函数不能绑定到关键字，因此它会在词法上向上移动一个作用域，并使用定义该作用域中this的值。this

更多详情请访问freeCodeCamp 博客

this12.普通函数中的关键字是什么？

与其他语言相比，JavaScript 中函数this关键字的行为略有不同。此外，严格模式和非严格模式下的函数关键字也存在一些差异。

在大多数情况下，`this` 的值this取决于函数的调用方式。它不能在执行期间通过赋值来设置，并且每次调用函数时其值都可能不同。ES5 引入了 `set` 方法，bind()可以设置函数的 `this` 值，this而无需考虑函数的调用方式。ES2015 引入了箭头函数，箭头函数不提供自身的 `this`this绑定（它会保留this封闭词法上下文的值）。

MDN的更多详情

13. localStorage、sessionStorage 和 cookies 有什么区别？

好的，localStorage ，顾名思义，是浏览器的本地存储，最多可以节省10MB 的空间。sessionStorage的功能类似，但顾名思义，它是基于会话的，会在浏览器关闭后被删除，而且节省的空间比localStorage小，最多只能节省5MB。而cookie 则是存储在浏览器中的非常小的数据，最多可以节省4KB 的空间，并且可以通过服务器或浏览器访问……

MDN的更多详情

14. 什么是 CORS？

跨域资源共享 (CORS) 是一种机制，它使用额外的HTTPHTTP 标头来告知浏览器，允许运行在一个源（域）的 Web 应用程序访问来自另一个源服务器的特定资源。当 Web 应用程序请求的资源与它自身的源（域、协议和端口）不同时，它就会发出跨域 HTTP 请求。

更多详情：MDN

15. 什么是HTTP请求？

HTTP 请求是计算机之间相互发送的信息包，用于传递信息。本质上，HTTP 请求是由客户端发送到服务器的二进制数据包。HTTP请求包含以下几个部分：请求行、请求头（请求中包含一个或多个请求头）。

Codecademy的更多详情

16. 我们有多少种HTTP方法？

HTTP 定义了一组request methods请求方法，用于指示对给定资源要执行的操作。虽然它们也可以是名词，但这些请求方法有时被称为 HTTP 动词。每个请求方法都实现了不同的语义，但它们也具有一些共同的特性：例如，请求方法可以是安全的、幂等的或可缓存的。

得到

该GET方法请求指定资源的表示形式。使用此方法的请求GET应该只检索数据。

头

该HEAD方法要求返回与请求相同的响应GET，但不包含响应正文。

邮政

该POST方法用于向指定资源提交实体，通常会导致服务器状态发生变化或产生副作用。

放

该PUT方法将目标资源的所有当前表示形式替换为请求有效负载。

删除

该DELETE方法会删除指定的资源。

连接

该CONNECT方法建立到目标资源所标识的服务器的隧道。

选项

该OPTIONS方法用于描述目标资源的通信选项。

痕迹

该TRACE方法沿目标资源的路径执行消息回环测试。

修补

该PATCH方法用于对资源进行局部修改。

17. 什么是 API 和 REST API？

API：

一组函数和程序，允许创建访问操作系统、应用程序或其他服务的功能或数据的应用程序。

更多详情请访问freeCodeCamp 博客

REST API：

REST或RESTful API 设计（表述性状态转移）旨在充分利用现有协议。虽然REST几乎可以基于任何协议使用，但在用于 Web API 时，通常会选择 HTTP。这意味着开发人员无需安装任何库或其他软件即可使用 REST API 设计。REST API 设计由 Roy Fielding 博士在其 2000 年的博士论文中提出。它以极高的灵活性而著称。由于数据不与方法和资源绑定，REST 能够处理多种类型的调用，返回不同的数据格式，甚至可以通过正确实现超媒体来改变其结构。

更多关于SitePoint的信息

18. 发起 AJAX 请求？

这是一个通用的 jQuery AJAX 请求：

$(function() {
    function LoadPersons(data) {
        // do something with data
    }

    $.ajax({
        type: 'POST',
        url: url,
        data: JSON.stringify(parameters),
        contentType: 'application/json;',
        dataType: 'json',
        success: function(result) {
            // do something with persons (data)
            // e.g. LoadPersons(data);
        }
    });
});

更多详情请参阅jQuery 官方文档

19. 浏览器的工作原理是什么？

网络服务器定位信息并将其发送给网络浏览器，浏览器则显示结果。当网络浏览器与服务器通信时，它们请求服务器发送用超文本标记语言 (HTML) 构建的页面。浏览器解析这些页面并将其显示在您的计算机上。

html5rocks的更多详情

20. JavaScript 中的纯函数是什么？

纯函数是指接受输入并返回一个值，且不会修改其作用域之外的任何数据的函数（没有副作用）。其输出或返回值必须取决于输入/参数，并且纯函数必须返回一个值。……以下是一个纯函数。

更多详情请访问freeCodeCamp 博客

21. JavaScript 中的事件处理？

JavaScript 与 HTML 的交互是通过用户或浏览器操作页面时发生的事件来处理的。

页面加载时，这被称为一个事件。用户点击按钮时，点击操作也是一个事件。其他例子包括按下任意键、关闭窗口、调整窗口大小等等。

关于Eloquent Javascript 的更多详细信息

22. JavaScript 执行上下文？

执行上下文 (EC) 指的是 JavaScript 代码执行的环境。这里所说的环境是指 JavaScript 代码可以访问的所有变量、对象和函数，它们共同构成了 JavaScript 代码的运行环境。

更多详情请见中级版

23. 如何在 React 中管理状态？

在 React 中，管理状态的方法一直有很多种。Redux 一直是热门选择，但随着 React 16 和最近发布的新库的推出，现在有了更多选择。你可以使用React Context API、Redux或Mobx等来管理状态。

更多详情请访问Medium

24. Redux 的工作原理是什么？

Action、reducer、action creators、中间件、纯函数、不可变性……
这些术语对我来说大多完全陌生。

Redux非常简单。它使用一个名为 reducer 的函数（名称源自 JavaScript 的 reduce 方法），该函数接受两个参数：一个 action 和一个 next state。reducer 可以访问当前（即将变为上一个）状态，将给定的 action 应用于该状态，并返回所需的下一个状态。

戴夫·塞迪亚的博客上有更多详情

25. 什么是展示组件和功能组件？

展示组件：

它们很少拥有自己的状态（即使有，也是 UI 状态而不是数据）。

有关丹·阿布拉莫夫博客的更多详细信息

功能组件：

如果一个 React 组件对于相同的状态和属性渲染相同的输出，则可以认为它是纯组件。

Log Rocket的更多详情

想了解“全栈开发人员面试题”吗？toptal.com 的这篇文章值得一读。文章标题为
《10 个必备全栈面试题》。

欢迎评论并分享这篇文章到你最喜欢的地方，也别忘了点击爱心按钮鼓励我，让更多人看到你的喜爱。谢谢！

我是谁？

我是Md. Jamal Uddin，一名软件开发人员，目前在孟加拉国达卡工作。我热爱学习新知识，并乐于与他人分享。我的爱好是探索前沿技术，而我的日常工作则是维护传统系统。欢迎在Twitter和LinkedIn上关注我。

注：本文所有数据均来自多个来源，部分数据已注明出处。