通过js把一个数组修改成多层嵌套多个数组的几种方法总结

 更新时间:2023年06月29日 09:56:05   作者:前端代码の搬运工  
这篇文章主要介绍了通过js把一个数组修改成多层嵌套多个数组的几种方法总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

通过js把一个数组修改成多层嵌套多个数组

首先一级与二级相同的嵌套

let arr = [
     { date: '2020-01-06', age: '18'},
     { date: '2020-01-06', age: '25'},
     { date: '2020-01-07', age: '34'},
     { date: '2020-01-07', age: '18'},
     { date: '2020-01-07', age: '38'},
     { date: '2020-01-08', age: '26'},
     { date: '2020-01-09', age: '24'}
   ]
let dataArr = [];
    arr.map(mapItem => {
      if (dataArr.length == 0) {
          dataArr.push({ date: mapItem.date, List: [mapItem] })
      } else {
         let res = dataArr.some(item=> {//判断相同日期,有就添加到当前项
          if (item.date == mapItem.date) {
            item.List.push(mapItem)
            return true
          }
        })
        if (!res) {//如果没找相同日期添加一个新对象
          dataArr.push({ date: mapItem.date, List: [mapItem] })
        }
      }
    })

结果

dataArr = [
        {
            date:'2020-01-06',
            List: [
                { date: '2020-01-06', age: '18'},
                { date: '2020-01-06', age: '25'}
            ]
        },
        {
            date:'2020-01-07',
            List: [
                { date: '2020-01-07', age: '34'},
                { date: '2020-01-07', age: '18'},
                { date: '2020-01-07', age: '38'},
            ]
        },
        {
            date:'2020-01-08',
            List: [
                 { date: '2020-01-08', age: '26'},
            ]
        },
        {
            date:'2020-01-09',
            List: [
                { date: '2020-01-09', age: '24' }
            ]
        }
    ]

第二种情况

一级四位数(0001),二级八位数字(00010001)获取的条件是通过一级的四位数字匹配二级的前四位数字

方法1:

var userArr = [
  { id: "0001", userName: "laozhang_1" },
  { id: "00010001", userName: "laozhang1" },
  { id: "00010002", userName: "laozhang1" },
  { id: "00010003", userName: "laozhang1" },
  { id: "0002", userName: "laowang" },
  { id: "00020002", userName: "laozhang2" },
  { id: "00020003", userName: "laowang" },
  { id: "00020004", userName: "laowang" },
  { id: "00020005", userName: "laowang" },
  { id: "00020006", userName: "laowang" }
];
let newArr = []
 userArr.forEach(item => {
   if (item.id.length === 4) {
     newArr.push({ ...item, list: [] });
  }
 });
newArr.forEach(item => {
  userArr.forEach(user => {
     if (item.id !== user.id && item.id == user.id.substring(0, 4)) {
      item.list.push(user);
    }
  });
 });
console.log(newArr)

方法2:

var userArr = [
  { id: "0001", userName: "laozhang_1" },
  { id: "00010001", userName: "laozhang1" },
  { id: "00010002", userName: "laozhang1" },
  { id: "00010003", userName: "laozhang1" },
  { id: "0002", userName: "laowang" },
  { id: "00020002", userName: "laozhang2" },
  { id: "00020003", userName: "laowang" },
  { id: "00020004", userName: "laowang" },
  { id: "00020005", userName: "laowang" },
  { id: "00020006", userName: "laowang" }
];
let newArr = userArr.filter(item => item.id.length === 4)
newArr.forEach(item => {
      item.list = userArr.filter(user => item.id !== user.id && item.id == user.id.substring(0, 4))
    })
    console.log(newArr)

js一维数组处理成多维数组

