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

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

当遇到要在循环过程中,要从另一个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":[]}]}]}]
相关推荐
sql1234567891116 分钟前
前端——CSS1
前端
Nueuis21 分钟前
微信小程序分页和下拉刷新
服务器·前端·微信小程序
小白640231 分钟前
前端性能优化(实践篇)
前端·性能优化
小彭努力中1 小时前
9.Three.js中 ArrayCamera 多视角相机详解+示例代码
开发语言·前端·javascript·vue.js·数码相机·ecmascript·webgl
朝阳391 小时前
Electron Forge【实战】桌面应用 —— 将项目配置保存到本地
前端·javascript·electron
若愚67921 小时前
Tauri 跨平台开发指南及实战:用前端技术征服桌面应用(合集-万字长文)
前端·vue.js·rust·gitcode
不秃的开发媛2 小时前
前端技术Ajax实战
前端·javascript·ajax
IT瘾君2 小时前
JavaWeb:后端web基础(Tomcat&Servlet&HTTP)
前端·servlet·tomcat
qq_419429132 小时前
uni-app中使用RenderJs 使用原生js
前端·javascript·uni-app
沃野_juededa2 小时前
uniapp自定义选项卡
java·前端·javascript