使用map/filter后变量ready返回数组而非预期值，求解答

我在处理JSON数据时，对变量'ready'的输出感到困惑：原本期望它获取到单个值'true'，但实际返回数组['false', 'true']，导致无法进入预设的条件分支。请问为何会返回包含多个结果的数组而非预期的单个值？

示例JSON #

{
  "data": {
    "competition": [
      {
        "events": [
          {
            "field": [
              {
                "ready": "true",
                "__typename": "Field"
              },
              {
                "ready": "true",
                "__typename": "Field"
              },
              {
                "ready": "true",
                "__typename": "Field"
              }
            ],
            "__typename": "Event"
          },
          {
            "field": [
              {
                "ready": "true",
                "__typename": "Field"
              },
              {
                "ready": "true",
                "__typename": "Field"
              },
              {
                "ready": "true",
                "__typename": "Field"
              }
            ],
            "__typename": "Event"
          }
        ],
        "__typename": "Competition"
      }
    ]
  }
}

问题代码 #

export function dailyListConverter(list) {
  const ready = JSON.parse(list)
    .data.competition[0].events.filter((event) => event.field)
    .map((event) => event.field[0].ready);
  if (ready === "true") {
    console.log("I'M HERE")
  }
  console.log("OUTSIDE CONDITIONS")
}

原因分析 #

问题出在你使用的filter和map方法的特性上：

• filter((event) => event.field)会遍历events数组的所有元素，保留所有event.field存在的元素。你的示例JSON中events包含2个符合条件的元素，因此filter返回一个包含2个元素的数组。
• 后续的map方法会对这个数组里的每个元素执行event.field[0].ready，并将每个结果收集成新数组，最终ready变量是一个包含2个'true'的数组，而非单个值。这也是你用ready === "true"判断永远不成立的原因——数组和字符串永远不会全等。

解决方案 #

根据你的需求不同，有两种常见的调整方式：

1. 获取第一个符合条件的元素的'ready'值 #

如果你只需要第一个存在field的event对应的ready值，用find代替filter（find返回第一个满足条件的元素，而非数组）：

export function dailyListConverter(list) {
  const targetEvent = JSON.parse(list)
    .data.competition[0].events.find((event) => event.field);
  const ready = targetEvent?.field[0].ready; // 可选链避免找不到元素时报错
  if (ready === "true") {
    console.log("I'M HERE")
  }
  console.log("OUTSIDE CONDITIONS")
}

2. 判断所有符合条件的元素的'ready'值都是'true' #

如果你需要确认所有存在field的event对应的ready都是'true'，用every方法：

export function dailyListConverter(list) {
  const allReady = JSON.parse(list)
    .data.competition[0].events.filter((event) => event.field)
    .every((event) => event.field[0].ready === "true");
  if (allReady) {
    console.log("I'M HERE")
  }
  console.log("OUTSIDE CONDITIONS")
}

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