No107.精选前端面试题,享受每天的挑战和学习

本文涉及的产品
.cn 域名,1个 12个月
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: No107.精选前端面试题,享受每天的挑战和学习

ReactRouter基本用法是什么?

React Router是React中用于处理前端路由的库。

它可以帮助我们在单页应用中实现页面之间的导航和路由功能

以下是React Router的基本用法:

  1. 安装React Router:使用以下命令通过npm安装React Router。
npm install react-router-dom
  1. 引入React Router:在需要使用Router组件的地方引入react-router-dom库。
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
  1. 包裹应用程序:使用Router组件将整个应用程序包裹起来,以启用路由功能。
ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);
  1. 定义路由规则:使用Route组件来定义路由规则,指定路径和对应的组件。
function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </div>
  );
}
  1. 创建页面组件:创建对应的页面组件,例如HomeAboutContact
function Home() {
  return <h1>Home</h1>;
}
function About() {
  return <h1>About</h1>;
}
function Contact() {
  return <h1>Contact</h1>;
}
  1. 导航:使用Link组件来创建导航链接,它会渲染为一个 标签,并处理页面的切换。
<nav>
  <ul>
    <li>
      <Link to="/">Home</Link>
    </li>
    <li>
      <Link to="/about">About</Link>
    </li>
    <li>
      <Link to="/contact">Contact</Link>
    </li>
  </ul>
</nav>

通过上述基本用法,我们可以实现前端路由功能,并在单页应用中进行页面之间的导航。React Router提供了更多高级功能,如嵌套路由、路由参数等,可以根据具体需求进一步学习和应用。

说一说map 和 forEach 的区别?

mapforEach都是JavaScript中常用的数组迭代方法,它们有以下区别:

1. 返回值

  • map方法会返回一个新的数组,该数组的元素是在原始数组的每个元素上应用回调函数后的结果数组。
  • forEach方法没有返回值。它只是对原始数组的每个元素执行回调函数,但不会返回任何新的数组。

2. 使用方式

  • map方法可以接收一个回调函数作为参数,回调函数会被应用到原始数组的每个元素上,并返回新的数组。
  • forEach方法也接收一个回调函数作为参数,回调函数会被应用到原始数组的每个元素上,但它没有返回值。

3. 副作用

  • map方法不会修改原始数组,它是通过返回新的数组来实现对元素的转换操作。
  • forEach方法也不会修改原始数组,但是在回调函数中对原始数组的修改是可见的。但请注意,在forEach中修改数组可能导致不可预期的行为。

4. 链式调用

  • map方法支持链式调用,可以在一个map方法的结果上继续调用另一个map方法或其他数组操作方法。
  • forEach方法不支持链式调用,因为它没有返回值。

以下是mapforEach的示例用法:

const numbers = [1, 2, 3, 4, 5];
// map 示例
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // 输出:[2, 4, 6, 8, 10]
// forEach 示例
numbers.forEach((num) => {
  console.log(num);
});
// 输出:
// 1
// 2
// 3
// 4
// 5

总结来说,map方法适用于需要对数组中的每个元素进行转换并生成一个新数组的情况;而forEach方法适用于遍历数组并对每个元素执行一些操作的情况。选择使用哪个方法取决于你的需求和处理结果的预期。

TCP协议的流量控制和拥塞控制

TCP(传输控制协议)是一种可靠的传输协议,它具有流量控制和拥塞控制机制,以确保网络通信的稳定性和公平性。

流量控制:

流量控制是指发送方和接收方之间通过调整数据传输速率来保持接收方可以及时处理接收到的数据的机制。TCP使用滑动窗口(Sliding Window)协议来实现流量控制。

发送方维护一个发送窗口,接收方维护一个接收窗口。发送方根据接收方的接收窗口大小调整发送数据的速率,通过动态调整窗口大小来控制数据发送的速度,确保接收方能够及时接收并处理数据。

具体实现方式如下:

  • 发送方将数据分割成多个TCP段,并将它们依次发送给接收方。
  • 接收方接收到数据后,根据处理能力和缓冲区状态调整接收窗口的大小,并发送给发送方一个窗口大小的确认信息。
  • 发送方根据接收到的确认信息,动态调整发送窗口大小,以控制发送速率。如果接收方的窗口变小,发送方就会降低发送速率,避免发送过多的数据。

拥塞控制:

拥塞控制是指根据网络拥塞程度来控制数据的发送速率,以保证网络的稳定运行。TCP使用拥塞控制机制来防止网络拥塞并进行恰当的反应。

TCP使用拥塞窗口(Congestion Window)和拥塞避免算法来进行拥塞控制。

  • 拥塞窗口表示发送方可发送的数据量。
  • 拥塞避免算法通过逐渐增大发送方可以发送的数据量,直到出现拥塞情况,然后进行相应的调整来控制发送速率。

