JS中for in和for of的区别

**JS 中 for in 和 for of 的区别**

在 JavaScript 中，`for...in` 和 `for...of` 是两种常见的循环语句，它们用于遍历数组或对象中的元素。但是，这两种循环语句有着不同的使用场景和行为。

**1. for...in**

`for...in` 循环用于遍历一个对象的所有属性（包括继承而来的属性）。它会将每个属性名作为字符串传递给循环体内的变量。

javascriptlet person = {
 name: 'John',
 age:30,
 occupation: 'Developer'
};

for (let key in person) {
 console.log(key); // 输出：name, age, occupation}

在上面的例子中，`key` 变量会接收到 `person` 对象的所有属性名。

**2. for...of**

`for...of` 循环用于遍历一个可迭代对象（如数组或 Set）的元素。它会将每个元素传递给循环体内的变量。

javascriptlet numbers = [1,2,3,4,5];

for (let num of numbers) {
 console.log(num); // 输出：1,2,3,4,5}

在上面的例子中，`num` 变量会接收到 `numbers` 数组的每个元素。

**区别**

* **遍历对象还是数组**：`for...in` 遍历对象，而 `for...of` 遍历可迭代对象（如数组或 Set）。
* **属性名还是元素值**：`for...in` 将属性名传递给循环体内的变量，而 `for...of` 将元素值传递给循环体内的变量。
* **继承而来的属性**：`for...in` 会遍历一个对象的所有属性，包括继承而来的属性，而 `for...of` 只会遍历可迭代对象本身的元素。

**示例**

javascriptlet person = {
 name: 'John',
 age:30,
 occupation: 'Developer'
};

console.log('使用 for...in 遍历 person 对象：');
for (let key in person) {
 console.log(key); // 输出：name, age, occupation}

console.log('
使用 for...of 遍历 numbers 数组：');
let numbers = [1,2,3,4,5];
for (let num of numbers) {
 console.log(num); // 输出：1,2,3,4,5}

console.log('
使用 for...in 遍历 person 对象（包括继承而来的属性）：');
for (let key in person) {
 console.log(key); // 输出：name, age, occupation, constructor}

在上面的示例中，我们首先使用 `for...in` 遍历 `person` 对象，然后使用 `for...of` 遍历 `numbers` 数组。最后，我们再次使用 `for...in` 遍历 `person` 对象，包括继承而来的属性。

**总结**

* `for...in` 循环用于遍历一个对象的所有属性（包括继承而来的属性）。
* `for...of` 循环用于遍历一个可迭代对象（如数组或 Set）的元素。
* `for...in` 将属性名传递给循环体内的变量，而 `for...of` 将元素值传递给循环体内的变量。

通过理解这两种循环语句的区别和行为，你可以更好地选择适合你的编程需求。