企业内部真题

ops/2025/2/22 1:11:46/

文章目录

    • 前端面试题:一个是铺平的数组改成树的结构
      • 问题一解析一
      • 问题一解析二
    • 前端面试题: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 是否等于传入的 parentIdif (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.ppmy.cn/ops/160382.html

相关文章

C# ASP.NET的未来发展趋势

.NET学习资料 .NET学习资料 .NET学习资料 在快速发展的技术浪潮中,C# ASP.NET不断顺应时代潮流,展现出一系列令人瞩目的未来发展趋势。这些趋势不仅反映了技术的进步,也为开发者带来了更多的机遇和挑战。 云原生应用开发 随着云计算的普及…

前沿科技:改变生活的十大趋势

区块链技术在版权中发挥着重要作用。它通过分布式账本,以透明和不可篡改的方式记录创作信息,从而创作者的权益。每次创作和修改都会被记录在链上,确保信息的真实性和完整性。 区块链的去中心化特性使得创作者可以直接与消费者互动。通过智能…

【ISO 14229-1:2023 UDS诊断(ECU复位0x11服务)测试用例CAPL代码全解析⑧】

ISO 14229-1:2023 UDS诊断【ECU复位0x11服务】_TestCase08 作者:车端域控测试工程师 更新日期:2025年02月17日 关键词:UDS诊断协议、ECU复位服务、0x11服务、ISO 14229-1:2023 TC11-008测试用例 用例ID测试场景验证要点参考条款预期结果TC11-008多复位请求冲突处理连续发送…

HarmonyOS全栈开发指南:从入门到精通,构建万物智联的未来生态(二)

二、开发环境与工具链 6. DevEco Studio安装与配置全攻略 安装步骤: 下载DevEco Studio安装包: 访问华为开发者官网,进入DevEco Studio下载页面。根据你的操作系统(Windows、macOS或Linux),选择相应的安…

基于微信小程序的电影院订票选座系统的设计与实现,SSM+Vue+毕业论文+开题报告+任务书+指导搭建视频

本系统包含用户、管理员两个角色。 用户角色:注册登录、查看首页电影信息推荐、查看电影详情并进行收藏预定、查看电影资讯、在线客服、管理个人订单等。 管理员角色:登录后台、管理电影类型、管理放映厅信息、管理电影信息、管理用户信息、管理订单等。…

基于SpringBoot的高校教学资料管理系统的设计与实现(源码+SQL脚本+LW+部署讲解等)

专注于大学生项目实战开发,讲解,毕业答疑辅导,欢迎高校老师/同行前辈交流合作✌。 技术范围:SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容:…

【Android】Android 悬浮窗开发 ( 动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

文章目录 一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后返回处理 二、悬浮窗 前台服务和通知1、前台服务 启动 悬浮窗 的必要性① 保持悬浮窗存活② 悬浮窗的要求③ 悬浮窗版本兼容 2、其它类型服务简介① 前台服务…

基于WebGIS技术的校园地图导航系统架构与核心功能设计

本文专为IT技术人员、地理信息系统(GIS)开发者、智慧校园解决方案架构师及相关领域的专业人士撰写。本文提出了一套基于WebGIS技术的校园地图导航系统构建与优化方案,旨在为用户提供高效、智能、个性化的导航体验。如需获取校园地图导航系统技…