JS多层嵌套数组属性名替换

一、需求场景

项目使用到layui组件库树形组件，这个组件需要一个数据源属性，名称显示默认是title，而后台返回的数据对应项为name，所以想把后台返回数据中的name换成title。由于是嵌套数组属性名替换的需求，内含未知层级的嵌套，首先想到递归处理，在解决问题中途，又学习了replaceAll()方法，所以本次分享两种解决方法。

模拟后端返回数据

let leArr = [{
        id: '1',
        name: '模拟第一层级',
        children: [{
            id: '11',
            name: '模拟第二层级',
            children: [{ id: '111', name: '模拟第三层级' },
            { id: '112', name: '模拟第三层级' }]
        }]
    }];

组件实际需求数据

let leArr = [{
        id: '1',
        title: '模拟第一层级',
        children: [{
            id: '11',
            title: '模拟第二层级',
            children: [{ id: '111', title: '模拟第三层级' },
            { id: '112', title: '模拟第三层级' }]
        }]
    }];

二、解决方法

1、递归实现

• 封装递归方法，循环数据，判断children存在且存在数据项
• 通过赋值完成更改属性名，此处可以理解为创建一个新属性title
• 根据需求选择保留还是删除原属性，本次演示选择保留，具体执行为已注释的代码部分

let leArr = [{        id: '1',        title: '模拟第一层级',        children: [{            id: '11',            title: '模拟第二层级',            children: [{ id: '111', title: '模拟第三层级' },            { id: '112', title: '模拟第三层级' }]
        }]
    }];
    // 封装递归
    function leFn(data) {
        data.forEach(item => {
            // 如果该对象有children属性且存在数据项，则递归处理children  
            if (item.children && item.children.length > 0) {
                leFn(item.children);
            }
            // 更改属性名  
            item.title = item.name;
            // 删除原属性(这个操作为可选项，本次选择保留原属性)
            // delete item.name;
        });
    }
    // 调用递归并传入数据为参数
    leFn(leArr);
    console.log(leArr);

2、replaceAll()方法实现

• JSON.stringify()将数组转换为一个JSON字符串;
• replaceAll()方法在JSON字符串中查找所有的"name":，并替换为"title":;
• JSON.parse()将替换后的JSON字符串重新解析。

此方法原属性不会保留，如果有保留属性的需求，建议用第一种

let leArr = [{
        id: '1',
        name: '模拟第一层级',
        children: [{
            id: '11',
            name: '模拟第二层级',
            children: [{ id: '111', name: '模拟第三层级' },
            { id: '112', name: '模拟第三层级' }]
        }]
    }];
    let newArr = JSON.parse(JSON.stringify(leArr).replaceAll(`"name":`, `"title":`))
    console.log(newArr);