根据 parentId 对对象数组进行重构

JavaScript数组迭代方法实战:filter、map、forEach核心差异与避坑指南 JavaScript数组迭代方法是前端开发中最基础也最易误用的数据处理工具。从概念上讲,它们代表声明式编程范式下的数据契约:filter用于逻辑筛选、map专注纯数据转换、forEach专司副作用执行、reduce解决聚合与结构重组。其技术价值在于提升代码可预测性、支持不可变数据流、天然适配React/Vue响应式体系。典型应用场景涵盖电商商品筛选、权限树构建、列表格式化与错误防御处理。本文聚焦真实工程痛点——如invalid argument supplied for foreach()、filter f 阅读详情

根据 parentId 对对象数组进行重构

题目:
const nodeList = [{ id: '3', parentId: '1' }, { id: '1', parentId: '' }, { id: '2', parentId: '4' }]
根据 parentId 和 id 相匹配,重构对象数组得到:

const re = [{
            id: '1',
            parentId: '',
            children: [{
                id: '3',
                parentId: '1'
            }]
        }, {
            id: '2',
            parentId: '4'
        }]
使用一个数组和一个对象、三个 for 循环
function transformToTree(nodeList) {
            var arr = [];
            var object = {};
            for (let key of nodeList) {
                object[key.id] = {
                    id: key.id,
                    parentId: key.parentId,
                    children: []
                }
            }  // 将每一项都添加进对象中,并创建空的 children 属性
            for (let item of nodeList) {
                if (object[item.parentId]) object[item.parentId]["children"].push(item);
            }  //如果存在 id 和这个 parentId 对应,就找到了自己的父节点,就将这个 item 添加进对应对象的 children 数组中去
            for (let result of nodeList) {
                if (!object[result.parentId]) {
                    arr.push(object[result.id]);
                }
            }  //在上一个 for 循环中已经将每一个父节点对应的孩子添加完毕,这个 for 循环判断每一项 parentId 和 object 中的 id 相对应,没有的话直接添加进 arr 数组
            console.log(arr);
        }
基于MCP协议与Cursor IDE实现AI驱动GameMaker Studio 2项目自动化操作 在AI辅助编程领域,模型上下文协议(MCP)正成为连接AI模型与外部工具的关键桥梁。该协议定义了AI客户端与工具服务器间的标准化通信机制,使模型能够安全、结构化地调用本地环境功能。其技术价值在于将AI能力从单纯的代码生成扩展到对项目资产和开发环境的直接操作,实现了从自然语言指令到项目结构变更的无缝转换。在游戏开发场景中,这一技术尤其适用于GameMaker Studio 2等引擎的快速原型构建与批量资源管理。本文通过构建一个GameMaker MCP服务器,演示了如何利用Cursor IDE的Agent功能 阅读详情

相关推荐

Vue3动态菜单权限系统:从数据解析到路由渲染的全链路实践

菜单权限系统本质是前端对后端权限数据的结构化解析与可视化映射。其核心原理在于将非标准格式的权限数据(如扁平数组、权限码集合)统一归一化为可渲染的树形节点,并通过动态路由注册实现按角色加载,再结合响应式组件完成精准UI呈现。该技术方案显著提升中后台系统的可维护性与安全性,广泛应用于Vue3+Element Plus架构的SaaS管理平台、医疗HIS系统及电商运营后台等场景。本文聚焦Vue3工程化落地中的菜单数据解析、动态路由稳定性、递归组件设计与权限快照比对四大关键环节。

weixin_34319374的博客 319

数组按照唯一父id进行分类

