企业内部真题

news/2025/2/22 2:13:51

文章目录

    • 前端面试题:一个是铺平的数组改成树的结构
      • 问题一解析一
      • 问题一解析二
    • 前端面试题: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 属性中。
返回树结构:将符合条件的元素添加到当前层级的树结构中,并返回该树结构。
复杂度分析
时间复杂度:,因为对于每个元素,都需要遍历整个数组来查找其子节点。
空间复杂度:,主要用于存储递归调用栈和最终的树结构。

问题一解析二

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

javascript">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

http://www.niftyadmin.cn/n/5861521.html

相关文章

thread---基本使用和常见错误

多线程基础 一、C多线程基础 线程概念&#xff1a;线程是操作系统能够调度的最小执行单元&#xff0c;同一进程内的多个线程共享内存空间头文件&#xff1a;#include <thread>线程生命周期&#xff1a;创建->执行->销毁&#xff08;需显式管理&#xff09;注意事…

如何将MySQL数据库迁移至阿里云

将 MySQL 数据库迁移至阿里云可以通过几种不同的方法&#xff0c;具体选择哪种方式取决于你的数据库大小、数据复杂性以及对迁移速度的需求。阿里云提供了多种迁移工具和服务&#xff0c;本文将为你介绍几种常见的方法。 方法一&#xff1a;使用 阿里云数据库迁移服务 (DTS) 阿…

C语言基础系列【15】union 共用体

博主介绍&#xff1a;程序喵大人 35- 资深C/C/Rust/Android/iOS客户端开发10年大厂工作经验嵌入式/人工智能/自动驾驶/音视频/游戏开发入门级选手《C20高级编程》《C23高级编程》等多本书籍著译者更多原创精品文章&#xff0c;首发gzh&#xff0c;见文末&#x1f447;&#x1f…

前端PDF转图片技术调研实战指南:从踩坑到高可用方案的深度解析

本文以真实业务场景为背景&#xff0c;深入剖析前端PDF转图片的 7大核心指标 &#xff0c;通过3000字详解5种方案对比性能压测数据&#xff0c;输出可复用的技术调研方法论。 一、技术调研认知误区与破局之道 1.1 需求理解典型翻车现场 // 错误案例&#xff1a;未明确需求边界…

【系统架构设计师】需求工程

目录 1. 说明2. 软件需求3. 需求阶段4. 需求管理5. 例题5.1 例题1 1. 说明 1.软件需求目前并没有统一的定义&#xff0c;但都包含以下几方面的内容。2.用户解决问题或达到目标所需条件或权能&#xff08;Capability&#xff09;。系统或系统部件要满足合同、标准、规范或其他正…

2月17日c语言框架

C语言框架以及常用函数 1&#xff0c;scanf&#xff08;&#xff09; 2&#xff0c;printf&#xff08;&#xff09; 1scanf&#xff08;&#xff09;函数的特点&#xff0c;必须填写参数&#xff0c;不然一定会报错 2输入一个整数&#xff0c;按回车之后&#xff0c;会出…

alt+tab切换导致linux桌面卡死的急救方案

环境 debian12 gnome43.9 解决办法 观察状态栏&#xff0c;其实系统是没有完全死机的&#xff0c;而且gnome也可能没有完全死机。 1. alt f4 关闭桌面上的程序&#xff0c;因为这个方案是我刚刚看到的&#xff0c;所以不确定能不能用&#xff0c;比起重启系统&#xff0c;…

嵌入式 Linux:使用设备树驱动GPIO全流程

文章目录 前言 一、设备树配置 1.1 添加 pinctrl 节点 1.2 添加 LED 设备节点 二、编写驱动程序 2.1 驱动程序框架 2.2 编译驱动程序 三、测试 总结 前言 在嵌入式 Linux 开发中&#xff0c;设备树&#xff08;Device Tree&#xff09;和 GPIO 子系统是控制硬件设备的重要工具…