【实用函数】获取深层对象指定链路对应值的引用

获取指定链路对应对象的引用

当遇到要在循环过程中,要从另一个json对象内找到与之匹配的数据,并把当前循环的数据作为匹配json数据的子项。以下内容可以做个参考。

适用场景

现在有两份数据,需要对两份数据进行拼接。

一份数据是一维数组,另一份数据是多层级的对象。

其中一维数组的每项都有一个指向多层对象链路地址,现在的要求是返回当前链路地址对应的对象。

示例效果

js 复制代码
// 列表
const list = [
  {
    name: 'yuanyang',
    namespaces: ['henan', 'xinxiang']
  },
  {
    name: 'zhongguancun',
    namespaces: ['beijing', 'haidian']
  },
]

// 省份集合
const provinceCollection = [{
  name: 'henan',
  children: [{
    name: 'xinxiang',
    children: []
  }]
},
{
  name: 'beijing',
  children: [{
    name: 'haidian',
    children: []
  }]
}]

// 期望输出
[{
  name: 'henan',
  children: [{
    name: 'xinxiang',
    children: [{
      name: 'yuanyang',
      children: []
    }]
  }]
},
{
  name: 'beijing',
  children: [{
    name: 'haidian',
    children: [{
      name: 'zhongguancun',
      children: []
    }]
  }]
}]

设计思路

像这种不确定层级但格式相同的数据,经常的处理方式就是递归。

而在递归过程中如何能找到末级节点,这里面是使用了数组的shift方法,当每找到当前数据后,需要修改namespaces的下次查找值。

完整代码

js 复制代码
/**
 * 递归获取指定地址空间
 * @param {array} dataSource - 目标对象
 * @param {array} namespaces - 链路信息
 * @returns {object} - 命中的对象,由于js引用类型的原因,所以这里可以直接修改源数据
 */
const getAddress = (dataSource, namespaces = [...targetPath]) => {
  const currentNamespace = namespaces.shift(); // 每次都取最新的查找值
  const currentItem = dataSource.find(item => item.name === currentNamespace);
  if (currentItem?.children.length) {
    return getAddress(currentItem?.children, namespaces);
  }
  return currentItem;
}

看下使用效果:

js 复制代码
// 列表
const list = [
  {
    name: 'yuanyang',
    namespaces: ['henan', 'xinxiang']
  },
  {
    name: 'zhongguancun',
    namespaces: ['beijing', 'haidian']
  },
]

// 省份集合
const provinceCollection = [{
  name: 'henan',
  children: [{
    name: 'xinxiang',
    children: []
  }]
},
{
  name: 'beijing',
  children: [{
    name: 'haidian',
    children: []
  }]
}]

list.forEach(item => {
  const currentCity = getAddress(provinceCollection, item.namespaces);
  if (currentCity) {
    currentCity.children.push({
      name: item.name,
      children: []
    })
  }
})

console.log('provinceCollection------:', JSON.stringify(provinceCollection));
// => [{"name":"henan","children":[{"name":"xinxiang","children":[{"name":"yuanyang","children":[]}]}]},{"name":"beijing","children":[{"name":"haidian","children":[{"name":"zhongguancun","children":[]}]}]}]
相关推荐
热爱编程的小曾19 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin30 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox43 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758102 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox