获取数组内对象键值对结果异常，如何排查并解决？

数据源结构 #

{
 studentData: [
  { id: 1, name: "John Doe", yearEnrolled: "6th Grade"},
  { id: 2, name: "Jane Doe", yearEnrolled: "8th Grade"}
 ],
 teacherData: [
  { id: 1, name: "John Doe", subject: "Math"},
  { id: 2, name: "Jane Doe", subject: "English"}
 ]
}

尝试的代码 #

let johnYearEnrolled = studentData[0]?.yearEnrolled ? studentData[0]?.yearEnrolled : "";

异常现象 #

• 执行上述代码后，得到的结果是 "8th"
• 执行 console.log(studentData[0]?.yearEnrolled) 时，输出的却是整个学生对象：({ id: 1, name: "John Doe", yearEnrolled: "6th Grade"})

问题原因与解决方法 #

1. 变量引用或打印错误：正常情况下studentData[0]?.yearEnrolled应该直接返回"6th Grade"，你打印出整个对象，说明你可能误把studentData[0]当成studentData[0]?.yearEnrolled来输出了，或者你的studentData变量实际指向的不是你描述的数据源。
2. 冗余且易出错的三目运算符：你的代码逻辑完全多余，可选链?.已经能处理左侧不存在的情况，建议改用空值合并运算符??来兜底空字符串，代码简化为：

   let johnYearEnrolled = studentData[0]?.yearEnrolled ?? "";
   

3. 结果"8th"的根源：你得到"8th"，大概率是不小心访问了数组的第二个元素（studentData[1]?.yearEnrolled对应"8th Grade"），要么是代码里索引写错成了1，要么是你的studentData数组顺序被修改过，或者数据源实际和你描述的不一致。

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