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

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

使用场景:


使用的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)));
相关文章
|
5月前
|
C++ 容器
C++字符串string容器(构造、赋值、拼接、查找、替换、比较、存取、插入、删除、子串)
C++字符串string容器(构造、赋值、拼接、查找、替换、比较、存取、插入、删除、子串)
|
存储 JSON PHP
PHPJSON嵌套对象和数组的解析方法
在PHP编程开发中,JSON是一种非常常用的数据格式。它具有简单、轻量和易于解析的特点,非常适合用于数据交换和存储。当我们处理JSON数据时,经常需要解析嵌套的对象和数组,本文将介绍几种解析方法。
106 1
|
6月前
|
存储 C++ 容器
Map容器-构造和赋值讲解
Map容器-构造和赋值讲解
52 0
|
6月前
|
JavaScript 前端开发
JavaScript快速删除对象数组中某一个指定元素。注意:是对象数组,如果是数值数组,请慎用!会伤及无辜0、false、英文空格、undefined、null。
JavaScript快速删除对象数组中某一个指定元素。注意:是对象数组,如果是数值数组,请慎用!会伤及无辜0、false、英文空格、undefined、null。
根据数组中对象的属性值进行排序
根据数组中对象的属性值进行排序
82 0
对象定义-解构-枚举属性遍历以及对象内函数
对象定义-解构-枚举属性遍历以及对象内函数
74 0
|
索引
数组属性
数组属性
求字符串的长度(4种写法)(普通写法,函数写法(两种:有无返回值),不允许创建临时变量法(递归))
求字符串的长度(4种写法)(普通写法,函数写法(两种:有无返回值),不允许创建临时变量法(递归))
155 0
求字符串的长度(4种写法)(普通写法,函数写法(两种:有无返回值),不允许创建临时变量法(递归))
lodash创建一个函数属性名称的数组,包含继承属性
lodash创建一个函数属性名称的数组,包含继承属性
86 0
lodash创建自身和继承的可枚举属性的值为数组
lodash创建自身和继承的可枚举属性的值为数组
82 0