优化代码：在Javascript中，有没有更好的方法将一个（较短的）数组映射到另一个（较长的）对象数组？

我有一个React项目，它使用一系列颜色来设计一些东西：

export const backlightArray = [
    theme.capri,
    theme.aqua,
    theme.oceanGreen,
    theme.yellow,
    'orange',
    theme.lightRed
];

以及另一个具有锚定标记属性的对象数组：

const siteStart = [
    { label: 'StackOverflow', href: 'https://stackoverflow.com' },
    { label: 'rwieruch', href: 'https://www.robinwieruch.de/blog' },
    { label: 'ITNext.io', href: 'https://itnext.io/' },
    { label: 'Dev.to', href: 'https://dev.to/' },
    {
        label: `ycombninator ('Hacker News')`,
        href: 'https://news.ycombinator.com/'
    },
    { label: 'OpenBase.io', href: 'https://openbase.io/' },
    { label: 'Coolors.co', href: 'https://coolors.co/' },
    { label: 'GitHub', href: 'https://www.github.com/' },
    { label: '/r/homelab/', href: 'https://www.reddit.com/r/homelab/' },
];

（我已经缩短了这个示例，但是现在这个数组有14个链接）

颜色数组比场地对象数组短。我希望颜色在数组结束时重复，因此我提出了这个循环，为

siteStart

数组的长度添加

backgroundarray

中的颜色：

let siteListColorsArray = [];
for (let i = 0; i < siteStart.length; i++) {
    if (siteListColorsArray.length < siteStart.length) {
        backlightArray.map(color => siteListColorsArray.push(color));
    }
}

我这样写是为了能够在

siteStart

数组中添加/删除

label

和

href

对象，而不必弄乱已完成对象中的任何其他属性

---

它工作正常，但我只是想知道：这段代码对其他人来说看起来像样吗？如果你要做类似的事情，你会做什么不同的事情？

我认为这应该能帮到你：

colorsLastIndex = backlightArray.length - 1;

const sites = siteStart.map((site, idx) => {
  const newIndex = idx > colorsLastIndex ? (idx % colorsLastIndex) - 1 : idx;
  site.id = `${site.label.slice(0, 3)}-${idx}`; // this is for 'key'
  site.color = backlightArray[newIndex];
  return site;
});

---

我得到了一个很好的答案，它取代了这个嵌套循环，创建了一个更长的颜色数组：

let siteListColorsArray = [];
for (let i = 0; i < siteStart.length; i++) {
    if (siteListColorsArray.length < siteStart.length) {
 /* lengths: (0)                           (13)            */
        backlightArray.map(color => siteListColorsArray.push(color));
 /*      (length = 6)                (iterates until > 13)         */
    }
}

但是，此解决方案使

newIndex

返回-1，从而导致该迭代缺少颜色值。当我

console.log（newIndex）

时，您可以看到该数字低于0，并且没有返回到5-我写下了要说明的步骤（我在控制台中执行了计算以验证）：

以下是对我有效的解决方案（注意：

backgroundarray.length

=6）：

一旦索引达到6，即比5高1（在

backgroundarray

中的最后一种颜色），6=

backgroundarray.length

，条件变为真。然后，指数的剩余部分除以6等于0，然后再增加1，直到指数达到另一个因子6（例如12），此时它再次变为0。这种情况也适用于：

newIndex = idx + 1 > backlightArray.length ? idx % backlightArray.length : idx;

idx+1

可能更能说明逻辑

---

这是一个很好的模式，可以减少对看起来笨拙的嵌套循环的需求。非常感谢分享

代码对我来说似乎很清楚，我理解其中的每一部分：）因为我是个新手。可能会有更多有经验的开发人员对此发表意见。我感谢您的回复！我试过了，结果不太管用，但它确实让我走上了正确的道路。我将回答我的问题。好吧，我可能遗漏了什么。但是类似的东西应该会起作用。它确实起作用了！我模模糊糊地记得我看的一个教程中的模式，但我不得不做一些尝试和错误，因为它在一开始对我来说不是特别明显。看起来不错，我只是在头脑中做了逻辑，我没有真正尝试过，所以我错过了我不需要实际减去一个。是的，也只使用原始数组长度（也不要从中减去一个）。你把它弄得太复杂了；）谢谢你的指点！没有你就做不到。

let colorsLastIndex = backlightArray.length - 1;

const sites = siteStart.map((site, idx) => {
    site.id = `${site.label.slice(0, 3)}-${idx}`;
    const newIndex = idx > colorsLastIndex ? (idx % colorsLastIndex) - 1 : idx;
    site.color = backlightArray[newIndex];
    return site;
});

/* start first iteration w/ index */
0
1
2
3
4
5
/* start newIndex = idx > colorsLastIndex ? (idx % colorsLastIndex) - 1
                    (6)       (6)            (6)      (5)          (- 1)  */
0  // 6 % 5 - 1  
1  // 7 % 5 - 1 
2  // 8 % 5 - 1 
3  // 9 % 5 - 1 
-1 // 10 % 5 - 1 
0  // 11 % 5 - 1 
1  // 12 % 5 - 1 
2  // 13 % 5 - 1 

const newIndex = idx >= backlightArray.length ? idx % backlightArray.length : idx;
    site.color = backlightArray[newIndex];

console.log(newIndex): 
/* start first iteration w/ idx */
0
1
2
3
4
5
/* start newIndex = (idx) >= backlightArray.length ? idx % backlightArray.length 
                     (6)           (6)               (6)  %  (6) */
0  // 6 % 6
1  // 7 % 6
2  // 8 % 6
3  // 9 % 6
4  // 10 % 6
5  // 11 % 6
0  // 12 % 6
1  // 13 % 6

newIndex = idx + 1 > backlightArray.length ? idx % backlightArray.length : idx;