5种方式实现数组扁平化

爱编程的铭

已于 2023-02-07 15:18:56 修改

阅读量146

点赞数

分类专栏：前端文章标签： javascript typescript Powered by 金山文档

于 2023-02-07 15:17:59 首次发布

本文链接：https://blog.csdn.net/qq_45263913/article/details/128914671

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了将一个多维数组转换为一维数组的五种方法，包括toString和split结合、正则表达式、扩展运算符...和concat、reduce以及纯递归。这些方法针对不同场景和数据结构有不同的适用性。

摘要由CSDN通过智能技术生成

概念：将一个多维数组变为一维数组

[1,[2,3,[4,5]=>[1,2,3,4,5]

实现方式

利用toString&split将数组分割

注：该方法只适用于数组中没有对象元素，因为toStrin在转换时会将对象转为[Object Object]形式。

let arr = [1,[2,3,[4,5]；
flatten1 (arr: any[]) {
    return arr.toString().split(',').map(item => {
      return parseInt(item);// 将字符串转换
     });
  }

console.log(this.flatten1(arr));

巧用正则

采用JSON.stringify方法先转换为字符串，然后通过正则表达式过滤掉字符串中的数组的方括号，最后再利用JSON.parse把它转换成数组

flatten2 (arr: any) {
    arr = '[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']';
    return JSON.parse(arr);
  }

ES6扩展运算符...配合concat

ES6的扩展运算符...能通过迭代器拿出数组里的元素，concat在连接两个数组时也会拿出后一个数组里的元素

flatten3(arr: any) {
    while (arr.some((item: any) => Array.isArray(item))) {// 如果元素是数组就用...展开，直至没有数组
      arr = [].concat(...arr);
    }
    return arr;
  }

reduce + 递归

reduce函数接受四个参数，分别为

previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））

currentValue （数组中当前被处理的元素）

index（当前元素在数组中的索引）

array （当前调用的数组）

数组扁平化也需要数组的上一个元素和下一个元素连续操作，可以使用reduce+conact实现

flatten4(arr: any) {
    return arr.reduce((prev: any, curr: any) => {
      return prev.concat(Array.isArray(curr) ? this.flatten4(curr) : curr);
    }, []); // 这是prev的初始值
  }

纯正递归

普通递归的思路很容易理解，就是一遍一遍的去遍历数组，直到没有数组

 flatten5(arr: any) {
    let res: any[] = [];
    arr.map((item: any) => {
      if (item instanceof Array) {
        res = res.concat(this.flatten5(item));
      } else {
        res.push(item);
      }
    });
    return res;
  }