JS调用map函数无法读取uuid但直接console.log可正常访问的原因是什么

错误原因 #

• map 方法会遍历 docs 数组内的所有元素，而你单独打印只访问了下标为1的元素：
  • 数组第一个元素为 {'_id': 1}，本身没有 _source 属性，所以 element['_source'] 取值为 undefined，尝试读取 undefined.uuid 就会触发对应的类型错误
  • 数组第三个元素的 _source 下没有 uuid 属性，即使跳过第一个元素，运行到第三个元素时也会出现取值异常
• 你单独执行 console.log(docs[1]['_source'].uuid) 只访问了存在对应属性的第二个元素，所以可以正常输出结果。

修复方案 #

可以通过可选链操作符配合空值合并操作符做属性存在性兼容，避免属性不存在时报错：

const docs = [{'_id': 1},{'_source': {'uuid': 2}},{'_source': {'@timestamp': 3}}];

const description = dedent`
================================================
${
  docs.map((element) => [
    `Log entry ID: ${element['_id'] ?? '无'}`,
    `UUID: ${element?._source?.uuid ?? '无'}`,
    `Timestamp: ${element?._source?.['@timestamp'] ?? '无'}\n`,
  ].join('\n')).join('--------------------\n')
}
`;

console.log(description);

如果运行环境不支持可选链，也可以用逻辑与做兼容判断：

`UUID: ${element._source && element._source.uuid ? element._source.uuid : '无'}`

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