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);

Answer 2

你可以用这个...我只是把它放在一起...

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

const 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',
        ]
    }
]

const resultObject = {}

colors.forEach(color => {
  paintings.forEach(painting => {
    if (painting.colors.includes(color)){
      if(!resultObject[color])
        resultObject[color] = []
      resultObject[color].push(painting)
    }
  })
})

console.log(resultObject)

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

Javascript List objects in an array that contain a value in nested array

arrays

big-o

multidimensional-array