Angular 4 TypeScript中如何用单个forEach遍历多个数组？

当然可以实现这个需求，但你当前写的TypeScript语法是不正确的——TypeScript（以及JavaScript）并不支持在单个for...of语句里同时声明两个迭代器。不过我们有几种简洁的方式来达成你想要的效果，不需要写两个独立的forEach循环。

先说说你代码里的问题 #

你这段代码存在几个语法错误：

• 不能在一个for...of里同时遍历两个数组并声明两个变量
• [key.entryTime]如果是想引用数组的话，不需要额外包裹成数组（应该直接用key.entryTime，假设它本身就是数组）
• 变量名不能有空格，key 1是无效的变量名

解决方案1：利用forEach的索引参数（最推荐） #

如果你的两个数组（entryTime和exitTime）长度相同，直接用forEach的第二个参数（当前元素的索引）来获取另一个数组对应位置的元素即可：

// 假设entryTimes和exitTimes是你要遍历的两个数组
this.entryTimeList = [];
entryTimes.forEach((entryTime, index) => {
  const exitTime = exitTimes[index];
  this.entryTimeList.push({
    position: index,
    entryTime,
    exitTime
  });
});

这种方式最简洁，完全在单个循环内完成，而且逻辑清晰。

解决方案2：传统for循环（支持不等长数组） #

如果两个数组长度可能不一样，用传统的索引循环更灵活，可以处理到最长数组的最后一个元素：

this.entryTimeList = [];
const maxLength = Math.max(entryTimes.length, exitTimes.length);
for (let i = 0; i < maxLength; i++) {
  // 不存在的元素会是undefined，你可以根据需求添加判断
  const entryTime = entryTimes[i];
  const exitTime = exitTimes[i];
  this.entryTimeList.push({
    position: i,
    entryTime,
    exitTime
  });
}

解决方案3：模拟C#的Zip方法 #

如果你习惯C#里的Zip语法，可以自己实现一个简单的zip函数，或者用Lodash这类工具库的_.zip方法：

自己实现zip函数

// 定义一个通用的zip函数，合并两个数组的对应元素
function zip<T, U>(arr1: T[], arr2: U[]): [T, U][] {
  return arr1.map((item, index) => [item, arr2[index]]);
}

// 使用示例
this.entryTimeList = [];
zip(entryTimes, exitTimes).forEach(([entryTime, exitTime], index) => {
  this.entryTimeList.push({
    position: index,
    entryTime,
    exitTime
  });
});

使用Lodash的_.zip（如果项目已引入）

import _ from 'lodash';

this.entryTimeList = [];
_.zip(entryTimes, exitTimes).forEach(([entryTime, exitTime], index) => {
  this.entryTimeList.push({
    position: index,
    entryTime,
    exitTime
  });
});

总结 #

你不需要写两个独立的forEach循环，以上几种方法都能在单个循环内完成两个数组的遍历和元素配对。核心思路是利用索引对应或者数组合并配对的方式，而不是尝试在一个for...of里同时迭代两个数组（这在TS/JS里是不支持的）。

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