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

总结

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

相关文章

  • 详解使用grunt完成requirejs的合并压缩和js文件的版本控制

    详解使用grunt完成requirejs的合并压缩和js文件的版本控制

    这篇文章主要介绍了详解使用grunt完成requirejs的合并压缩和js文件的版本控制 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • JavaScript判断字符长度、数字、Email、电话等常用判断函数分享

    JavaScript判断字符长度、数字、Email、电话等常用判断函数分享

    这篇文章主要介绍了JavaScript判断字符长度、数字、Email、电话等常用判断函数分享,本文直接给出实现代码,需要的朋友可以参考下
    2015-04-04
  • 原生JavaScript实现滑动拖动验证的示例代码

    原生JavaScript实现滑动拖动验证的示例代码

    这篇文章主要介绍了原生JavaScript实现滑动拖动验证的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • zTree插件之单选下拉菜单实例代码

    zTree插件之单选下拉菜单实例代码

    zTree插件之单选下拉菜单实例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • JavaScript实现滑动导航栏效果

    JavaScript实现滑动导航栏效果

    这篇文章主要为大家详细介绍了JavaScript实现滑动导航栏效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 关于ES6尾调用优化的使用

    关于ES6尾调用优化的使用

    这篇文章主要介绍了关于ES6尾调用优化的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • Bootstrap每天必学之按钮(Button)插件

    Bootstrap每天必学之按钮(Button)插件

    Bootstrap每天必学之按钮(Button)插件,通过按钮(Button)插件,您可以添加进一些交互,比如控制按钮状态,或者为其他组件(如工具栏)创建按钮组,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • Openlayers绘制聚合标注

    Openlayers绘制聚合标注

    这篇文章主要为大家详细介绍了Openlayers实现聚合标注,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 原生javascript的ajax请求及后台PHP响应操作示例

    原生javascript的ajax请求及后台PHP响应操作示例

    这篇文章主要介绍了原生javascript的ajax请求及后台PHP响应操作,结合示例形式分析了JavaScript前台ajax请求的原理、调用、后台PHP响应请求及cookie保存相关操作技巧,需要的朋友可以参考下
    2020-02-02
  • Java 正则表达式学习总结和一些小例子

    Java 正则表达式学习总结和一些小例子

    字符串处理是许多程序中非常重要的一部分,它们可以用于文本显示,数据表示,查找键和很多目的.在Unix下,用户可以使用正则表达式的强健功能实现这些 目的
    2012-09-09

最新评论