var data = [{ id: 0, name: "父亲0" }, { id: 1, name: "父亲1" }, { id: 2, name: "父亲2" }, { id: 4, name: "儿子00", parentId: 0 ...

m0_53264079的博客 499

Open UI5 源代码解析之1489:Split.js

本文深入解析了OpenUI5框架中Split.js文件的设计与实现。该文件作为RTA(Runtime Adaptation)命令体系的核心组件,通过继承FlexCommand实现了拆分操作的可序列化封装。文章重点分析了其元数据定义(newElementIds、source、parentElement)和变更数据生成方法_getChangeSpecificData,阐释了这些设计在企业级应用中的工程价值:确保操作语义的精确表达、支持跨会话持久化、提供审计追踪基础,并与撤销重做系统良好配合。尽管代码精简,但通过

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 2647

parentId扁平数据格式转换成带有children的层级数据格式

需求: 后台给到一些数据,要求,变成树的格式。因为我使用elementui里面的el-tree组件,使用需要的数据格式是这种的 但是后台给我的是这种的 [ { "id": "9", "pId": "5", "name": "哈哈哈", "open": true, "checked": false, "ext": "", "modify": false, "enable": true }, { "id": "10", "pId": "6", "

admin11196的博客 1822

rk3326 MIPI休眠唤醒黑屏有背光问题

** 1.问题现象: ** **【开机起来】**开机起来可以正常显示 **【按power按键休眠】**第二次按下Power按键进入休眠,隔10s,再按Power按键唤醒。 **【出现结果】**屏幕黑屏有背光,并提示drm time out错 **【lcd信息】**lcd为480*800 2lane的mipi **【复现概率】**第二次按下休眠唤醒必然复现 【具体错误log如下】 //第一次休眠的log// [ 54.858511] dw-mipi-dsi ff450000.dsi: final DSI-

Ian22l的博客 3944

STM32F030F4P6 ADC多通道定时器触发DMA搬运

主函数中等待转换完成的标志位,然后打印出来。ADC回调函数中将数值赋值给变量。配置定时器1s读一次。

qq_24426625的博客 1356

vue 数组内对象有对应 id,如何重新排序的问题

如果你使用 Vue.js 来管理数据,那么建议不要直接在数据数组上进行排序,因为这可能会导致 Vue.js 在重新渲染视图时出现问题。计算属性,因此 Vue.js 将自动重新计算和更新博客列表,以确保最新的博客显示在列表的顶部。方法将修改原始数组,因此,如果你不想修改原始数组,可以首先对其进行副本,然后对副本进行排序。如果你想重新排序一个Vue中的数组,其中包含对象,每个对象都有一个对应的。这将返回一个新的排好序的数组,其中每个对象的。这将返回一个新的排好序的数组,其中每个对象的。

doudouyifaya的博客 2111

推荐系统(1):推荐系统评测

对于可以离线优化的指标,我个人的看法是应该在给定覆盖率、多样性、新颖性等限制条件下,尽量优化预测准确度。用一个数学公式表达,离线实验的优化目标是:最大化预测准确度使得 覆盖率 > A多样性 > B新颖性 > C其中,A、B、C的取值应该视不同的应用而定。

数据不会骗人 2527

vue/javascript 根据parentId 返回树结构数组

前言 效果在最后面 我认为前端序列化成树结构比较好,没必要后端做了再返回,所以才有以下的故事。 很多时候我们前端展示的树结构,后端只是返回来一个带有parentId的数组对象给我们,而前端则需要根据parentId去序列化成树结构… 每次序列化一次都要从新写一个… 所以我就特此记录一下。 正文 先看方法 /** * 构造树型结构数据 * @param {*} data 数据源 * @param {*} id id字段 默认 'id' * @param {*} parentId 父节点字段 默认

Ambitiouss的博客 1920

把 ABAP writable CDS view entity 讲透:从只读建模到可写模型的 ABAP CDS 新能力

摘要:SAP引入的writable CDS view entity突破了传统CDS视图只读的限制,允许通过ABAP SQL直接进行数据修改。该特性通过WRITABLE关键字定义,使CDS视图成为与数据库表同等级别的可写对象。其核心价值在于为数据集成、中间层同步等场景提供结构化写入入口,但需注意不应绕过业务规则。最佳实践建议保持底层表结构简单映射,避免复杂变形。这一特性标志着CDS从单纯消费模型向双向数据交互能力的演进,为ABAP开发提供了新的数据边界设计思路。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 1313

YOLOv8【第九章:模型部署篇·第2节】一文搞懂,模型剪枝与压缩技术!

🏆 本文收录于 《YOLOv8实战:从入门到深度优化》 专栏。该专栏系统复现并梳理全网各类 YOLOv8 改进与实战案例(当前已覆盖分类 / 检测 / 分割 / 追踪 / 关键点 / OBB 检测等方向),坚持持续更新 + 深度解析,质量分长期稳定在 97 分以上,可视为当前市面上 覆盖较全、更新较快、实战导向极强 的 YOLO 改进系列内容之一。

**My Coding Family** 1527

antd tree 选择子节点是否关联父节点

选择某个子菜单时,需要将父菜单也发送过去,后端要判断权限,如果只发子菜单,就做不到匹配,导致父菜单都不会显示在菜单栏。 需要解决的问题是antd tree中,父子节点是受控的,默认如果只选择一个子节点,就只把这一个子节点放进数组,如果选择了父节点下的所有子节点,就会将父节点也放进去。现在需要的是,只选择一个子节点的时候,也将父节点放进去。但是antd tree组件没有提供这个属性。于是自己按照后...

赵乘风_i 1万+

Python爬虫实战:利用Scrapy+Playwright高效爬取TED演讲数据

在当今信息爆炸的时代,TED演讲作为全球知名的思想传播平台,汇聚了各领域顶尖人才的精彩分享。对于数据分析师、研究人员或内容创作者来说,获取TED演讲的完整数据集具有重要价值。本文将详细介绍如何使用Python中最先进的爬虫技术组合——Scrapy框架配合Playwright浏览器自动化工具,高效爬取TED演讲的完整数据。传统爬虫技术在处理现代动态网页时面临诸多挑战,而本文将展示如何利用最新工具解决这些问题。

2201_76125261的博客 205

函数模块化重构多级菜单:从意大利面条代码到清晰架构的实践

在软件开发中,处理树形数据结构是常见的需求,例如后台管理系统的导航菜单、权限配置树或商品分类。其核心原理是将具有层级关系的节点组织成嵌套结构,通常涉及递归遍历、父子关系映射和状态管理。函数模块化是一种重要的软件设计思想,它通过将复杂逻辑拆分为职责单一、可复用的纯函数单元,显著提升代码的可维护性、可测试性和可扩展性。这种技术价值在于能够将原本高度耦合的“面条式代码”重构为清晰的数据处理流水线,从而优雅地应对业务逻辑的动态变化。本文以多级菜单这一典型应用场景为例,详细阐述了如何通过数据标准化、树形构建、权限过滤

weixin_34242819的博客 756

DAB协议解读ETSI TS 103 461

数字信号广播( Digital Audio Broadcasting 简称DAB)是继AM、FM传统模拟广播之后的第三代广播--数字信号广播,它提供了接近CD质量的声音,广播及商机无限的附加数据服务,具有抗噪声、抗干扰、抗电波传播衰落、适合高速移动接收等优点,保证固定、携带及移动时接收信号的质量。DAB的原始版本使用MP2音频编解码器。该系统的升级版本于2007年2月发布,称为DAB+,它使用基于改进的离散余弦变换(MDCT)的HE-AACv2(AAC+)音频编解码器。

qflook的博客 4477

如何在非序列模式下使用类似图像模功能

如何在非序列模式下使用类似图像模功能

weixin_72050316的博客 552

函数式编程重构多级菜单:从面条代码到模块化架构实战

在软件开发中,函数式编程是一种强调纯函数、不可变数据和函数组合的编程范式,它通过将复杂逻辑拆解为一系列可组合的纯函数来提升代码的可预测性和可测试性。其核心原理在于避免副作用和共享状态,使得每个函数都成为独立的数据转换单元。这种范式在工程实践中具有重要价值,尤其在处理树形数据结构、权限过滤和状态管理等场景时,能显著提升代码的可维护性和团队协作效率。例如,在后台管理系统的多级菜单开发中,传统面向对象方式常导致高耦合、低内聚的“面条式代码”,而函数模块化方案通过高阶函数、递归和管道组合,将菜单的生成、权限过滤、状

weixin_34290096的博客 404

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

JavaScript数组访问器方法原理与工程实践指南

JavaScript数组访问器方法是一组不修改原数组、返回新数据的只读操作函数,其底层基于不可变性原则与引擎级优化(如V8的预分配和SIMD向量化)。它们通过统一的语义协议(如SameValueZero比较、toString隐式调用、浅拷贝机制)实现安全的数据探查与转换,在函数式编程、状态管理、前端监控等场景中承担关键角色。掌握concat、join、slice、includes等核心方法的行为边界与性能特征,能有效规避null/undefined隐式转换、引用穿透、稀疏数组误判等高频工程陷阱,并为toRe

weixin_30617737的博客 396

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

【前端社招】手写题

前端社招手写题目总结。

坚强的泡沫的博客 248

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

async/await 不是语法糖:异步控制流重构与生产级陷阱

async/await 是 JavaScript 中将异步操作语义化为线性控制流的核心机制,其本质是编译器生成的状态机,而非 Promise.then 的语法糖。它通过暂停函数执行、自动封装后续逻辑为 Promise 回调,显著提升错误堆栈可读性与调试效率。在高阶函数(如重试中间件)、递归遍历(如目录压缩)等嵌套异步场景中,async/await 能统一处理时序、错误传播与并发控制。掌握 await 的四大生效前提(async 函数内、thenable 对象、pending 状态、作用域合规)和精细化错误捕

weixin_30731305的博客 312

面试一脸懵:listToTree

const tree = [ {id: -1,parentId: null}, {id: 0,parentId: -1}, {id: 1,parentId: -1}, {id: 2,parentId: -1}, {id: 3, parentId: 2}, {id: 4, parentId: 3}, ] 转化为 [{"id":-1,"children":[{"id":0},{"id":1},{"id":2,"children":[{"id":3,"children":[{"id":4}

Stavin Li的博客 412

JavaScript map方法深度解析:从数据转换到工程实践

Array.prototype.map 是 JavaScript 中实现确定性数据转换的核心方法,其本质是基于函数式编程思想的纯函数操作——输入原数组,输出全新数组,不修改原始数据。它区别于 for 循环(命令式)、forEach(允许副作用)和 reduce(聚合导向),以声明式语法明确表达‘我要什么’,天然支持不可变性(immutability),成为 React/Vue 等现代前端框架列表渲染与状态管理的基石。本文深入解析 map 的三参数回调、thisArg 绑定、空值防御、嵌套映射及异步组合等真实

weixin_33743703的博客 298

VOL_常用记录!!-----前端

【代码】VOL_偷懒记录!!

TangMonk的博客 1867

封装js方法 构建树结构和扁平化树结构

在JavaScript中,构建树结构和将树结构扁平化是常见的操作。下面我将提供两个方法,一个用于从扁平化的数据中构建树结构,另一个用于将树结构扁平化。

江湖行骗老中医 532

Json-Function高级用法:掌握innerJoin与复杂查询的终极指南 [特殊字符]

Json-Function是一个功能强大的JavaScript库,专门用于处理JSON数据,让你能够像操作数据库一样轻松地对JSON数据进行查询、过滤、排序和连接操作。这个库提供了`innerJoin`、`where`、`limit`、`select`、`orderBy`等丰富的查询方法,极大地简化了前端开发中复杂数据处理的难度。 ## 为什么选择Json-Function? 🤔 在前端开发

gitblog_00977的博客 913

Vue可拖拽组织树组件实战:从zm-org-tree选型到性能优化全解析

在前端开发中,树形结构组件是展示层级数据的核心UI元素,广泛应用于后台管理系统、文件目录、组织架构等场景。其原理基于递归渲染和嵌套数据结构,通过父子节点关系构建视觉层级。随着交互复杂度的提升,单纯的静态树已无法满足需求,可拖拽功能成为增强用户体验的关键技术价值所在,它允许用户通过直观的拖放操作直接调整数据层级关系,极大提升了操作效率。实现拖拽功能通常需要处理拖拽事件流、数据序列化与反序列化,以及复杂的树形数据更新算法。在Vue技术栈中,开发者常面临是选用成熟UI库的树组件、专门拖拽插件还是自行封装的抉择,这

weixin_34043301的博客 759
上一篇: leetCode -- 三数之和
下一篇: 归并排序实例
bubbleSweet
博客等级 码龄7年 14粉丝 70原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值