包含对象的数组解构代码chosen取值异常时报titel属性解构错误的原因

let chosen = 4;

let team = [
  { titel: "ahmad", age: 20, available: true, skills: ["html", "css"] },
  { titel: "mizo", age: 30, available: false, skills: ["js", "react"] },
  { titel: "jo", age: 40, available: true, skills: ["pyhton", "django"] },
];

(() => {
  if (chosen === chosen) {
    let {
      titel,
      age,
      available,
      skills: [s1, s2],
    } = team[chosen - 1];
    console.log(`Team-${chosen}:
    name: ${titel}
    age:  ${age}
    skill: ${s1}
    availability: ${(() => {
      if (available) return `available`;
      else return `unavailable`;
    })()}
    `);
  } else return;
})();

报错原因 #

• 数组索引从0开始计数，当前team数组只有3个元素，合法索引范围是0_{`2`，对应`chosen`的有效取值范围是`1`}3。当chosen小于1或者大于3时，chosen - 1落在合法索引外，访问team[chosen - 1]得到的结果是undefined。
• 代码里的边界判断if (chosen === chosen)完全无效：除了NaN之外，所有值和自身恒等比较的结果都是true，所以无论chosen是否在合法范围内，都会执行后续的对象解构逻辑。
• 对象解构要求待解构的目标必须是对象类型（或可以隐式转换为对象的类型），undefined不属于合法的解构目标，因此JS引擎直接抛出类型错误，提示无法从undefined上解构titel属性。

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