如何使用JavaScript的for循环实现两个数组的一对一元素拼接并生成新数组

嘿，我来帮你捋捋代码里的问题，再给你搞定正确的实现方式～

首先看你当前代码的几个核心问题：

• 你用了嵌套for循环，这会让每个车手都和所有涂装拼接一遍，而且每次都直接把resultArray赋值成单个拼接字符串，最后自然只剩最后一次的结果；
• 变量i和j没加let/const，会变成全局变量，这可不是好习惯，容易引发其他意外问题；
• 你没有往resultArray里添加元素，而是直接覆盖它，所以之前的所有拼接结果都丢失了。

接下来给你两种实用的实现方式，都是用for循环完成，满足你的需求：

方式一：单个for循环（推荐，高效简洁） #

因为车手数量比涂装多，我们可以用取模运算让涂装循环复用，这样每个车手都能分配到一个涂装，不会重复也不会遗漏：

const drivers = ['Verstappen', 'Hamilton', 'Raikkonen', 'Bottas', 'Lando Norris', 'Leclerc', 'Ricciardo', 'Vettel', 'Stroll', 'Tsunoda'];
const livery = ['Red Bull', 'Mercedes-Benz', 'McLaren', 'Ferrari', 'Aston Martin', 'Alpha Tauri'];
let resultArray = [];

const assignLivery = (driversList, liveriesList) => {
  // 遍历每一位车手
  for (let i = 0; i < driversList.length; i++) {
    // 用取模运算循环获取涂装，避免索引越界
    const currentLivery = liveriesList[i % liveriesList.length];
    // 拼接车手和涂装，然后添加到结果数组中
    resultArray.push(`${driversList[i]}${currentLivery}`);
  }
};

assignLivery(drivers, livery);
console.log(resultArray);

运行这段代码后，输出结果就和你期望的一致：每个车手对应一个涂装，涂装用完会自动从头开始循环分配。

方式二：修复你的嵌套循环（仅作参考，不推荐） #

如果你一定要保留嵌套循环的结构（其实完全没必要），可以添加判断逻辑，只给每个车手分配对应索引的涂装：

const drivers = ['Verstappen', 'Hamilton', 'Raikkonen', 'Bottas', 'Lando Norris', 'Leclerc', 'Ricciardo', 'Vettel', 'Stroll', 'Tsunoda'];
const livery = ['Red Bull', 'Mercedes-Benz', 'McLaren', 'Ferrari', 'Aston Martin', 'Alpha Tauri'];
let resultArray = [];

const loopIndex = (arrays, arrays2) => {
  for (let i = 0; i < arrays.length; i++) {
    // 找到当前车手对应的涂装索引（取模实现循环复用）
    const liveryIndex = i % arrays2.length;
    // 拼接后添加到结果数组
    resultArray.push(arrays[i] + arrays2[liveryIndex]);
  }
};

loopIndex(drivers, livery);
console.log(resultArray);

本质上这个和方式一逻辑一致，只是去掉了多余的内层循环——内层循环在这里反而会造成不必要的重复处理。

最后再提两个小提醒：

• 循环变量一定要用let或const声明，避免全局变量污染；
• 往数组中添加元素记得用push()方法，不要直接赋值覆盖数组本身。

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