深入探究ES6 for...in

一、基础用法

ES6中的for...in循环与ES5中的for...in有所区别。在ES5中，使用for...in循环来迭代对象的属性，在迭代时，可以遍历对象的自有属性和继承属性。在ES6中，使用for...in循环遍历对象的属性时，只遍历对象的自有属性，不会遍历继承属性。

    const obj = {a: 1, b: 2, c: 3};
    for (let key in obj) {
      console.log(key); // 'a' 'b' 'c'
      console.log(obj[key]); // 1 2 3
    }

在上面的例子中，使用for...in循环遍历了对象obj中的属性，并打印出了属性名和属性值。需要注意的是，在循环中使用let声明变量key避免了全局变量的问题。

二、迭代顺序

在ES6中，对象中的属性是有序的，按照从添加到对象中的顺序排序。使用for...in循环会按照这个顺序迭代对象的属性。但是需要注意的是，如果对象的key是字符串，那么它们的遍历顺序是不确定的。

    const obj = {a: 1, b: 2, c: 3};
    console.log(Object.getOwnPropertyNames(obj)); // ['a', 'b', 'c']
    
    const arr = ['a', 'b', 'c'];
    for (let key in arr) {
      console.log(key); // '0' '1' '2'
      console.log(arr[key]); // 'a' 'b' 'c'
    }

在上面的例子中，第一个例子打印了对象的属性名数组，按照添加的顺序打印了a、b和c。第二个例子循环遍历了一个数组，输出了数组的下标和对应的元素。

三、遍历Map和Set

在ES6中，Set和Map是常用的数据结构。使用for...in循环可以迭代它们的值，其遍历顺序与插入顺序相同。

    const set = new Set(['a', 'b', 'c']);
    for (let val of set) {
      console.log(val); // 'a' 'b' 'c'
    }
    
    const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
    for (let key of map.keys()) {
      console.log(key); // 'a' 'b' 'c'
    }
    
    for (let val of map.values()) {
      console.log(val); // 1 2 3
    }
    
    for (let entry of map.entries()) {
      console.log(entry); // ['a', 1] ['b', 2] ['c', 3]
      console.log(entry[0]); // 'a' 'b' 'c'
      console.log(entry[1]); // 1 2 3
    }

在上面的例子中，第一个循环遍历了一个Set对象，输出了Set中的元素。第二个循环遍历了一个Map对象的key，第三个循环遍历了一个Map对象的value，而第四个循环遍历了一个Map对象的每一项entry，然后输出了entry的key和value。

四、使用Symbol.iterator方法

可以在自定义对象上使用Symbol.iterator方法来使其能够被for...of循环遍历。

    const iterableObject = {
        values: [1, 2, 3],
        [Symbol.iterator]() {
            let index = -1;
            return {
                next: () => ({ value: this.values[++index], done: !(index in this.values) })
            };
        }
    };
    
    for (let val of iterableObject) {
      console.log(val); // 1 2 3
    }

在上面的例子中，自定义对象iterableObject中定义了一个values数组和一个Symbol.iterator方法。在Symbol.iterator方法中返回一个包含next()方法的迭代器对象，每次调用next()函数遍历values数组中的值。

五、结语

通过本篇文章，我们深入探究了ES6中for...in循环的使用方法和注意事项，包括基础用法、迭代顺序、遍历Set和Map以及使用Symbol.iterator方法。在实际应用中，我们可以根据具体场景灵活使用for...in循环，提高代码的效率和可维护性。