for in 与 for of， 与 hasOwnProperty

今天本来想尝试下HTML5的自定义属性

<div data-name='byset1'>1</div>
<div data-name='byset'>2</div>
<div data-name='byset3'>3</div>
<div data-name='byset'>4</div>
<div data-name='byset5'>5</div>
<script>    
  var getDom = document.querySelectorAll('div')
  
  for (let i in getDom) {  
    console.log(getDom[i].dataset)
  }    
</script>

结果打印出来多了6个undefined

才发现原来for in 会把prototype的属性也枚举出来

解决这个问题可以通过检测hasOwnProperty过滤

<script>    
  var getDom = document.querySelectorAll('div')  
  for (let i in getDom) {  
    if (getDom.hasOwnProperty(i)) {
      console.log(getDom[i].dataset)
    }
  }    
</script>

--插个官方的解释--

描述

所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性；和 in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。

示例

使用 hasOwnProperty 方法判断属性是否存在

下面的例子检测了对象 o 是否含有自身属性 prop：

o = new Object();
o.prop = 'exists';

function changeO() {
  o.newprop = o.prop;
  delete o.prop;
}

o.hasOwnProperty('prop');   // 返回 true
changeO();
o.hasOwnProperty('prop');   // 返回 false

自身属性与继承属性

下面的例子演示了 hasOwnProperty 方法对待自身属性和继承属性的区别：

o = new Object();
o.prop = 'exists';
o.hasOwnProperty('prop');             // 返回 true
o.hasOwnProperty('toString');         // 返回 false
o.hasOwnProperty('hasOwnProperty');   // 返回 false

遍历一个对象的所有自身属性

下面的例子演示了如何在遍历一个对象的所有属性时忽略掉继承属性，注意这里 for...in  循环只会遍历可枚举属性，所以不应该基于这个循环中没有不可枚举的属性而得出 hasOwnProperty 是严格限制于可枚举项目的（如同 Object.getOwnPropertyNames()）。

var buz = {
    fog: 'stack'
};

for (var name in buz) {
    if (buz.hasOwnProperty(name)) {
        alert("this is fog (" + name + ") for sure. Value: " + buz[name]);
    }
    else {
        alert(name); // toString or something else
    }
}

或者直接用for of解决这个问题，听说for in是es5时代的东西，因为这个弊端，在es6时代推出了for of，直接遍历value

<script>    
  var getDom = document.querySelectorAll('div')  
  for (let val of getDom) {  
    console.log(val.dataset)    
  }    
</script>