我有两个数组，一个有N个数据，另一个有固定的数据

Question

我有两个数组，一个包含n个数据，第二个包含固定数量的数据，其中包含5-6种颜色

示例：

阵列1 =>

const category = [
{
  name: 'Groceries',
  icon: ICONS.GROCERY,
},
{
  name: 'Bakery',
  icon: ICONS.BAKERY,
},
{
  name: 'General Stores',
  icon: ICONS.GENERAL_STORE,
},
{
  name: 'Cafe & Food',
  icon: ICONS.CAFE,
},
{
  name: 'Apparels',
  icon: ICONS.APPARELS,
},

 .
 .
 .
 .
 .
 .

];

阵列2 =>

 const bgColor = ['red', 'pink', 'blue', 'green'];

我想合并2个数组，这意味着我想在第一个数组(类别)中添加背景色，当第二个数组元素再次以索引0开始时

我想要像这样的数组：

const category = [
{
  name: 'Groceries',
  icon: ICONS.GROCERY,
  color:"red"
},
{
  name: 'Bakery',
  icon: ICONS.BAKERY,
  color:"pink"
},
{
  name: 'General Stores',
  icon: ICONS.GENERAL_STORE,
  color:"blue"
},
{
  name: 'Cafe & Food',
  icon: ICONS.CAFE,
  color:"green"
},
{
  name: 'Cafe & Food',
  icon: ICONS.CAFE,
  color:"red"
},
{
  name: 'Apparels',
  icon: ICONS.APPARELS,
  color:"pink"
},

 .
 .
 .
 .
 .
 .

];

Answer 1

要获得循环索引，您可以使用remainder operator (%)，其中max index是颜色数组的长度：

categories.map((category, index) => {
  const circularIndex = index % bgColors.length
  return {...category, color: bgColors[circularIndex] }
})