企业内部真题

文章目录

    • 前端面试题:一个是铺平的数组改成树的结构
      • 问题一解析一
      • 问题一解析二
    • 前端面试题:for循环100个接口,每次只调3个
      • 方法一:使用 `async/await` 和 `Promise`
        • 代码解释(1):
        • 代码解释(2):
      • 1. `fetchApi` 函数
      • 2. `concurrentFetch` 函数
      • 3. 生成 100 个接口地址
      • 4. 每次并发调用 3 个接口
      • 总结
      • 方法二:使用递归和 `Promise`
        • 代码解释:
    • 深拷贝 forwardref 用法
      • 深拷贝
        • 概念
        • 实现方法
          • 1. 使用递归实现深拷贝
          • 2. 使用 `JSON.parse` 和 `JSON.stringify` 实现深拷贝
      • `forwardRef`
        • 概念
        • 用法示例
        • 代码解释

1、一个是铺平的数组改成树的结构,递归一下就可以了,第二个是用react写一个短信验证码发送,第三个是链表翻转

2、写个hoc实现传入一个组件,渲染这个组件,在组件染失败的情况下渲染特定的失败组件并上报失败信息,渲染成功上报渲染成功信息,点击上报点击信息

3、for循环100个接口,每次只调3个

4、然后是深拷贝 forwardref用法

前端面试题:一个是铺平的数组改成树的结构

问题一解析一

在前端开发中,将一个铺平的数组转换为树结构是一个常见的需求。通常,铺平的数组中的每个元素会有一个 id 和一个 parentId,通过这两个属性可以确定元素之间的父子关系。下面我们使用递归的方法来实现这个转换。
示例代码

// 定义一个函数,用于将铺平的数组转换为树结构
function arrayToTree(arr, parentId = null) {
   
    // 创建一个空数组,用于存储当前层级的子节点
    const tree = [];
    // 遍历铺平的数组
    for (const item of arr) {
   
        // 检查当前元素的 parentId 是否等于传入的 parentId
        if (item.parentId === parentId) {
   
            // 递归调用 arrayToTree 函数,查找当前元素的子节点
            const children = arrayToTree(arr, item.id);
            // 如果存在子节点,将子节点添加到当前元素的 children 属性中
            if (children.length > 0) {
   
                item.children = children;
            }
            // 将当前元素添加到当前层级的树结构中
            tree.push(item);
        }
    }
    // 返回当前层级的树结构
    return tree;
}

// 示例铺平数组
const flatArray = [
    {
    id: 1, parentId: null, name: 'Root' },
    {
    id: 2, parentId: 1, name: 'Child 1' },
    {
    id: 3, parentId: 1, name: 'Child 2' },
    {
    id: 4, parentId: 2, name: 'Grandchild 1' },
    {
    id: 5, parentId: 2, name: 'Grandchild 2' }
];

// 调用 arrayToTree 函数,将铺平数组转换为树结构
const tree = arrayToTree(flatArray);
// 打印转换后的树结构
console.log(tree);

代码解释
函数定义:arrayToTree 函数接受两个参数,arr 是铺平的数组,parentId 是当前层级的父节点 id,默认为 null,表示根节点。
遍历数组:使用 for…of 循环遍历铺平的数组,对于每个元素,检查其 parentId 是否等于传入的 parentId。
递归查找子节点:如果当前元素的 parentId 等于传入的 parentId,则递归调用 arrayToTree 函数,查找当前元素的子节点。
添加子节点:如果递归调用返回的子节点数组不为空,则将子节点数组添加到当前元素的 children 属性中。
返回树结构:将符合条件的元素添加到当前层级的树结构中,并返回该树结构。
复杂度分析
时间复杂度:,因为对于每个元素,都需要遍历整个数组来查找其子节点。
空间复杂度:,主要用于存储递归调用栈和最终的树结构。

问题一解析二

将一个平铺的数组改成树的结构,可以通过递归的方法来实现。以下是一个示例代码,展示了如何将平铺的数组转换为树的结构:

function arrayToTree(arr, pid = '') {
   
  const tree = [];
  const map = {
   };

  // 首先将所有元素存入map中,key为id,value为元素本身
  arr.forEach(item => {
   
    map[item.id] = {
    ...item, children: [] };
  });

  // 然后根据pid来构建树
  arr.forEach(item => {
   
    if (item.pid === pid) {
   
      tree.push(map[item.id]);
    } else if (item.pid in map) {
   
      map[item.pid].children.push(map[item.id]);
    }
  });

  return tree;
}

