在 TypeScript 中展平数组数组

在 TypeScript 中展平数组的数组

Flatten an Array of Arrays in TypeScript

使用该flat()方法在 TypeScript 中展平数组，例如
const flat = arr.flat(). 该flat方法采用一个参数，默认为 1 并指示嵌套数组应展平的深度。该方法返回一个新数组，子数组元素连接到其中。

索引.ts


const arr = [
  ['a', 'b'],
  ['c', 'd'],
  ['e', 'f'],
];

// 👇️ const flat: string[]
const flat = arr.flat();

// 👇️ ['a', 'b', 'c', 'd', 'e', 'f']
console.log(flat);

如果您收到“属性‘平面’在类型上不存在”的错误，您必须添加es2019到文件中的lib数组tsconfig.json。

tsconfig.json文件


{
  "compilerOptions": {
    // ... other options
    "lib": [
      // ... other libs
      "es2019"
    ]
  }
}

我们使用
Array.flat
方法来展平数组。

该方法采用的唯一参数是数组应展平到的深度级别。

因为我们没有为参数传递值，所以它默认为1.

如果您的数组嵌套更深并且您使用默认深度值1，则数组不会完全展平。

索引.ts


const arr = [[['a', 'b']], [['c', 'd']]];

// 👇️ const flat1: string[][]
const flat1 = arr.flat(1);

// 👇️ [['a', 'b'],  ['c', 'd']]
console.log(flat1);

// 👇️ const flat2: string[]
const flat2 = arr.flat(2);

// 👇️ ['a', 'b', 'c', 'd']
console.log(flat2);

如果您不知道数组的嵌套深度并且想将其完全展平，则可以将Infinity其作为参数传递给该flat()方法。

索引.ts


const arr = [[[['a', 'b']]], [[['c', 'd']]]];

// 👇️ const flat: string[]
const flat = arr.flat(Infinity);

// 👇️ ['a', 'b', 'c', 'd']
console.log(flat);

传递Infinity给该flat方法将数组展平到一个级别。

请注意，扁平化数组的推断类型可能不是您所期望的，在这种情况下，您可以使用
类型断言。

索引.ts


const arr = [[[['a', 'b']]], [[['c', 'd']]]];

// 👇️ const flat: string[]
const flat1 = arr.flat(Infinity) as string[];

// 👇️ ['a', 'b', 'c', 'd']
console.log(flat1);

如果你不喜欢这个flat()方法，你可以使用forEach()flatten array。

索引.ts


const arr = [['a'], ['b', 'c'], ['d']];

const flat: string[] = [];

arr.forEach((array) => {
  flat.push(...array);
});

console.log(flat); // 👉️ ['a', 'b', 'c', 'd']

我们传递给forEach方法的函数被数组中的每个元素调用。

在每次迭代中，我们使用扩展语法和push方法来解包子数组的值并将它们推入新数组。

在最后一次迭代之后，该flat变量包含一个已展平 1 级的数组。

该reduce()方法也可以类似的方式使用。

索引.ts


const arr = [['a'], ['b', 'c'], ['d']];

// 👇️ const flat: string[]
const flat = arr.reduce((accumulator, array) => {
  return [...accumulator, ...array];
}, []);

console.log(flat); // 👉️ ['a', 'b', 'c', 'd']

我们传递给reduce方法的函数会为数组中的每个元素（子数组）调用。

我们将accumulator变量的初始值设置为一个空数组。

accumulator在每次迭代中，我们将当前子数组中的值解压缩到一个新数组中并返回结果。

最终的结果是一个被展平了 1 级的数组。

–