前端小知识进阶之多维数组扁平化处理

你的名字 2022-10-05 09:58 143阅读 0赞

### 数组扁平化处理 ###

假若我们得到一个需求，这个需求呢需要我们把获取的多维数组扁平化处理，便于数据读取。可以这么做：

export default {
    name: 'app',
    data() {
      return {
        newArr: []
      }
    },
    methods:{
    // 多维数组处理方法
      handleData(arr = null){  默认参数为null
        let data = arr
        let obj = {}
        data.forEach((item)=>{
          obj.id = item.id
          obj.name = item.name
          this.newArr = this.newArr.concat(obj)
          if(item.arr && Array.isArray(item.arr.length ? item.arr : null)){
            this.handleData(item.arr)
          }
          console.log(this.newArr) 
          //  最终获取的数据格式为：
           // this.newArr =  [{id: 1, name：'张三'}，{id: 2, name：'李四'}，{id: 3, name：'王五'}]
        })
      }
    },
    created() {
    // 多维数组
      let data = [
        {
          id: 1,
          name: '张三',
          arr:[
            {
              id: 2,
              name: '李四',
              arr:[
                {
                  id: 3,
                  name: '王五'
                }
              ]
            }
          ]
        }
      ]
      this.handleData(data)
    }

如此就可以愉快的玩耍了。。。。。。。

发表评论取消回复

表情：

评论列表（有 0 条评论，143人围观）

还没有评论，来说两句吧...

相关阅读

相关数组扁平化

概念：用于将嵌套多层的数组“拉平”，变成一维的数组方法一：通过concat将二维数组转化为一维数组原理：通过将扩展运算符，将数组内部展开，并通过concat连接两个

Myth丶恋晨/ 2023年10月06日 16:03/ 0 赞/ 59 阅读

相关 JS数组、对象扁平化（多维转一维）

JS数组、对象扁平化（多维转一维）文章目录 JS数组、对象扁平化（多维转一维）一、扁平化数组二、扁平化对象三、扁平化数组对象一

朱雀/ 2023年09月24日 12:59/ 0 赞/ 175 阅读

相关 js实现数组扁平化处理

数组扁平化是指将一个多维数组变为一个一维数组 const arr = \[1, \[2, \[3, \[4, 5\]\]\], 6\]; 方法一：使用flat()

清疚/ 2022年12月25日 15:57/ 0 赞/ 178 阅读

相关多维数组扁平化

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。 [1, 2

朴灿烈づ我的快乐病毒、/ 2022年12月17日 07:03/ 0 赞/ 216 阅读

相关 js中数组扁平化处理

经典面试题，项目中用js数组操作的地方很多，js数组扁平化是其中一种什么是数组扁平化？ > 数组扁平化就是将一个多维数组转换为一个一维数组实现基本方式 1、对数

心已赠人/ 2022年12月05日 12:24/ 0 赞/ 224 阅读

相关 [JavaScript]数组高维数组拆分成低维数组（扁平化）

一、常规写法： var arr=[1,[2,[[3,4,5],6]]] function flat(arr){

秒速五厘米/ 2022年11月29日 05:57/ 0 赞/ 226 阅读

相关数组扁平化 && 对象扁平化

目录 1. 数组扁平化 1.1 toString + split 1.2 reduce

我就是我/ 2022年11月26日 01:39/ 0 赞/ 243 阅读

相关 php多维数组扁平化处理,JS数组扁平化(flat)方法总结详解

需求:多维数组=>一维数组 let ary = \[1, \[2, \[3, \[4, 5\]\]\], 6\]; let str = JSON.stringify(ary

快来打我*/ 2022年11月18日 04:51/ 0 赞/ 301 阅读

相关前端小知识进阶之多维数组扁平化处理

数组扁平化处理假若我们得到一个需求，这个需求呢需要我们把获取的多维数组扁平化处理，便于数据读取。可以这么做： export default {

你的名字/ 2022年10月05日 09:58/ 0 赞/ 144 阅读

相关数组扁平化

今天看到了数组扁平化处理，犹记得之前面试被问到过，下面介绍一下数组扁平化处理的几种形式：题目要求： / 将数组 arr = [1,2,3,4,[5

谁借莪１个温暖的怀抱￠/ 2021年09月29日 14:58/ 0 赞/ 351 阅读