// 示例用法
const flatArray = [
  {
    id: '1', pid: '', name: 'root' },
  {
    id: '2', pid: '1', name: 'child1' },
  {
    id: '3', pid: '1', name: 'child2' },
  {
    id: '4', pid: '2', name: 'grandchild1' },
  {
    id: '5', pid: '2', name: 'grandchild2' }
];

const tree = arrayToTree(flatArray);
console.log(JSON.stringify(tree, null, 2));

在上述代码中:

  1. arrayToTree函数接受两个参数:arr(平铺的数组)和pid(当前处理的父ID,初始为空字符串表示根节点)。
  2. 首先创建了一个空数组tree用于存放结果,以及一个空对象map用于快速查找元素。
  3. 遍历平铺数组,将所有元素存入map中,同时初始化每个元素的children属性为空数组。
  4. 再次遍历平铺数组,如果当前元素的pid等于pid参数(即当前处理的父ID),则将其添加到结果数组tree中;否则,如果当前元素的pid

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/973310.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

linux5-多任务--进程fork()

一.多任务:让系统具备同时处理多个任务的能力 1.如何实现多任务 1.1进程:操作系统上正在运行的程序,需要消耗内存和CPU 1.1.1 进程的生存周期:创建、调度、消亡 1.1.1.1进程的创建:每个进程被创建时,操作…

原生稀疏注意力机制(NSA):硬件对齐且可原生训练的稀疏注意力机制-论文阅读

摘要 长上下文建模对于下一代语言模型至关重要,但标准注意力机制的高计算成本带来了巨大的计算挑战。稀疏注意力提供了一种在保持模型能力的同时提高效率的有前途的方向。本文提出了一种名为 NSA(原生可训练稀疏注意力机制) 的方法&#xff…

C++ Primer 库-IO类

欢迎阅读我的 【CPrimer】专栏 专栏简介:本专栏主要面向C初学者,解释C的一些基本概念和基础语言特性,涉及C标准库的用法,面向对象特性,泛型特性高级用法。通过使用标准库中定义的抽象设施,使你更加适应高级…

FlutterAssetsGenerator插件的使用

在Plugins中找到FlutterAssetsGenerator插件,点击安装。 更改生成的资源索引类可以修改名字。 在根目录下创建assets/images文件夹,用于存储图片。 点击images文件夹,鼠标右键点击Flutter:Configuring Paths,pub…

网络安全与防范

1.重要性 随着互联网的发达,各种WEB应用也变得越来越复杂,满足了用户的各种需求,但是随之而来的就是各种网络安全的问题。了解常见的前端形式和保护我们的网站不受干扰是我们每个优秀fronter必备的技能。 2.分类 XSS干扰 CSRF干扰 网络劫持干…

【算法】----多重背包问题I,II(动态规划)

🌹作者:云小逸 📝个人主页:云小逸的主页 📝Github:云小逸的Github 🤟motto:要敢于一个人默默的面对自己,强大自己才是核心。不要等到什么都没有了,才下定决心去做。种一颗树,最好的时间是十年前…

超低失真、超高清晰度的远心工业镜头

随着机器视觉技术的不断提高,工业生产应用机器视觉系统也越来越广泛,大大提高的工厂的效率,而有时候采集的图像有些扭曲变形,也就是失真,图像失真又叫“畸变”,远心镜头就是为纠正传统工业镜头视差而设计一…

JWT认证机制

Session认证机制中需要配合cookie才能实现,由于cookie默认不支持跨域访问,当涉及到前端跨域请求后端接口时,需要做很多额外的配置,才能实现跨域session认证。所以这里不推荐使用session身份认证机制,一般推荐使用jwt认…

嵌入式八股文(四)计算机网络篇

第一章 基础概念 1. 服务 指网络中各层为紧邻的上层提供的功能调用,是垂直的。包括面向连接服务、无连接服务、可靠服务、不可靠服务。 2. 协议 是计算机⽹络相互通信的对等层实体之间交换信息时必须遵守的规则或约定的集合。⽹络协议的三个基本要素:语法、…

数据结构——单向循环链表、双链表、双向循环链表

