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

在JavaScript中，for...in和for...of都是用于遍历数组或对象的循环语句，它们之间有一些重要的区别。

1. 区别一：遍历数组

for...in和for...of都可以循环数组，for...in输出的是数组的索引，而for...of输出的是数组的每一项元素。

    const arr = ["apple", "banana", "cherry"];

    // for ... in
    for (let key in arr) {
      console.log(key); 
      // 输出 0,1,2
    }

    // for ... of
    for (let key of arr) {
      console.log(key); 
      // 输出 "apple", "banana", "cherry"
    }

2. 区别二：遍历对象

for...in主要用于枚举对象的属性名。它会遍历对象的所有可枚举属性，包括它自身的属性以及继承自原型链的属性。
for...of不适用于普通对象的遍历，它只能遍历可迭代对象而设计的，例如Set,Map,String,Array等。尝试在非迭代对象上使用会报错。

    Object.prototype.gender = '男';
    let person = { name: "xx", age: 18 };
    // for ... in
    for (let key in person) {
      // console.log(key); // 输出 name,age,gender
      console.log(person[key]); // 输出 xx,18,男
    }

    // for ... of
    for (let key of person) {
      console.log(key); // 报错 Uncaught TypeError: object is not iterable
    }

3. 区别三：遍历顺序

for...in循环主要用于遍历对象的属性。这种遍历并不保证按照对象中属性的创建顺序进行，它的顺序实际上是由JavaScript引擎定义的，并可能因为浏览器的不同而有所差异。
for...of循环遵循迭代对象的顺序。

3. 区别四：兼容性

for...in是ECMAScript早期版本中就已经存在的，所以它在所有的JavaScript环境中都可以工作，包括一些很老的浏览器。
for...of是ES6引入的，依赖于其他一些ES6新特性，如迭代器和生成器，所以一些较旧的浏览器，for...of可能无法工作。

总结

可以根据需求选择使用for...in还是for...of，当遍历对象的属性时使用for...in。当遍历数组或者其他可迭代对象时可以使用for...of。