JS记录集合中遇到的报错

Uncaught TypeError: Cannot read property 'hasOwnProperty' of undefined

var collection = {
    "2548": {
      "album": "Slippery When Wet",
      "artist": "Bon Jovi",
      "tracks": [ 
        "Let It Rock", 
        "You Give Love a Bad Name" 
      ]
    },
    "2468": {
      "album": "1999",
      "artist": "Prince",
      "tracks": [ 
        "1999", 
        "Little Red Corvette" 
      ]
    },
    "1245": {
      "artist": "Robert Palmer",
      "tracks": [ ]
    },
    "5439": {
      "album": "ABBA Gold"
    }
};

function updateRecords(id, prop, value) {
  if(value == "") {
    delete collection["id"][prop];
  }else if(prop == "tracks") {
    if(!collection["id"].hasOwnProperty("tracks")){
      collection["id"].tracks = [];
    }
    collection["id"].tracks.push(value);
  }else {
    collection["id"][prop] = value;
  }
  return collection;
}

// 你可以修改这一行来测试你的代码
updateRecords(5439, "tracks", "ABBA");

思路:

  • 根据报错第一反应查看hasOwnProperty是否正确使用。

    1、直接带入数据,可以正常判断
      collection["5439"].hasOwnProperty("tracks") //fasle
      collection[5439].hasOwnProperty("tracks") //false
    
    2、给id赋值,再执行
    var id = 5439;
    collection["id"].hasOwnProperty("tracks") //报错:Cannot read property 'hasOwnProperty' of undefined
    
    //把id的双引号去掉后,可以正常判断
    collection[id].hasOwnProperty("tracks") //false
    

    由此可见是获取对象属性的方法有问题,导致出现这个情况

  • 把所有id的引号取消后,可以正常执行

    function updateRecords(id, prop, value) {
      if(value == "") {
        delete collection[id][prop];
      }else if(prop == "tracks") {
        if(!collection[id].hasOwnProperty("tracks")){
          collection[id].tracks = [];
        }
        collection[id].tracks.push(value);
      }else {
        collection[id][prop] = value;
      }
      return collection;
    }
    

对象属性的读取

读取对象的属性,有两种方法,一种是使用点运算符,还有一种是使用方括号运算符。

obj.foo; 	//foo是字符串
obj["foo"];	//foo是键名
obj[foo];	//foo是变量
obj[0.7]

如果使用点运算符,foo就是字符串;

如果使用方括号运算符,用双引号的话foo是键名;不使o用引号,那么foo就是一个变量。

数值键名不能使用点运算符(因为会被当成小数点),只能使用方括号运算符。对象obj的数字键0.7,加不加引号都可以,因为会被自动转为字符串。

总结

回到一开始的问题,其实出现报错的情况也很简单,就是脑子死机了。

collection["id"]里的id实际上已经不是变量了,而是一个键名,而collection里没有id这个属性,自然也就没有在里面定义id为对象,所以使用使用对象的方法hasOwnProperty()就会报错了。

最后发现一开始的报错也很明确了:

 Cannot read property 'hasOwnProperty' of undefined
 无法读取未定义的属性“hasOwnProperty” 

送给自己一句话:努力学好基础跟英语吧。

原文地址:https://www.cnblogs.com/hello9102/p/13406026.html