多维数组变成一维数组

牧杉-惊蛰

已于 2023-06-29 18:06:02 修改

阅读量341

点赞数

文章标签：前端 javascript html

于 2023-06-29 17:51:58 首次发布

本文链接：https://blog.csdn.net/m0_63026408/article/details/131461374

版权

文章介绍了ES6中两种处理多维数组的方法：flat和flatMap。flat方法用于降维，可指定降维的层数，传入Infinity可将数组变为一维。flatMap则结合了map和flat操作，先应用映射函数再降一维。同时，文中还展示了如何使用递归实现多维数组的降维处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：es6新增的flat

1：html部分

{{ demo1 }}
    <br>
    <br>
{{ demo2 }}

2：js部分

flat方法默认没有参数，这时只会降维降一层。可以传数字类型的参数指定降维次数。

如果想将任意维度的数组变成一位数组，可以传入Infinity。

flat方法不改变原数组。

  data() {
    return {
      moreArr1:[
        [12,21,22,],
        1,2,
        [
          [122,231],
          20,19
        ]
      ],
      moreArr2:[
        {
          '前排':'吃瓜群众'
        },
        [
          {'第二层1':'val1'},
          {'第二层2':'val2'},
          {'第二层3':'val3'},
        ],
        {'第一层1':'val1'},
        {'第一层2':'val2'},
        [
          [
          {'第三层1':'val1'},
          {'第三层2':'val2'},
          ],
          {'第二层4pp':'val4'},
          {'第二层5pp':'val5'},
        ]
      ]
    };
  },


computed: {
    demo1(){
      return this.moreArr1.flat(Infinity)
    },
    demo2(){
      return this.moreArr2.flat(Infinity)
    },
  },

2：es6新增的flatMap方法

flatMap()方法，参数是一个回调函数，类似map方法的使用，数组的每个元素执行一次回调函数，然后对返回的数组执行flat()方法，只降一次维，

3：递归调用

let data=[
  [12,21],
  1,2,3,
  [
    [111,222,333,[4444,5555,2222]],
    33,44,
  ]
];
let res=[];
//如果元素不是数组，将会报错。下面是改良版：
function changeArr(arr){
  arr.forEach
  ?(arr.forEach(item=>{
    item.forEach
    ?changeArr(item)
    :res.push(item)
  }))
  :res.push(arr)
}

console.log(changeArr(data))