JavaScript: for in / for of 循环遍历对象的属性
一、for in 循环
1.使用 for in 循环遍历对象的属性时，原型链上的所有属性都将被访问：
Object.prototype.say="cgl"; // 修改Object.prototype
var person ={ age: 18 };
for (var key in person) {
console.log(key, person[key]);//这里用person.key得不到对象key的值，用person[key] 或者 eval("person."+key);
} //结果： age 18
say cgl
2.只遍历对象自身的属性，而不遍历继承于原型链上的属性，使用hasOwnProperty 方法过滤一下。
Object.prototype.say="cgl";
var person ={
age: 18
};
for (var key in person) {
if(person.hasOwnProperty(key)){
console.log(key, eval("person."+key));
}
}
二.Object.keys()
ES6之前，循环对象常见做法是使用：for…in。但是for…in循环的问题在于它会遍历原型链中的属性，所以需要使用hasOwnProperty执行检查属性是否属于该对象。
ES6之后，我们对于对象的循环有了更好的办法：Object.keys,Object.values,Object.entriesObject.keys :创建一个包含对象所有属性的数组
ES6之后，我们对于对象的循环有了更好的办法：Object.keys,Object.values,Object.entriesObject.keys :创建一个包含对象所有属性的数组
const fruits ={ appple:22, pear:34, orange:88 } var keys = Object.keys(fruits); console.log(keys); //["appple", "pear", "orange"]
Object.values:创建一个数组，其中包含对象中每个属性的值
const fruits ={ appple:22, pear:34, orange:88 } var values =Object.values(fruits); console.log(values); //[22, 34, 88]
Object.entries:创建了一个二维数组，每个内部数组都有2个元素，第一个元素是属性名，第二个属性值
const fruits ={ appple:22, pear:34, orange:88 } var entries = Object.entries(fruits); console.log(entries);
使用Object.entries的时候，需要将其内部数组解构为其键和属性值
const fruits ={ appple:22, pear:34, orange:88 } for (const [fruit,num] of entries) { console.log(`we have ${num} ${fruit}`); //we have 22 appple ... }
三、for-in和for-of的区别
for-in实例：
let arr = [1, 2, 3, 4, 5]
Array.prototype.id = 123
arr.name = 'Jessica'
for (let index in arr) {
if (index == 2) {
// break;//0,1
// continue;//0,1,3,4
// return;//0,1
}
console.log(index, arr[index]);//遍历[1,2,3,4,5,Jessica,123]
}
for-of实例：
let arr = [1, 2, 3, 4, 5]
Array.prototype.id = 321
arr.name = 'Mars'
for (let value of arr) {
console.log(value);//只能拿到[1,2,3,4,5]
}
两者区别：
1.for-in只是获取数组的索引；而for-of会获取数组的值
2.for-in会遍历对象的整个原型链，性能差；而for-of只遍历当前对象，不会遍历原型链
3.对于数组的遍历，for-in会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)；for-of只返回数组的下标对应的属性值
4.for-of适用遍历数组／字符串/map/set等有迭代器对象的集合，但是不能遍历普通对象（obj is not iterable）
补充说明for-of只遍历当前有迭代器对象的集合，不会遍历原型链：
let obj = {
name: 'han',
sex: 'female'
}
console.log(Object.keys(obj));//返回索引值数组 => ['name','female']
obj.dance = function () {
console.log('dance');
}
Object.prototype.say = function () {
console.log('say');
}
for (let value of Object.keys(obj)) {
console.log(value);//name;sex;dance
}