JavaScript对象数组：结果疑问解析及添加isInvalid属性实现

一、当前输出结果的原因 #

你的代码中使用了 arr.map(group => group.values.every(val => val.id))，拆解逻辑如下：

• every() 方法会检测数组所有元素是否满足指定条件，仅当全部元素通过测试时返回 true，否则返回 false。
• JavaScript 中，val.id 会被当作布尔值判断：若属性不存在则为 undefined（属于 falsy 值）；若存在且为非空字符串则为 truthy 值。

对应每个分组的结果：

• Attestation Component 1：values 数组内所有对象都没有 id 属性，val.id 全为 undefined，every() 返回 false。
• Attestation Component 2 和 Attestation Component 3：values 数组内每个对象都有非空 id 属性，every() 检测全部通过，返回 true。

这就是控制台输出 [false, true, true]的原因。

二、添加 isInvalid 属性的实现 #

根据需求，给每个分组对象添加 isInvalid 属性：当分组存在至少一个无 id 的元素时，isInvalid 为 true，否则为 false（与 every(val => val.id) 的结果相反）。

修改后的代码如下：

const arr = [
    {
        "name": "Attestation Component 1",
        "values": [
            { "component": "Attestation Component 1" },
            { "component": "Attestation Component 1" },
            { "component": "Attestation Component 1" }
        ]
    },
    {
        "name": "Attestation Component 2",
        "values": [
            {
                "id": "10005884",
                "url": "https://www.msn.com",
                "bfaId": "G44.5.3.1N/A",
                "component": "Attestation Component 2"
            },
            {
                "id": "10005883",
                "url": "https://www.hotmail.com",
                "bfaId": "G44.5.3.2N/A",
                "component": "Attestation Component 2"
            }
        ]
    },
    {
        "name": "Attestation Component 3",
        "values": [
            {
                "id": "10005882",
                "url": "https://www.rediffmail.com",
                "bfaId": "G44.5.3.3N/A",
                "component": "Attestation Component 3"
            }
        ]
    }
];

// 给每个分组添加 isInvalid 属性
arr.forEach(group => {
    const hasMissingId = !group.values.every(val => val.id);
    group.isInvalid = hasMissingId;
});

console.log(arr);

修改后输出的结构示例： #

[
  {
    name: 'Attestation Component 1',
    values: [...],
    isInvalid: true
  },
  {
    name: 'Attestation Component 2',
    values: [...],
    isInvalid: false
  },
  {
    name: 'Attestation Component 3',
    values: [...],
    isInvalid: false
  }
]

内容的提问来源于stack exchange，提问作者Kiara