JS遍历数组判断name是否存在报Cannot read property 'name'错如何解决

错误原因 #

• 语法错误：checkemail函数定义结束后多写了一个多余的右大括号}，会导致JS解析上下文错乱，进而触发变量访问异常
• 逻辑错误：循环内第一次判断元素不匹配就直接返回storename()，不会遍历后续数组元素，完全不符合「遍历全部数组无匹配才返回」的需求
• 边界处理缺失：没有判断数组元素是否为有效值，极端场景下如果数组有空元素会触发读取name属性的报错

修复后代码 #

var arr = [
  {id: 1, name: "php"},
  {id: 2, name: "mysql"},
  {id: 3, name: "laravel"},
  {id: 4, name: "codeigniter"},
  {id: 5, name: "wordpress"},
  {id: 6, name: "sql"},
  {id: 7, name: "jquery"},
  {id: 8, name: "javascript"},
];

// 示例storename实现，可替换为你自己的业务逻辑
function storename() {
  return '无匹配名称';
}

function checkemail(arr, targetName) {
  // 提前校验参数合法性
  if (!Array.isArray(arr)) return storename();
  for (let i = 0; i < arr.length; i++) {
    // 跳过数组空元素，避免读取属性报错
    if (!arr[i]) continue;
    if (arr[i].name === targetName) {
      console.log("name found");
      return;
    }
  }
  // 遍历完全部元素未匹配到，才返回storename相关结果
  return storename();
}

console.log(checkemail(arr, "javascript"));

运行说明 #

• 传入存在的name值时，控制台打印name found，函数无返回值
• 传入不存在的name值时，返回storename函数的执行结果
• 如果需求是返回storename函数本身而非执行结果，将最后一行的return storename()改为return storename即可
• 新增的参数校验和空元素跳过逻辑，可彻底避免Cannot read property 'name' of undefined报错

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