日常学习2024.2.7-for.in和Object.keys的区别,for.in和for.of的区别

1.for.in和Object.keys的区别

（1）for…in
for…in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。
(2）Object.keys(obj)
Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。

// 定义一个父对象
const parent = {
  parentProp: 'Parent Property'
};

// 定义一个子对象，继承自父对象
const child = Object.create(parent);
child.childProp = 'Child Property';

// 遍历子对象及其原型链上的属性
for (let key in child) {
  console.log('key1 '+key + ':', child[key]);
}
for(let key of Object.keys(child)) {
  console.log('key2 '+key + ':', child[key]);
}

结果:

最好用Object.keys()

2.for.in和for.of的区别

for…in：主要用于遍历对象的可枚举属性。当你对一个数组使用for…in时，它实际上会遍历数组的所有可枚举属性，包括那些从原型链上继承的属性。因此，当使用for…in遍历数组时，它可能会遍历到一些非预期的属性。
for…of：主要用于遍历可迭代对象（iterable），如Array、Map、Set、String、TypedArray、arguments对象等。它按照可迭代对象的定义顺序来遍历。

for…in

// 定义一个对象  
var person = {  
    firstName: "John",  
    lastName: "Doe",  
    age: 30,  
    isStudent: false  
};  
  
// 使用for...in循环遍历对象的属性  
for (var key in person) {  
    if (person.hasOwnProperty(key)) { // 使用hasOwnProperty来确保只遍历对象自身的属性，不包括原型链上的属性  
        console.log("属性名: " + key + ", 值: " + person[key]);  
    }  
}

for…of

// 定义一个数组  
var numbers = [1, 2, 3, 4, 5];  
  
// 使用for...of循环遍历数组元素  
for (var number of numbers) {  
    console.log(number);  
}

在JavaScript中，for…of 循环不能直接用于遍历对象的属性，因为对象本身不是可迭代对象（iterable）。for…of 循环是为可迭代对象设计的，比如数组、字符串、Map、Set、TypedArray等。

如果你想要使用 for…of 遍历对象的属性，你需要首先将对象转换为一个可迭代的值集合。这通常通过 Object.values(obj)、Object.entries(obj) 或 Object.keys(obj) 来实现，它们分别返回对象值、键值对和键的数组。

下面是一个使用 for…of 遍历对象属性的例子，这次我们通过 Object.entries(obj) 将对象转换为键值对数组：

// 定义一个对象  
var person = {  
    firstName: "John",  
    lastName: "Doe",  
    age: 30  
};  
  
// 使用Object.entries()将对象转换为键值对数组，然后使用for...of遍历  
for (var [key, value] of Object.entries(person)) {  
    console.log(`属性名: ${key}, 值: ${value}`);  
}
//属性名: firstName, 值: John  
//属性名: lastName, 值: Doe  
//属性名: age, 值: 30