递归实现对象数组属性名的替换

冷不防 2023-10-02 06:20 15阅读 0赞

### 使用场景： ###

> 使用的layui 树形组件，这个组件需要一个数据源，名称显示默认是title，而后台返回的数据对应项为name，所以想把后台返回数据中的name换成title。于是封装了一个方法，可以随意的替换我们想要替换的属性名

--------------------

#### 修改之前的数据是： ####

const packages = [
      {
        id: '641a1690-6c8b-4ada-ae97-8d82cc4fe7a3',
        name: 'com.sample',
        children: {
          id: 'd7384f60-e4ab-4a86-8e2e-0f66cc32f',
          name: 'child.computer.com',
          children: { id: 'e4ab-4a86-0f66cc32f560', name: 'child.com' }
        }
      },
      { id: 'd7384f60-e4ab-4a86-8e2e-0f66cc32f560', name: 'computer.com' },
      { id: 'ca7f972e-64ee-4cb0-80b9-1036fac69d32', name: 'java.util' }
    ];

--------------------

#### 想要的效果是： ####

{
        key: '641a1690-6c8b-4ada-ae97-8d82cc4fe7a3',
        title: 'com.sample',
        children: {
          key: 'd7384f60-e4ab-4a86-8e2e-0f66cc32f',
          title: 'child.computer.com',
          children: { key: 'e4ab-4a86-0f66cc32f560', title: 'child.com' }
        }   
    }

--------------------

#### 实现的方法：递归实现 ####

> 检查来自`Object#entries()`调用的\[key-value\]对的值是否为对象。
> 
> 如果是这样，请再次递归调用`transformObj`函数以获取该值。否则按原样返回值。
> 
> 最后使用\[key-value\]将\[key-value\]对数组转换回一个对象：

const packages = [{ id: '641a1690-6c8b-4ada-ae97-8d82cc4fe7a3', name: 'com.sample', children: { id: 'd7384f60-e4ab-4a86-8e2e-0f66cc32f', name: 'child.computer.com', children: { id: 'e4ab-4a86-0f66cc32f560', name: 'child.com' }}}, { id: 'd7384f60-e4ab-4a86-8e2e-0f66cc32f560', name: 'computer.com' }, { id: 'ca7f972e-64ee-4cb0-80b9-1036fac69d32', name: 'java.util' }];
    const replacer = { "id": "key", "name" :"title"};
    const transformObj = (obj) => {
      if(obj && Object.getPrototypeOf(obj) === Object.prototype){
        return Object.fromEntries(
        Object.entries(obj)
              .map(([k, v]) => [replacer[k] || k, transformObj(v)])
        );
      }
      //Base case, if not an Object literal return value as is
      return obj;
    }
    console.log(packages.map(o => transformObj(o)));

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关递归实现对象数组属性名的替换

使用场景： > 使用的layui 树形组件，这个组件需要一个数据源，名称显示默认是title，而后台返回的数据对应项为name，所以想把后台返回数据中的name换成tit

冷不防/ 2023年10月02日 06:20/ 0 赞/ 16 阅读

相关递归实现数组或对象的深拷贝

一.首先认识什么是递归递归：在自己的函数内部调用自己。二.了解深拷贝深拷贝：深拷贝是指源对象与拷贝对象互相独立，其中任何一个对象的改动都不会对另外一个对象造成

亦凉/ 2023年06月19日 15:25/ 0 赞/ 58 阅读

相关 reduce实现递归查找属性

let peoples = { zhangsan: { name: '张三', height: 17

小鱼儿/ 2023年03月12日 09:15/ 0 赞/ 2 阅读

相关 js递归实现数组转化树状结构

<!DOCTYPE html> <html lang="en"> <head> <meta charse

骑猪看日落/ 2023年02月21日 04:50/ 0 赞/ 52 阅读

相关递归实现对象数组子级嵌套——类似于树形结构

需求：现有一个对象数组： var datascource = [{ name:"元器件", noHead:true, children

野性酷女/ 2022年10月16日 09:55/ 0 赞/ 108 阅读

相关 js数组对象按对象属性排序或修改对象属性名

根据数组对象中对象的某个属性值把数组排序假设数组为： let arr = [ { rank: 1, name: '张三' }, { r

左手的ㄟ右手/ 2022年09月03日 00:13/ 0 赞/ 440 阅读

相关递归实现二维数组输出

非递归实现: private static void findWords(int[][]board ,int index){//index可以不需要了

灰太狼/ 2022年04月14日 07:09/ 0 赞/ 333 阅读

相关 Trie的递归实现和非递归实现

关于Trie: 在计算机科学中，Trie，又称字典树、单词查找树或键树，是一种树形结构，是一种哈希树的变种。典型应用是用于统计，排序和保存大量的字符串（但不仅限于字符串），所以

傷城~/ 2022年02月22日 01:29/ 0 赞/ 368 阅读

相关 JS对象数组通过属性值（value）找到属性名（key）

var arr = { 1267: '成都大学附属医院', 1272: '成都军区机关医院', 1206: '成都市第二人民医院',

逃离我推掉我的手/ 2022年02月03日 22:51/ 0 赞/ 1268 阅读

相关数组简单递归

数组简单递归 var data1 = [{ "uid_step": "1", "step_to": [{

以你之姓@/ 2021年08月30日 13:38/ 0 赞/ 335 阅读