目录 一、单向循环链表 1.1 单向循环链表的概念 1.2 单向循环链表的操作 1.2.1 单向循环链表的创建 1.2.2 单向循环链表的头插 1.2.3 单向循环链表的遍历 1.2.4 单向循环链表的头删 1.2.5 单向循环链表的尾插 1.2.6 单向循环链表的尾删 1.2.7 约瑟夫环 1.3 单向循环列表所有程…

dify安装

官网教程 https://github.com/langgenius/dify/blob/main/README_CN.md 1、下载源码 git clone https://github.com/langgenius/dify.git 2、进入docker目录 cd dify cd docker cp .env.example .env修改nginx对外端口配置 修改为9000 最后执行:docker compo…

使用Termux将安卓手机变成随身AI服务器(page assist连接)

通过以下方法在安卓手机上运行 Ollama 及大模型,无需 Root 权限,具体方案如下: 通过 Termux 模拟 Linux 环境运行 核心工具: 安装 (安卓终端模拟器)()]。借助 proot-distro 工具安装 Linux 发行版&#xf…

C++ STL中的reverse/unique/sort/lower_bound/upper_bound函数使用

本文主要涉及以下几个函数&#xff1a; reverse&#xff1a;反转序列。unique&#xff1a;移除相邻重复元素。sort&#xff1a;对序列进行排序。lower_bound 和 upper_bound&#xff1a;查找目标值的边界位置。头文件均为<algorithm> 1. reverse 功能&#xff1a;反转指…

QT QLabel加载图片等比全屏自适应屏幕大小显示

最近在工作项目中,遇到一个需求: 1.使用QLabel显示一张图片; 2.当点击这个QLabel时,需要全屏显示;但不能改变原来的尺寸; 3.当点击放大后的QLabel时,恢复原有大小. 于是乎,就有了本篇博客,介绍如何实现这样的功能. 一、演示效果 在一个水平布局中&#xff0c;添加两个Lable用…

C# 背景 透明 抗锯齿 (效果完美)

主要是通过 P/Invoke 技术调用 Windows API 函数 gdi32.dll/user32.dll&#xff0c;同时定义了一些结构体来配合这些 API 函数的使用&#xff0c;常用于处理图形绘制、窗口显示等操作。 运行查看效果 局部放大&#xff0c;抗锯齿效果很不错,尾巴毛毛清晰可见。 using System; u…

Windows10 将Docker虚拟磁盘文件ext4.vhdx迁移至D盘

今天打开电脑发现之前迁移到D盘的ext4.vdx居然占有80多个G不得不重新清理一下了 于是先删除了d盘的ext4.vdx文件 注销了原来的 wsl --unregister docker-desktopwsl --unregister docker-desktop-data 确认 WSL 发行版状态&#xff1a; 运行以下命令以确认当前的 WSL 发行版…

OpenCV二值化处理

1.1. 为什么需要二值化操作 二值化操作将灰度图像转换为黑白图像&#xff0c;即将图像中的像素值分为两类&#xff1a;前景&#xff08;通常为白色&#xff0c;值为 255&#xff09;和背景&#xff08;通常为黑色&#xff0c;值为 0&#xff09;。二值化的主要目的是简化图像&…

深入了解 DevOps 基础架构:可追溯性的关键作用

在当今竞争激烈的软件环境中&#xff0c;快速交付强大的应用程序至关重要。尽管如此&#xff0c;在不影响质量的情况下保持速度可能是一项艰巨的任务&#xff0c;这就是 DevOps 中的可追溯性发挥作用的地方。通过提供软件开发生命周期 &#xff08;SDLC&#xff09; 的透明视图…

由浅入深学习大语言模型RLHF(PPO强化学习- v1浅浅的)

最近&#xff0c;随着DeepSeek的爆火&#xff0c;GRPO也走进了视野中。为了更好的学习GRPO&#xff0c;需要对PPO的强化学习有一个深入的理解&#xff0c;那么写一篇文章加深理解吧。纵观网上的文章&#xff0c;要么说PPO原理&#xff0c;各种复杂的公式看了就晕&#xff0c;要…

【Java八股文】08-计算机网络面试篇

【Java八股文】08-计算机网络面试篇 计算机网络面试篇网络模型网络OSI模型和TCP/IP模型分别介绍一下键入网址到网页显示&#xff0c;期间发生了什么&#xff1f; 应用层- HTTP应用层有哪些协议&#xff1f;HTTP是什么及HTTP报文有哪些部分&#xff1f;HTTP是怎么传输数据的HTTP…