arrays - Javascript列出数组中包含嵌套数组中的值的对象

Question

我有一个颜色数组，我有一个对象数组。每个对象都包含自己的颜色数组。
颜色数组:

colors = [
  'yellow',
  'blue',
  'red',
  'green',
  'purple',
  'brown',
  'fuscia',
  'grey',
  'beige',
  'orange',
]

对象数组:

paintings = [{
    name: 'The Wind',
    rating: '25',
    colors: [
      'orange',
      'blue',
    ]
  },
  {
    name: 'The Sons',
    rating: '8',
    colors: [
      'red',
      'green',
      'yellow',
    ]
  },
  {
    name: 'Freedom',
    rating: '16',
    colors: [
      'grey',
      'yellow',
    ]
  },
  {
    name: 'Space',
    rating: '50',
    colors: [
      'purple',
      'green',
      'orange',
    ]
  }
]

我在这里试图实现的是使颜色数组中的每种颜色本身成为一个数组，并且每个新的颜色数组将包含在其自己的颜色数组中包含颜色的绘画对象。此外，这些对象中的每一个都将从最高到最低评级排序。我需要以这样的方式结束:

yellow = [{
    name: 'Freedom',
    rating: '16',
    colors: [
      'grey',
      'yellow',
    ]
  },
  {
    name: 'The Sons',
    rating: '8',
    colors: [
      'red',
      'green',
      'yellow',
    ]
  }
]

green = [{
  name: 'Space',
  rating: '50',
  colors: [
    'purple',
    'green',
    'orange',
  ]
} {
  name: 'The Sons',
  rating: '8',
  colors: [
    'red',
    'green',
    'yellow',
  ]
}]

orange = [{
  name: 'Space',
  rating: '50',
  colors: [
    'purple',
    'green',
    'orange',
  ]
} {
  name: 'The Wind',
  rating: '25',
  colors: [
    'orange',
    'blue',
  ]
}]

等等...
以上数据显然是虚拟数据。我实际上正在遍历一个非常大的数组。我通过循环遍历对象来提取颜色数组，用 flat() 将数组展平。并使用 Set() 创建一个新的颜色数组所以我可以有一个颜色列表来查找每个对象。
那么，如何才能以最有效的方式实现上述目标呢？
解决方案的附加信息:
在按照以下方式对原始数据进行排序后，我最终对数组进行了分组:

paintings.forEach((i) => {
    paintings.sort((a, b) => b.rating - a.rating)
})

const colorGroup = colors.map((color) => ({
    [color]: paintings
    .filter((painting) => painting.colors.includes(color))
}));

然后我限制只显示来自 vue-for 的 25 个环形:

<div v-for="painting in colorGroup.slice(0, 25)">
    {{ painting }}
</div>

谢谢你的帮助!

Answer 1

尝试这个。

var paintings = [{
    name: 'The Wind',
    rating: '25',
    colors: [
      'orange',
      'blue',
    ]
  },
  {
    name: 'The Sons',
    rating: '8',
    colors: [
      'red',
      'green',
      'yellow',
    ]
  },
  {
    name: 'Freedom',
    rating: '16',
    colors: [
      'grey',
      'yellow',
    ]
  },
  {
    name: 'Space',
    rating: '50',
    colors: [
      'purple',
      'green',
      'orange',
    ]
  }
];
var colors = [
  'yellow',
  'blue',
  'red',
  'green',
  'purple',
  'brown',
  'fuscia',
  'grey',
  'beige',
  'orange',
];

const colorObj = colors.map((color) => ({
  [color]: paintings.filter((painting) => painting.colors.includes(color)).sort((a, b) => b.rating - a.rating)
}));

console.log(colorObj);