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

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

当遇到要在循环过程中,要从另一个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":[]}]}]}]
相关推荐
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴3 小时前
简单入门Python装饰器
前端·python
袁煦丞4 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码4 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github