UD5工具箱
在线数据库关系图生成器 - 视觉设计导出SQL
拖入表格与关联线设计数据库结构，自动输出建表DDL语句，支持MySQL/PostgreSQL方言。
数组方法可视化 - map/filter/reduce
数组方法可视化
直观理解 map / filter / reduce 的执行过程
逐步执行
过程可见
[
]
1,2,3,4,5
10,20,30,40,50
apple,banana,cherry
3,7,2,9,1,8
el =>
el * 2
el * el
el + 10
el.toUpperCase()
Item模板
点击下方 "下一步" 开始执行，观察每个元素如何被处理
步骤 0 / 0
原始数组:
结果:
等待执行...
速度:
执行日志
准备就绪，点击"下一步"开始...
常见问题与知识点
map() 返回一个新数组，包含对原数组每个元素执行回调后的结果，不修改原数组。常用于数据转换。
forEach() 仅遍历数组执行回调，返回 undefined，无法链式调用。通常用于执行副作用操作（如打印日志、DOM操作）。
forEach() 仅遍历数组执行回调，返回 undefined，无法链式调用。通常用于执行副作用操作（如打印日志、DOM操作）。
[1,2,3].map(x => x*2) 返回 [2,4,6]，而 [1,2,3].forEach(x => x*2) 返回 undefined。
不一定。如果所有元素都满足条件，filter 返回的数组长度等于原数组长度（但是一个新数组，浅拷贝）。如果没有元素满足条件，则返回空数组
例如：
[]。例如：
[1,2,3].filter(x => x > 0) 返回 [1,2,3]（长度相同但不同引用）。
初始值作为第一次回调的累加器参数。如果不提供初始值，reduce 会将数组第一个元素作为初始累加器，并从第二个元素开始遍历。
建议始终提供初始值，以避免空数组报错
建议始终提供初始值，以避免空数组报错
TypeError: Reduce of empty array with no initial value 以及类型不一致问题。
reduce 是通用方法，可以模拟 map 和 filter：
模拟 map：
模拟 filter：
这体现了 reduce 的强大灵活性。
模拟 map：
arr.reduce((acc, el) => { acc.push(el*2); return acc; }, [])模拟 filter：
arr.reduce((acc, el) => { if(el>2) acc.push(el); return acc; }, [])这体现了 reduce 的强大灵活性。
map/filter/reduce 的回调函数都接收 3个参数：
map/filter：
reduce：
本工具中，您可以使用
map/filter：
(element, index, array) — 当前元素、索引、原数组reduce：
(accumulator, currentValue, index, array) — 累加器、当前元素、索引、原数组本工具中，您可以使用
el 代表元素，i 代表索引。
cURL 命令转 Fetch 代码 - 自动解析与生成
粘贴 cURL 命令，自动解析参数、头部和数据，生成对应的 Fetch API JavaScript 代码。
因数树生成器 - 质因数分解可视化
输入一个合数，以树形图方式展示将其分解为质因数的过程。
标签云生成器 - 输入词语频率生成CSS
输入词汇及其权重，生成可交互的HTML标签云。
实时频率分析仪 - Web Audio频谱
从麦克风或音频文件实时捕捉音频，以条形图显示各频段的能量分布。
概率树形图生成器 - 计算路径概率
通过添加分支和概率值，自动绘制概率树形图并计算各结果的概率。
整数划分可视化 - 分堆块图演示
输入正整数，以图形化块图展示所有不同的整数划分方式。
网格渐变可视化编辑器 - 多点自由着色
在画布上放置多个色点，利用双线性插值生成平滑梦幻的多色渐变背景，可导出CSS或图片。
头像重叠堆栈生成器 - 群组图示CSS
生成多个头像重叠排列的视觉效果CSS，常用于表示群组成员。
韦恩图生成器 - 多圆交集可视化
自定义两到三个圆的标签和区域数值，绘制用于展示集合关系的韦恩图。
旭日图生成器 - 层次数据辐射展现
输入树形JSON数据，生成多层级旭日图，点击可钻入下一层，展示占比关系。
cURL 命令转 Fetch 代码 - 在线自动转换
粘贴cURL命令，自动转换为原生JavaScript Fetch或Axios代码，含请求头与体，提升调试效率。
分形树生成器 - L系统与递归深度交互
调节分叉角度、长度缩减比与递归深度，实时生成各种分形树并导出SVG，探索植物几何。
复平面绘制器 - 绘制复数和运算
在复平面上绘制复数点，并可直观展示加法、乘法等运算的几何意义。
抽样分布对比器 - 多种统计量实验
从同一总体抽样，对比样本均值、样本方差、样本比例等统计量的分布形态。
图形均衡器可视化 - 可调频段增益的播放器
加载音频文件，提供10段频率增益滑块，实时音色调节并展示频谱图。
百数表生成器 - 可着色高亮倍数
生成1-100的数字表，点击以高亮特定倍数（如3的倍数、素数），可打印。
SQL 在线执行沙盒 - 基于 SQL.js 的浏览器内数据库
加载内存数据库，执行 SQL 语句并查看结果，适用于学习或快速验证查询逻辑。
SQL SELECT语句可视化构建 - 点选生成查询
选择表名、列、条件、排序，自动生成SQL SELECT语句，适合新手学习。
SVG 动态波形背景生成器 - 多层叠加与动画
调节振幅、频率和颜色，生成多层SVG波浪，支持循环波动动画，导出CSS或SVG。
CSS Modules类名生成器 - BEM风格
生成规范的BEM或CSS Modules格式类名，避免全局样式污染。
渐变噪点纹理生成器 - 有机质感CSS背景
组合多色渐变与SVG噪点叠加，生成独特且轻量的CSS背景纹理，适配现代UI。
树形图生成器 - 组织结构图/思维导图
以缩进文本描述树结构，自动生成可折叠的树形节点图，支持导出SVG/PNG。
茎叶图生成器 - 数据分布直观可视化
输入一组数值，自动按照十位和个位生成茎叶图，辅助统计学教学。
Cron定时任务生成器 - 通过点选构建表达式
可视化选择分钟、小时、日等，生成标准Cron表达式并预览下次执行时间。
短语频率分析器 - 统计N-gram和常见搭配
统计英文文本中2字、3字组(Bigram/Trigram)的出现频率，辅助语言学分析。
分子结构查看器 - 输入 SMILES 显示 3D 模型
输入 SMILES 字符串，生成简单的 3D 分子球棍模型并可旋转缩放，用于化学可视化。
鸟群动飞模拟 - Boyd算法可视化
大量三角形“鸟”根据分离、对齐、凝聚三原则自主飞动，可调节参数观察群体行为。
文本转Slug工具 - URL友好字符串生成器
将文章标题或任意文本转换为URL友好的slug（如my-article-title），支持多语言去除变音符号。
递归树可视化 - 斐波那契/阶乘调用图
输入参数运行递归函数（如斐波那契），绘制递归调用树结构，理解重复计算。