美文网首页
js数组扁平化

js数组扁平化

作者: AAA前端 | 来源:发表于2019-11-12 11:11 被阅读0次

    现在有一个需求: 多维数组=>一维数组;

    var arr = [1,2,[3,4,[5,6,[7,8]]],[9,10], [11,12,[13,14]]]
    var str = JSON.stringify(arr);
    期望最后得到 [1,2,3,4,5,6,7,8,9,10,11,12,13,14]

    方法一 flat

    Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维数组。该方法返回一个新数组,对原数据没有影响。

    [1, 2, [3, [4, 5]]].flat()
    // [1, 2, 3, [4, 5]]
    [1, 2, [3, [4, 5]]].flat(2)
    // [1, 2, 3, 4, 5]
    

    如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。

    var arr = [1, 2, [3, 4, [5, 6, [7, 8]]], [9, 10], [11, 12, [13, 14]]]
    var a = arr.flat(Infinity) //  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
    

    其中还有一个 flatMap()方法对原数组的每个成员执行一个函数,相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。

    // 相当于 [[2, 4], [3, 6], [4, 8]].flat()
    [2, 3, 4].flatMap((x) => [x, x * 2])
    // [2, 4, 3, 6, 4, 8]
    

    方法二 replace + split

    arr = str.replace(/(\[|\])/g, '').split(',')
    

    方法三 replace + JSON.parse

    str = str.replace(/(\[|\])/g, '');
    str = '[' + str + ']';
    arr = JSON.parse(str);
    

    方法四 普通递归

    var arr = [1, 2, [3, 4, [5, 6, [7, 8]]], [9, 10], [11, 12, [13, 14]]]
    var result = [];
    var fn = function (arr) {
      for (let i = 0; i < arr.length; i++) {
        let item = arr[i];
        if (Array.isArray(item)) {
          fn(item);
        } else {
          result.push(item);
        }
      }
      return result
    }
    console.log(fn(arr))
    

    方法五 利用reduce函数迭代

    var arr = [1, 2, [3, 4, [5, 6, [7, 8]]], [9, 10], [11, 12, [13, 14]]]
    function flatten(arr) {
      return arr.reduce((pre, cur) => {
        return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
      }, []);
    }
    console.log(flatten(arr))
    

    方法六 扩展运算符

    var arr = [1, 2, [3, 4, [5, 6, [7, 8]]], [9, 10], [11, 12, [13, 14]]]
    // some 遇到true停止,在里面改变arr,然后继续while循环
    while (arr.some(Array.isArray)) { 
      arr = [].concat(...arr);
    }
    console.log(arr)
    

    参考:
    https://blog.csdn.net/qq_29055201/article/details/86530254

    https://juejin.im/post/5dbebbfa51882524c507fddb

    相关文章

      网友评论

          本文标题:js数组扁平化

          本文链接:https://www.haomeiwen.com/subject/blufictx.html