具体实现方式如下:

  • 发送方维护一个拥塞窗口,用来限制发送方的数据量。
  • 当网络状况良好时,发送方逐渐增加拥塞窗口的大小,提高发送数据的速率。
  • 当网络出现拥塞时,例如发生数据丢失或网络延迟增加时,发送方会检测到这些拥塞信号,并减小拥塞窗口的大小,降低发送速率,以减轻网络负载。

通过流量控制和拥塞控制机制,TCP能够在不同网络状况下保持稳定的数据传输,并有效地避免网络拥塞的发生。这使得TCP成为一种可靠的协议,广泛应用于互联网通信中。

DNS(域名系统)是什么?

DNS(Domain Name System)是互联网上用于将域名(例如www.example.com)转换为对应 IP 地址的分布式命名系统。它是互联网基础设施的重要组成部分。

在互联网上,计算机和其他网络设备使用 IP 地址进行通信。然而,IP 地址是由一系列数字组成的,对于人类来说不太方便记忆和使用。为了解决这个问题,引入了域名系统。

DNS 将域名映射到相应的 IP 地址当用户在浏览器中输入一个域名时,浏览器会发送一个 DNS 查询请求到本地的 DNS 解析器(通常由 ISP 提供)。如果该解析器具有目标域名的解析记录,则会返回对应的 IP 地址。否则,它会向更高级别的 DNS 服务器发送查询请求,直到找到域名对应的 IP 地址。

DNS 的工作原理如下:

  1. 用户在浏览器中输入一个域名,如www.example.com
  2. 浏览器向本地 DNS 解析器发出查询请求,询问该域名的 IP 地址。
  3. 如果本地 DNS 解析器缓存了该域名的 IP 地址,它会立即返回给浏览器。
  4. 如果本地解析器没有缓存,它会向根域名服务器发送查询请求。
  5. 根域名服务器返回给解析器一个顶级域(TLD)的服务器地址,例如.com 的域名服务器地址。
  6. 解析器将查询请求发送到 TLD 服务器。
  7. TLD 服务器返回给解析器该域名对应的权威域名服务器的地址。
  8. 解析器向权威域名服务器发送查询请求。
  9. 权威域名服务器返回给解析器该域名的 IP 地址。
  10. 解析器将 IP 地址返回给浏览器,并将该 IP 地址缓存一段时间。

整个过程可能涉及多个查询和多个 DNS 服务器,但它是透明的,用户通常无需关注。

DNS 的分布式特性和缓存机制使得域名解析过程更高效,并保证了互联网上准确的域名到 IP 地址的映射关系。

除了将域名转换为 IP 地址外,DNS 还负责其他一些功能,如邮件服务器的查找(MX 记录)和其他类型的网络服务记录。DNS 在互联网的运行中起到了至关重要的作用,无论是在 web 浏览、电子邮件还是其他网络通信方面。

附录:「简历必备」前后端实战项目(推荐:⭐️⭐️⭐️⭐️⭐️)

Vue.js 和 Egg.js 开发企业级健康管理项目

带你从入门到实战全面掌握 uni-app

相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
38 0
|
14天前
|
前端开发 开发者 C++
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
32 4
|
1月前
|
算法 前端开发 Java
数据结构与算法学习四:单链表面试题,新浪、腾讯【有难度】、百度面试题
这篇文章总结了单链表的常见面试题,并提供了详细的问题分析、思路分析以及Java代码实现,包括求单链表中有效节点的个数、查找单链表中的倒数第k个节点、单链表的反转以及从尾到头打印单链表等题目。
32 1
数据结构与算法学习四:单链表面试题,新浪、腾讯【有难度】、百度面试题
|
22天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
57 1
|
1月前
|
Java 应用服务中间件 程序员
JVM知识体系学习八:OOM的案例(承接上篇博文,可以作为面试中的案例)
这篇文章通过多个案例深入探讨了Java虚拟机(JVM)中的内存溢出问题,涵盖了堆内存、方法区、直接内存和栈内存溢出的原因、诊断方法和解决方案,并讨论了不同JDK版本垃圾回收器的变化。
30 4
|
2月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
1月前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
80 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
|
1月前
|
前端开发 JavaScript 小程序
前端新机遇!为什么我建议学习鸿蒙?
【10月更文挑战第4天】前端新机遇!为什么我建议学习鸿蒙?
110 0
前端新机遇!为什么我建议学习鸿蒙?
|
1月前
|
XML 前端开发 Java
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
本文阐述了Spring、Spring Boot和Spring MVC的关系与区别,指出Spring是一个轻量级、一站式、模块化的应用程序开发框架,Spring MVC是Spring的一个子框架,专注于Web应用和网络接口开发,而Spring Boot则是对Spring的封装,用于简化Spring应用的开发。
116 0
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
|
1月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题