ES6 every()校验嵌套数组checked状态未返回预期结果问题排查

问题复现代码 #

你当前使用的代码如下：

const isAllChecked = [
    {
        "id": "1",
        "checked": true,
    },
    {
        "id": "2",
        "checked": true,
        "nested": [
            {
                "id": "2.1",
                "checked": true,
            },
            {
                "id": "2.2",
                "checked": true,
            }
        ]
    },
    {
        "id": "3",
        "checked": true,
    },
].every(
    (o) =>
      o.checked &&
      o.nested?.every((o) => o.checked)
  )

你的预期是所有层级checked均为true时返回true，实际运行结果为false。

错误原因 #

核心问题出在可选链操作符?.的返回值逻辑：

• 对于id为1、3的一级项，本身不存在nested属性，此时o.nested?.every(...)的返回值是undefined
• 你的判断逻辑是o.checked && 嵌套校验结果，对这两个项来说等价于true && undefined，最终计算结果是假值undefined
• Array.every方法要求所有遍历项的回调返回真值，只要存在一个假值就会整体返回false，因此即使所有checked属性都是true，最终结果也不符合预期。

修正方案 #

针对一层嵌套的场景，只需要给嵌套校验的结果加真值兜底，当不存在nested属性时默认判定嵌套校验通过即可：

const isAllChecked = [
    {
        "id": "1",
        "checked": true,
    },
    {
        "id": "2",
        "checked": true,
        "nested": [
            {
                "id": "2.1",
                "checked": true,
            },
            {
                "id": "2.2",
                "checked": true,
            }
        ]
    },
    {
        "id": "3",
        "checked": true,
    },
].every(
    (o) =>
      o.checked &&
      // 无嵌套项时默认通过嵌套校验
      (o.nested?.every((item) => item.checked) ?? true)
  )

如果你的数据存在多层级嵌套（比如子项下还存在nested属性），需要使用递归逻辑覆盖所有深层节点的校验：

const checkAllChecked = (list) => {
  return list.every(item => {
    // 当前项checked为false直接返回false
    if (!item.checked) return false
    // 存在嵌套项则递归校验嵌套项，不存在则直接通过
    return item.nested ? checkAllChecked(item.nested) : true
  })
}

// 调用方式
const isAllChecked = checkAllChecked(/* 待校验的数组 */)

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