let replies = [
	    { id: 1, content: '1. 真理惟一可靠的标准就是永远自相符合', parent: 0 },
	    { id: 2, content: '2. 我需要三件东西:爱情友谊和图书', parent: 0 },
	    { id: 3, content: '2-1 时间是一切财富中最宝贵的财富', parent: 2 },
	    { id: 4, content: '2-2 我读的书愈多,就愈亲近世界,愈明了生活的意义,愈觉得生活的重要', parent: 2 },
	    { id: 5, content: '2-1-1 任何事物都是在不断变化的', parent: 3 },
	    { id: 6, content: '2-1-2 真正的科学家应当是个幻想家', parent: 3 },
	    { id: 7, content: '3. 难得糊涂,耳不闻人之非,不信谣,不传谣', parent: 0 },
	];
function multidimensionalArray(replies) {
    let data = JSON.parse(JSON.stringify(replies)); 
    data.forEach(reply => {
        let parent = data.find(res => res.id === reply.parent); 
        if (parent) {
            parent.children = parent.children || [];
            parent.children.push(reply); 
        }
    });
    return data;
}
console.log(multidimensionalArray(replies))
  /**一维数组处理成多维数组
   * linearArray 一维数组
   *primary 父级id(父子关联字段)
   * secondary 子级id(父子关联字段)
   */
  multidimensionalArray: function (linearArray, primary, secondary) {
    let data = JSON.parse(JSON.stringify(linearArray));
    data.forEach(item => {
      let parent = data.find(res => res[primary] === item[secondary]);
      if (parent) {
        parent.children = parent.children || [];
        parent.children.push(item);
      }
    });
    return data;
  }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 自己写一个uniapp全局弹窗(APP端)

    自己写一个uniapp全局弹窗(APP端)

    应用uni-app跨平台框架进行项目开发过程中,需要实现版本更新时全页面弹窗,底部导航栏无法点击的效果,下面这篇文章主要给大家介绍了关于uniapp全局弹窗(APP端)的相关资料,需要的朋友可以参考下
    2022-10-10
  • js实现类似新浪微博首页内容渐显效果的方法

    js实现类似新浪微博首页内容渐显效果的方法

    这篇文章主要介绍了js实现类似新浪微博首页内容渐显效果的方法,实例分析了渐显效果的实现要点与方法,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 微信小程序开发常见问题及解决方案

    微信小程序开发常见问题及解决方案

    这篇文章主要介绍了微信小程序开发常见问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • JS给按钮添加跳转功能类似a标签

    JS给按钮添加跳转功能类似a标签

    这篇文章主要介绍了JS给按钮添加跳转功能类似a标签,需要的朋友可以参考下
    2017-05-05
  • 通过jQuery学习js类型判断的技巧

    通过jQuery学习js类型判断的技巧

    这篇文章主要介绍了通过jQuery学习js类型判断的技巧,下面和小编一起来学习一下吧
    2019-05-05
  • JavaScript使用二分查找算法在数组中查找数据的方法

    JavaScript使用二分查找算法在数组中查找数据的方法

    这篇文章主要介绍了JavaScript使用二分查找算法在数组中查找数据的方法,较为详细的分析了二分查找法的原理与javascript实现技巧,需要的朋友可以参考下
    2015-04-04
  • javascript中expression的用法整理

    javascript中expression的用法整理

    在学习javaScript, 学到regular expression的时候见知识点有些杂乱,于是将其整理了一些在本文与大家分享
    2014-05-05
  • js实现div弹出层的方法

    js实现div弹出层的方法

    这篇文章主要介绍了js实现div弹出层的方法,以实例的形式完整的实现了js弹出div层的效果,并且弹出层可拖拽、可关闭,用户还可根据个人喜好自定义弹出层的显示效果,非常具有实用价值,需要的朋友可以参考下
    2014-11-11
  • JavaScript jquery及AJAX小结

    JavaScript jquery及AJAX小结

    其实在学习之前,就已经用上了js,jquery和ajax,不过当时不清楚这些的区别,就全都当成js来看,然后别人一说jquery,ajax都觉得好像很高级,等到自己学习的时候,倒是对这些更清楚了一点,下面就来写一下我的总结
    2016-01-01
  • 在小程序中使用canvas的方法示例

    在小程序中使用canvas的方法示例

    这篇文章主要介绍了在小程序中使用canvas的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论