数组扁平化——flat方法理解

100 阅读 0 评论 66 点赞

我是靠谱客的博主顺利蜗牛，最近开发中收集的这篇文章主要介绍数组扁平化——flat方法理解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

flat方法的使用：

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

参数：

指定要提取嵌套数组的结构深度，默认值为 1。

简单理解：就是要减去数组的层数（要讲数组降低几层）

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2));
// expected output: [0, 1, 2, [3, 4]]

//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 扁平化数组空项
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]111

flat 方法的其它实现：

大致原理：

遍历数组arr
判断当前元素是否为数组，是的话就递归；否则就直接添加元素
返回新数组

使用reduce + concat + isArray + slice

// 使用 reduce、concat 和递归展开无限多层嵌套的数组
var arr3 = [1, 2, 3, [1, 2, 3, 4, [2, 3, 4]]];

function flatDeep(arr, deep = 1) {
  // deep 大于 0 就继续降低层数，否则直接返回数组
  return deep > 0
    ? arr.reduce(   // 对数组进行累计合并(contat)
        (acc, val) =>   // acc 是累计器， val 是处理的元素
          acc.concat(Array.isArray(val) ? flatDeep(val, deep - 1) : val),   // 累计器对元素进行累计，判断当前元素(val是否数组，是就递归，否就直接添加到累计器中
        []    // 累计器初始值为一个空数组
      )
    : arr.slice();  // 当层数等于0或小于0时，说明就是一维数组，直接拷贝
}

const res = flatDeep(arr3, Infinity);
console.log(res);
// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

使用forEach + isArray + push

var arr4 = [1, 2, 3, [1, 2, 3, 4, [2, 3, 4]]];
// forEach + isArray + push

const eachFlat = (arr = [], deep = 1) => {
  // 存储结果数组
  const results = [];

  (function flat(arr, deep) {
    // 遍历每个元素
    arr.forEach((item) => {
      // 如果元素时数组，且深度大于0
      if (Array.isArray(item) && deep > 0) {
        flat(item, deep - 1); // 递归
      } else {
        // 元素不是数组
        results.push(item); // 直接添加
      }
    });
  })(arr, deep)

  return results; // 返回结果
};

const eachRes = eachFlat(arr4, Infinity);
console.log(eachRes);
// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

使用 let … of + push

var arr5 = [1, 2, , , 3, [1, 2, , 3, 4, [2, 3, 4]]];
// for of 循环不能去除数组空位，需要手动去除
const forFlat = (arr = [], depth = 1) => {
  const result = [];
  (function flat(arr, depth) {
    for (let item of arr) {
      if (Array.isArray(item) && depth > 0) {
        flat(item, depth - 1)
      } else {
        // 去除空元素，添加非undefined元素
        item !== void 0 && result.push(item);
      }
    }
  })(arr, depth)
  return result;
}

const forRes = forFlat(arr5, Infinity)
console.log(forRes)
// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]