for in 和 for of 循环的区别

for...in 和 for...of 是 JavaScript 中两种不同的循环语句，它们有以下主要区别：

1. 适用对象：

   • for...in 主要用于遍历对象的可枚举属性。
   • for...of 用于遍历可迭代对象（如数组、字符串、Map、Set等）的值。

2. 遍历内容：

   • for...in 遍历的是对象的键（key）。
   • for...of 遍历的是对象的值（value）。

3. 原型链：

   • for...in 会遍历对象的整个原型链。
   • for...of 只关注对象本身的值。

4. 顺序：

   • for...in 不保证遍历顺序。
   • for...of 按照迭代器定义的顺序进行遍历。

5. 数组应用：

   • for...in 遍历数组时，返回的是数组的索引（字符串类型）。
   • for...of 遍历数组时，直接返回数组元素。

6. 性能：

   • 通常，for...of 在遍历数组时比 for...in 更快。

示例：

// for...in 示例
let obj = {a: 1, b: 2, c: 3};
for (let key in obj) {
    console.log(key); // 输出: "a", "b", "c"
}

// for...of 示例
let arr = [1, 2, 3];
for (let value of arr) {
    console.log(value); // 输出: 1, 2, 3
}

// for...in 与数组
for (let index in arr) {
    console.log(index); // 输出: "0", "1", "2"
}

// 字符串遍历
let str = "Hello";
for (let char of str) {
    console.log(char); // 输出: "H", "e", "l", "l", "o"
}

总的来说，如果你想遍历对象的属性，使用 for...in；如果你想遍历数组或其他可迭代对象的值，使用 for...of。for...in 和 for...of 是 JavaScript 中两种不同的循环语句，它们有以下主要区别：

1. 适用对象：

   • for...in 主要用于遍历对象的可枚举属性。
   • for...of 用于遍历可迭代对象（如数组、字符串、Map、Set等）的值。

2. 遍历内容：

   • for...in 遍历的是对象的键（key）。
   • for...of 遍历的是对象的值（value）。

3. 原型链：

   • for...in 会遍历对象的整个原型链。
   • for...of 只关注对象本身的值。

4. 顺序：

   • for...in 不保证遍历顺序。
   • for...of 按照迭代器定义的顺序进行遍历。

5. 数组应用：

   • for...in 遍历数组时，返回的是数组的索引（字符串类型）。
   • for...of 遍历数组时，直接返回数组元素。

6. 性能：

   • 通常，for...of 在遍历数组时比 for...in 更快。

示例：

// for...in 示例
let obj = {a: 1, b: 2, c: 3};
for (let key in obj) {
    console.log(key); // 输出: "a", "b", "c"
}

// for...of 示例
let arr = [1, 2, 3];
for (let value of arr) {
    console.log(value); // 输出: 1, 2, 3
}

// for...in 与数组
for (let index in arr) {
    console.log(index); // 输出: "0", "1", "2"
}

// 字符串遍历
let str = "Hello";
for (let char of str) {
    console.log(char); // 输出: "H", "e", "l", "l", "o"
}

总的来说，如果你想遍历对象的属性，使用 for...in；如果你想遍历数组或其他可迭代对象的值，使用 for...of。