JavaScript递归封装:实现数组字段转换与深层嵌套处理

作者:拾光时间:2026-10-31 16:30:52浏览:204

本文介绍如何使用JavaScript递归函数封装一个通用的数组字段转换工具。针对简单的字段重命名及包含children的深层嵌套结构,提供了从基础map方法到递归封装的解决方案。通过示例代码展示如何处理对象内嵌对象及复杂层级,实现高效的数据结构转换。

应用场景

在实际开发中,常遇到数据字段名与前端需求不一致的情况。例如,后端返回的数组元素包含name字段,而前端组件需要的是title字段。具体数据形态如示例代码所示:

const list = [{ name: '张三' }];
// 转换为
const list = [{ title: '张三' }];

基础映射方案

最直观的处理方式是直接使用Array.prototype.map方法遍历数组,并返回包含新字段名title的新对象。这种方式代码简洁,适用于单层结构的简单转换。然而,若数组元素内部还包含children子数组,且子数组同样需要进行字段映射,map方法的递归处理能力将显得不足。鉴于此方案过于基础,此处不再展开,重点在于解决更复杂的嵌套场景。

const list = [{ name: '张三' }];
console.log(list.map(v=>{
return { title: v.name }
}));

单层与简单嵌套场景处理

参考以下代码,其中已包含详细注释说明逻辑:

核心逻辑在于根据配置项,将旧字段值绑定并赋值给新字段。进一步思考,如果list中的对象不仅包含直接字段,其children数组中的对象也包含name字段,该如何统一处理?

const list = [
{
  name: '张三',
  id: 6,
  children: [
    { name: '张三-第一个儿子', id: 1 },
    { name: '张三-第二个儿子', id: 2 },
  ]
},
{
  name: '李四',
  id: 5,
  children: [
    { name: '李四-第一个儿子', id: 3 },
    { name: '李四-第二个儿子', id: 4 },
  ]
}
];

/**
* props 示例: { title: 'name', children: 'children' },
* key值是生成新数组的值,value是旧数组的值
* */
function recursion(list, props) {
let data = [];
// 如果不是数据或者props为空就直接返回
if (!Array.isArray(list) || !props) return list; 
// .遍历数组
for (let i = 0; i < list.length; i++) {
  // 保存一个对象
  let propsItem = {};
  // 遍历修改值
  for (const key in props) {
    if (!list[i][props[key]]) continue;
    propsItem[key] = list[i][props[key]];
  }
  data.push(propsItem);
  // 如果子级是一个数组就递归赋值
  if (propsItem.children && Array.isArray(propsItem.children)) {
    data[i]['children'] = recursion(propsItem.children, props);
  }
};
return data;
};

const res = recursion(list, {
title: 'name',
children: 'children'
});
console.log('66', res);

通用递归封装方案

观察后续示例代码可知,该封装方案不仅能处理对象直接属性的映射,也能处理对象内部嵌套对象的值提取,基本覆盖了绝大多数同类数据转换场景。阅读代码时请留意其中的注释说明,有助于理解实现细节。

const list = [
    {
        id: 6,
        obj: { name: '张三' },
        children: [
            { obj: { name: '张三-第一个儿子', }, id: 1 },
            { obj: { name: '张三-第二个儿子', }, id: 2 },
        ]
    },
    {
        obj: { name: '李四' },
        id: 5,
        children: [
            { obj: { name: '李四-第一个儿子', }, id: 1 },
            { obj: { name: '李四-第二个儿子', }, id: 2 },
        ]
    }
];

/**
* props 示例: { title: 'obj.name', children: 'children' },
* key值是生成新数组的值,value是旧数组的值
* */
function recursion(list, props) {
    let data = [];
    // 如果不是数据或者props为空就直接返回
    if (!Array.isArray(list) || !props) return list;
    // .遍历数组
    for (let i = 0; i < list.length; i++) {
        // 保存一个对象
        let propsItem = {};
        // 遍历修改值
        for (const key in props) {
            // 将字符串转为数组
            const propsKey = props[key].toString().split('.');
            // 如果数组大于等于2取其对象里面的值,反之直接拿key值
            const propsChild = propsKey.length >= 2 ? list[i][propsKey[0]][propsKey[1]] :
                propsKey.length === 1 ? list[i][propsKey[0]] : null;
            // 如果为空跳槽循环
            if (!propsChild) continue;
            propsItem[key] = propsChild;
        }
        data.push(propsItem)
        // 如果子级是一个数组就递归赋值
        if (propsItem.children && Array.isArray(propsItem.children)) {
            data[i]['children'] = recursion(propsItem.children, props);
        }
    };
    return data;
};

const res = recursion(list, {
    title: 'obj.name',
    children: 'children'
});
console.log('66', res);

至此,关于利用JavaScript递归函数封装通用转换场景的介绍已完成。如需了解更多相关技术细节,建议查阅本站过往文章或继续浏览后续内容。感谢支持!

作者最新文章