Angular应用中如何合并多页请求返回的数组？

嘿，看起来你已经顺利通过forkJoin拿到了所有分页的职位数据啦！现在要把返回的5个数组合并成一个大数组，其实有几种简单又实用的方法，我来给你拆解一下：

方法1：使用数组flat()方法（最简洁） #

flat()方法专门用来扁平化嵌套数组，默认会处理一层嵌套，刚好匹配你现在的场景（data是包含5个数组的数组）。直接修改你subscribe里的代码就行：

forkJoin(this.positions).subscribe((data: Object[]) => {
  this.allPositions = data.flat(); // 一键扁平化数组
  console.log("All Positions:", this.allPositions);
});

方法2：用concat()结合展开运算符 #

concat()可以合并多个数组，配合展开运算符...把data里的每个数组单独传入，也能实现合并：

forkJoin(this.positions).subscribe((data: Object[]) => {
  this.allPositions = [].concat(...data);
  console.log("All Positions:", this.allPositions);
});

方法3：使用reduce()逐步合并 #

如果想更清晰地看到合并过程，可以用reduce()方法，逐个把每个分页的数组合并到结果数组中：

forkJoin(this.positions).subscribe((data: Object[]) => {
  this.allPositions = data.reduce((mergedArray, currentPageArray) => {
    return mergedArray.concat(currentPageArray);
  }, []); // 初始值是空数组
  console.log("All Positions:", this.allPositions);
});

额外小建议 #

如果你的职位数据有固定结构，建议定义一个interface来规范类型，比如：

interface JobPosition {
  id: string;
  title: string;
  company: string;
  // 其他字段根据接口返回定义
}

然后把data的类型改成JobPosition[][]，这样代码类型更安全，IDE也能给你更好的提示~

内容的提问来源于stack exchange，提问作者moses