有没有一种优雅的方法来处理潜在的数组元素与 object 值的比较？

Question

我有一个游戏，其中参赛者随机呈现两张图片。 图片可能是红色或蓝色，目标是 select 任何红色图片并提交他们的投票。 当他们投票时，他们应该为他们选择的任何红色图片获得一分，对于他们没有选择的任何蓝色图片select。

每个图像都有一个文件名和颜色属性，如下所示：

<div id="box1" class="selectItem" data-filename="image1.png" data-color="red">

当参赛者选择一个或多个图像时，文件名和颜色会被推入一个数组中，该数组以隐藏的形式保存，如下所示：

[image1.png, red]但也可能看起来像这样： [image1.png, red, image2.png, blue]或者也可以是空的。

我有一个 object 包含有关当前显示的图像的信息。 它是这样构建的：

const image1 = $('box1').attr('data-filename');
const color1 = $('box1').attr('data-color');
const image2 = $('box2').attr('data-filename');
const color2 = $('box2').attr('data-color');
const obj = {};
obj[image1] = color1;
obj[image2] = color2;

因此，object 可能如下所示：

{
  ['image1.png']: 'red',
  ['image2.png']: 'blue'
}

然后将所有奖励积分添加到保存在 sessionStorage 中的分数中。

将用户的选择（数组）与显示的图像（对象）进行比较的最优雅的方法是：

1. 为选定的任何红色图像奖励一分
2. 为未选择的任何蓝色图像奖励一分

Answer 1

我刚结束这样做：

for (let [key, value] of Object.entries(obj)) { 
    if (key === array[0]) {
        if (value === 'red') {
            // update my score
        }
    } else if (key !== array[0]) {
        if (value === 'blue') {
            // update my score
        }
    }
}