layui.each仅支持浅层遍历,不支持递归;处理嵌套对象需提前扁平化或改用递归函数。

layui.each 本身不支持递归,别指望它自动展开嵌套
layui.each 是一个简单的数组/对象遍历工具,行为等价于 for...in 或 Array.prototype.forEach,仅做一层浅遍历。它不会识别 {user: {info: {name: '张三'}}} 这类结构,更不会自动递进到 info.name。你传进去一个深层嵌套对象,它只遍历第一层 key(如 'user'),然后就停了。
常见错误现象:
- 用
layui.each(data, function(key, val) { console.log(val.info.name) })→ 报Cannot read property 'name' of undefined - 误以为
layui.each能替代JSON.parse或递归函数 → 实际连字符串都不解析,只处理已解码的 JS 对象
深层嵌套 JSON 必须先手动扁平化,再交给 layui.each
Layui 表格、轮播、树形组件等都要求数据是「一级键值对」结构。遇到 user.info.name 这种路径,必须在进入 layui.each 前完成提取。否则遍历出来的 val 是个对象,你得再写一层 if (val && val.user && val.user.info) 才能取值,既啰嗦又易错。
实操建议:
- 后端返回结构为
{list: [{id: 1, user: {info: {name: '李四'}}}]},前端应先用.map()提前展开:const flatList = res.data.list.map(item => ({<br> id: item.id,<br> userName: item.user?.info?.name || '-',<br> userAge: item.user?.info?.age || 0<br>})); - 避免在
layui.each回调里做可选链判断:val.user?.info?.name看似安全,但每轮都重复解析路径,万级数据时性能明显下滑 - 不要修改原始
item对象(如item.userName = ...),防止污染后续逻辑或缓存引用
递归深度不是 layui.each 的问题,而是你解析 JSON 时踩的坑
真正触发 Maximum call stack size exceeded 或 RecursionError 的环节,往往在 JSON.parse() 或你手写的递归遍历函数里,和 layui.each 无关。Layui 自身代码里没用递归解析 JSON —— 它压根不碰原始字符串。
DMap GL地图JSAPI(dmapgl)开发指南。用于编写、审查、调试 DMap 地图 API 代码,涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
容易被忽略的关键点:
- PHP 后端用
json_decode($str, true, 128)限制了最大嵌套层级,前端收到null却没检查json_last_error(),导致后续layui.each(null, ...)静默失败 - Python 后端返回的 JSON 字符串里藏了循环引用(如
{"a": {...}, "ref": {"$ref": "#/a"}}),JSON.parse()会卡住或报错,但错误被吞掉 - 你自己写的递归提取函数没设 depth 限制,遇到恶意构造的 2000 层嵌套 JSON 直接炸栈
真要递归遍历嵌套结构,换函数,别硬撑 layui.each
如果你确实需要动态读取任意深度的 key(比如配置驱动型表单字段映射),layui.each 不是合适工具。该上专门的递归函数或 jsonpath 类库。
简单可靠的递归示例(带防循环):
function deepGet(obj, path, defaultValue) {<br> if (!obj || typeof obj !== 'object') return defaultValue;<br> const keys = Array.isArray(path) ? path : path.split('.');<br> let result = obj;<br> const visited = new Set();<br> for (let i = 0; i < keys.length; i++) {<br> if (result == null || typeof result !== 'object') return defaultValue;<br> if (visited.has(result)) return defaultValue;<br> visited.add(result);<br> result = result[keys[i]];<br> }<br> return result !== undefined ? result : defaultValue;<br>}
这样调用:deepGet(item, 'user.info.name', '-'),比在 layui.each 里反复写三元判断干净得多,也更容易加日志、限深、容错。
复杂点在于:路径解析、循环检测、稀疏数组兼容性 —— 这些都不是 layui.each 的设计目标,硬往里塞只会让逻辑越来越难维护。


















