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

一、需求场景

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

模拟后端返回数据

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

组件实际需求数据

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

二、解决方法

1、递归实现

  • 封装递归方法,循环数据,判断children存在且存在数据项
  • 通过赋值完成更改属性名,此处可以理解为创建一个新属性title
  • 根据需求选择保留还是删除原属性,本次演示选择保留,具体执行为已注释的代码部分
scss 复制代码
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字符串重新解析。

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

bash 复制代码
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);
相关推荐
FIN666832 分钟前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎49533 分钟前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。12433 分钟前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树34 分钟前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN666834 分钟前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER34 分钟前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰1 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木1 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js
山海鲸可视化1 小时前
简单聊聊数据可视化大屏制作的前端设计与后端开发
前端·信息可视化·数字孪生·数据可视化·3d模型·三维渲染
FuckPatience1 小时前
前后端分离项目部署完成后 前后端交互过程
vue.js·asp.net