通过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;
  }

总结

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

相关文章

  • javascript实现自定义滚动条效果

    javascript实现自定义滚动条效果

    这篇文章主要为大家详细介绍了javascript实现自定义滚动条效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 微信小程序开发之toast等弹框提示使用教程

    微信小程序开发之toast等弹框提示使用教程

    弹框提示是我们在开发中经常用的一个效果,下面这篇文章主要给大家介绍了微信小程序开发之toast等弹框提示实现的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • js实现动态改变字体大小代码

    js实现动态改变字体大小代码

    本文为大家介绍下使用js如何实现动态改变字体大小,感兴趣的额朋友不要错过
    2014-01-01
  • JS+CSS实现带有碰撞缓冲效果的竖向导航条代码

    JS+CSS实现带有碰撞缓冲效果的竖向导航条代码

    这篇文章主要介绍了JS+CSS实现带有碰撞缓冲效果的竖向导航条代码,可实现滑块弹性振动效果的导航效果,涉及jQuery数学运算及页面元素样式的动态操作技巧,需要的朋友可以参考下
    2015-09-09
  • JavaScript获取Url里的参数

    JavaScript获取Url里的参数

    这篇文章主要介绍了JavaScript获取Url里的参数,需要的朋友可以参考下
    2014-12-12
  • 基于JavaScript实现文本一键复制和长按复制功能

    基于JavaScript实现文本一键复制和长按复制功能

    本文主要内容分三部分,第一部分是需求分析,第二部分是实现步骤,第三部分是问题详解,如果您只需要解决问题,请阅读第一、二部分即可,如果您有更多时间,进一步学习问题相关知识点,请阅读至第三部分
    2023-10-10
  • JS实现留言板功能[楼层效果展示]

    JS实现留言板功能[楼层效果展示]

    小编最近在基于js实现留言板功能,实现的功能有发布人和发布内容做非空校验,楼层效果展示和发布时间展示。具体实例代码大家参考下本文
    2017-12-12
  • BootStrap使用file-input插件上传图片的方法

    BootStrap使用file-input插件上传图片的方法

    这篇文章主要介绍了BootStrap使用file-input插件上传图片的方法,bootstrap的图片上传框架 file-input 插件非常不错,下面小编通过本文介绍下这个插件的使用方法,感兴趣的朋友一起看看吧
    2016-09-09
  • js实现一个简单的MVVM框架示例

    js实现一个简单的MVVM框架示例

    下面小编就为大家分享一篇js实现一个简单的MVVM框架示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • JavaScript删除对象的不必要的属性

    JavaScript删除对象的不必要的属性

    这篇文章主要给大家介绍了JavaScript删除对象的不必要的属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-10-10

最新评论