深入探究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循環，提高代碼的效率和可維護性。