丰富知识库，了解数组扁平化方案

前端

2023-12-06 19:17:26

数组扁平化的内涵与意义

在实际开发中，数组嵌套结构常常会成为需要处理的问题。数组扁平化正是为了应对这种问题而提出的一种将多维数组降维为一维数组的解决方案。

举个简单的例子：在HTML中，元素标签之间往往具有包含或嵌套的关系，此时若需遍历所有元素，就需要使用数组扁平化技术。

另一个例子是处理JSON数据。JSON数据是一种常见的用于数据传输的格式，其本身可能是多层次嵌套的。使用数组扁平化技术可以将多层次嵌套的JSON数据转化为简单的、一维的数据结构，以便于程序的处理。

2. 主流的数组扁平化实现方案

2.1. 循环实现方案

循环是解决数组扁平化的最直接、最基础的方法。核心思想是使用循环语句遍历数组中的每个元素，如果元素是数组，则递归调用该方法，将该数组的元素也加入到最终结果数组中。如果不是数组，则直接将该元素加入到最终结果数组中。

循环实现方案示例：

function flatten(arr) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result.push(...flatten(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

2.2. 递归实现方案

递归思想是将问题分解为更小的子问题，然后递归地解决这些子问题，最终得到问题的最终解。数组扁平化同样可以使用递归来解决。核心思想是将数组中的每个元素分别处理，如果元素是数组，则递归调用该方法，将该数组的元素也加入到最终结果数组中。如果不是数组，则直接将该元素加入到最终结果数组中。

递归实现方案示例：

function flatten(arr) {
  return arr.reduce((acc, val) => {
    return acc.concat(Array.isArray(val) ? flatten(val) : val);
  }, []);
}

2.3. FlatMap实现方案

ES6中引入的flatMap()方法是专门针对数组扁平化而设计的。其语法为arr.flatMap(callback)，其中callback是处理数组元素的函数。flatMap()方法首先将每个元素传递给callback函数进行处理，然后将结果展开成一个新的数组，并返回该新的数组。

FlatMap实现方案示例：

const flatten = arr => arr.flatMap(item => (Array.isArray(item) ? flatten(item) : item));

3. 数组原型的实现方案

3.1. flat()方法

flat()方法是ES2019中引入的数组原型方法。其语法为arr.flat(depth)，其中depth参数指定了扁平化的深度。若不传入depth参数，则扁平化所有嵌套层级。

flat()方法实现方案示例：

const arr = [1, [2, 3], [4, [5, 6]]];
console.log(arr.flat()); // [1, 2, 3, 4, 5, 6]
console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6]
console.log(arr.flat(3)); // [1, 2, 3, 4, 5, 6]

3.2. flatMap()方法

flatMap()方法是ES2019中引入的数组原型方法。其语法为arr.flatMap(callback)，其中callback是处理数组元素的函数。flatMap()方法首先将每个元素传递给callback函数进行处理，然后将结果展开成一个新的数组，并返回该新的数组。

flatMap()方法实现方案示例：

const arr = [1, [2, 3], [4, [5, 6]]];
console.log(arr.flatMap(item => (Array.isArray(item) ? item : [item]))); // [1, 2, 3, 4, 5, 6]

4. 比较与选择

4.1. 性能分析

通过对循环、递归、FlatMap、flat()、flatMap()方法进行性能测试，可以得出以下结论：

方法	时间复杂度	适用场景
循环	O(n)	嵌套层级不深的情况
递归	O(n^2)	嵌套层级较深的情况
FlatMap	O(n)	兼容性要求不高的情况
flat()	O(n)	兼容性要求高的情况
flatMap()	O(n)	兼容性要求高，需要指定扁平化深度的情况