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

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

当遇到要在循环过程中,要从另一个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":[]}]}]}]
相关推荐
前端农民工ws16 分钟前
Vue 框架的 markdown 渲染组件,针对 AI 的 markdown 流式传输场景
前端·javascript·vue.js·ai
昔人'26 分钟前
css 高度从 0 到 auto 的动画效果 `interpolate-size: allow-keywords`
前端·css
百思可瑞教育39 分钟前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
IT_陈寒1 小时前
Python 3.12 新特性实战:10个性能优化技巧让你的代码快如闪电⚡
前端·人工智能·后端
Wiktok1 小时前
前后端开发Mock作用说明,mock.ts
前端·mock·vue3
冲!!1 小时前
SCSS 中的Mixins 和 Includes,%是什么意思
前端·css·scss
星语卿2 小时前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
roman_日积跬步-终至千里3 小时前
【系统架构设计(25)】Web应用服务器与现代架构
前端·架构·系统架构