TypeScript 中数组扁平化的方法-JavaScript中文网-JavaScript教程资源分享门户

在 TypeScript 中，我们经常需要处理数组数据。有时候，我们需要将一个多维数组转换成一维数组，这个操作被称为“扁平化”。本文将介绍 TypeScript 中的数组扁平化方法，以及如何使用这些方法来让我们的代码更加高效。

为什么需要数组扁平化？

在实际开发中，我们经常会遇到多维数组的情况，比如：

const arr = [[1, 2], [3, [4, 5]]];

这个数组中有两个子数组，第二个子数组还包含一个子数组。如果我们需要遍历这个数组，并且需要对其中的每一个元素进行操作，那么嵌套的数组会让我们的代码显得很复杂。

此时，我们可以通过将这个多维数组转换成一维数组来解决这个问题。

方法一：使用递归

一个比较简单的方法是使用递归来遍历整个数组，将每一个元素添加到一个结果数组中。

// www.javascriptcn.com code example
function flatten(arr: any[]): any[] {
  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;
}

这个函数会自动遍历多维数组，并返回扁平化后的一维数组。

方法二：使用 reduce 方法

另一种方法是使用 reduce 方法。

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

这个函数会遍历整个数组，并将每一个元素按顺序添加到结果数组中。

方法三：使用 flat 方法

TypeScript/JavaScript 中提供了另一种快速扁平化数组的方法：使用数组的 flat 方法。在 TypeScript/JavaScript 2019 版本之前，我们需要手动编写一个扁平化函数。但是，从 TypeScript/JavaScript 2019 版本开始，flat 方法已经被引入到了语言中。

const arr = [[1, 2], [3, [4, 5]]];
const flatArr = arr.flat();

flat 方法会将嵌套的数组扁平化为一个一维数组。

如何选择最合适的方法？

当我们需要对数组进行扁平化操作时，我们可以根据具体情况来选择最适合的方法。如果你在 TypeScript/JavaScript 2019 版本之前编写代码，使用递归或 reduce 方法可以实现数组扁平化。如果你使用的是 TypeScript/JavaScript 2019 版本或更高版本，使用 flat 方法会更加简单。无论你选择哪种方法，扁平化数组可以使你的代码更加容易阅读和维护。

示例代码

接下来，我们将通过一个完整的 TypeScript 代码示例来演示如何使用上面介绍的三种方法进行数组扁平化。

// www.javascriptcn.com code example
function flatten1(arr: any[]): any[] {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result.push(...flatten1(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

function flatten2(arr: any[]): any[] {
  return arr.reduce((prev, cur) => {
    return prev.concat(Array.isArray(cur) ? flatten2(cur) : cur);
  }, []);
}

const arr = [[1, 2], [3, [4, 5]]];
const flatArr = arr.flat();

console.log('flatten1:', flatten1(arr)); // [1, 2, 3, 4, 5]
console.log('flatten2:', flatten2(arr)); // [1, 2, 3, 4, 5]
console.log('flat:', flatArr); // [1, 2, 3, 4, 5]

这个示例代码展示了如何使用递归、reduce 和 flat 方法来扁平化一个多维数组。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67ce40efe46428fe9e842d89

TypeScript 中数组扁平化的方法