JS一维数组转化为三维数组的实现示例

 更新时间:2021年12月24日 09:58:37   作者:几何心凉  
很多时候,跟后端接口开发对接时,因为需求的关系,需要前端地区数据跟后端的数据要一一对应,有时候需要的是多维数据,这篇文章主要介绍了JS一维数组转化为三维数组的实现示例,感兴趣的可以了解一下

今天在CSDN上问答区看到一个提问的小伙伴,是想要将一维数组转化为三位数组的需求,正好不是很忙,乐于助人的我立马给这位同学安排上,当然也没有顾及那么多去看资料什么的,就直接按照自己的思路走了!下方有源码

在这里插入图片描述

上面是他的数据格式,下面呢是要转化的数据格式

在这里插入图片描述

话不多说直接上代码

 let arr = [{
      'peovince': 'a', 'city': 'b', 'area': 'c'
    },
    {
      'peovince': 'a', 'city': 'b', 'area': 'd'
    },
    {
      'peovince': 'a', 'city': 'e', 'area': 'f'
    },
    {
      'peovince': 'a', 'city': 'e', 'area': 'g'
    },
    {
      'peovince': 'o', 'city': 'p', 'area': 'q'
    },
    {
      'peovince': 'o', 'city': 'p', 'area': 'r'
    },
    {
      'peovince': 'o', 'city': 's', 'area': 't'
    },
    {
      'peovince': 'o', 'city': 's', 'area': 'v'
    }];

开始转化

let list = Array.from(new Set(
      arr.map(item => {
        return item['peovince']
      })))
    let subList = []
    list.forEach(res => {
      arr.forEach(ele => {
        if (ele['peovince'] === res) {
          let nameArr = subList.map(item => item.value)
          if (nameArr.indexOf(res) !== -1) {
            let nameArr2 = subList[nameArr.indexOf(res)].children.map(item => item.value)
            if (nameArr2.indexOf(ele['city']) !== -1) {
              subList[nameArr.indexOf(res)].children[nameArr2.indexOf(ele['city'])].children.push({
                value: ele['area'],
                label: ele['area'],
              })
            } else {
              subList[nameArr.indexOf(res)].children.push({
                value: ele['city'],
                label: ele['city'],
                children: [{
                  value: ele['area'],
                  label: ele['area'],
                }]
              })
            }
          } else {
            subList.push({
              value: res,
              label: res,
              children: [{
                value: ele['city'],
                label: ele['city'],
                children: [{
                  value: ele['area'],
                  label: ele['area'],
                }]
              }]
            })
          }
        }
      })

    })
    console.log(subList)

最后打印的subList就是想要的格式了,让我们看一下打印

ps:JavaScript一维数组转二维数组

第一种情况:数组里面是字符串的时候

  let array = [1, 2, 3, 4, 5, 6, 7, 8];
  len len = array.length;
  let n = 4; //假设每行显示4个
  let lineNum = len % n === 0 ? len / n : Math.floor( (len / n) + 1 );
  let res = [];
  for (let i = 0; i < lineNum; i++) {
    // slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
    let temp = array.slice(i*n, i*n+n);
    res.push(temp);
  }
  console.log(res);

第二种情况:数组里面是对象的时候

当数组元素为对象的时候,就不能使用slice方法进行截取了,因为slice属于浅拷贝,导致的问题就是你修改了新生成的数组对象值,会影响原始数组中对象的值。
这里就介绍一种通过JSON.stringify和JSON.parse方法。

  let objArray = [{a: 1}, {b: 2}, {c: 3}, {d: 4}, {e: 5}, {f: 6}, {g: 7}];
  let len = objArray.length;
  let n = 4; //假设每行显示4个
  let lineNum = len % 4 === 0 ? len / 4 : Math.floor( (len / 4) + 1 );
  let res = [];
  for (let i = 0; i < lineNum; i++) {
    let temp = objArray.slice(i*n, i*n+n);
    res.push(JSON.parse(JSON.stringify(temp)));
  }
  console.log(res);


到此这篇关于JS一维数组转化为三维数组的文章就介绍到这了,更多相关JS一维数组转化为三维数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript中常见的Polyfill示例详解

    JavaScript中常见的Polyfill示例详解

    这篇文章主要介绍了JavaScript中常见Polyfill的相关资料,Polyfill是一种代码,用于在旧版浏览器中实现不支持的现代JavaScript功能,以确保跨浏览器兼容性和代码统一性,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-04-04
  • 基于JS模仿windows文件按名称排序效果

    基于JS模仿windows文件按名称排序效果

    这篇文章主要介绍了基于JS实现模仿windows文件按名称排序的相关资料,主要是对数字的处理操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JS实现数组内值累加常见的3个方法

    JS实现数组内值累加常见的3个方法

    这篇文章主要给大家介绍了关于JS实现数组内值累加常见的3个方法,文中通过实例代码将3个方法介绍的非常详细,对大家学习或者使用js具有一定参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • js取滚动条的尺寸的函数代码

    js取滚动条的尺寸的函数代码

    js取滚动条的尺寸的函数代码,需要的朋友可以参考下。
    2011-11-11
  • JS操作Cookies包括(读取添加与删除)

    JS操作Cookies包括(读取添加与删除)

    一直都是简单去js实现cookie的一些操作,今天把js对cookie操作系统的整理了一遍,包括:js读取cookie,js添加cookie,js删除cookie
    2012-12-12
  • 微信小程序使用npm包的方法步骤

    微信小程序使用npm包的方法步骤

    这篇文章主要介绍了微信小程序使用npm包的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 详解js对象中属性的两种类型之数据属性和访问器属性

    详解js对象中属性的两种类型之数据属性和访问器属性

    在理解vue底层响应式原理时,了解到,原来对象中的属性,不单单从表面看起来那么简单是key:value形式,而是还有隐藏的内部特性,其中对象内的属性分为两种类型的属性:数据属性和访问器属性,本文将给大家详细介绍一下数据属性和访问器属性,需要的朋友可以参考下
    2023-05-05
  • JavaScript中不可忽略的Symbol的盘点

    JavaScript中不可忽略的Symbol的盘点

    Symbol类型的出现,为每个属性赋予了独一无二的标识符,无论项目多么复杂,Symbol都能确保属性键的绝对唯一性,下面我们就来看看JavaScript中那些不可忽略的Symbol吧
    2024-12-12
  • js数组方法reduce经典用法代码分享

    js数组方法reduce经典用法代码分享

    本文给大家整理了很多关于js数组方法reduce的经典代码片段,能够让大家更好的理解reduce的实例用法,一起学习下吧。
    2018-01-01
  • 微信小程序实现单个或多个倒计时功能

    微信小程序实现单个或多个倒计时功能

    这篇文章主要为大家详细介绍了微信小程序实现单个或多个倒计时功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11

最新评论