ES6遍歷對象的方法

一、for…in循環

let 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循環是一種簡單的遍歷對象屬性的方式，它可以遍歷對象的所有可枚舉屬性（包括繼承的屬性），並且以隨機順序進行遍歷。使用for…in循環的關鍵是要注意該循環遍歷的是屬性名而不是屬性值，因此需要通過對象[key]的方式來獲取屬性值。

不過需要注意的是，for…in循環並不總是能夠準確遍歷出對象的所有屬性，如果對象的原型鏈上一個屬性是不可枚舉的（通過Obejct.defineProperty定義為不可枚舉），那麼for…in循環遍歷的時候就不會出現此屬性。

二、Object.keys()

let obj = {a: 1, b: 2, c: 3};
let keys = Object.keys(obj);

console.log(keys); // 輸出 ['a', 'b', 'c']

Object.keys()方法接受一個對象作為參數，返回一個由該對象的所有可枚舉屬性的屬性名組成的數組，屬性名的順序與for…in循環遍歷的順序相同。

需要注意的是，Object.keys()只返回對象自身的屬性而不包括繼承的屬性，因此它比for…in循環更可靠。

三、Object.values()

let obj = {a: 1, b: 2, c: 3};
let values = Object.values(obj);

console.log(values); // 輸出 [1, 2, 3]

Object.values()方法接受一個對象作為參數，返回一個由該對象的所有可枚舉屬性的屬性值組成的數組，數組中屬性值的順序與Object.keys()返回的屬性名的順序相同。

需要注意的是，Object.values()只返回對象自身的屬性值而不包括繼承的屬性值，因此它比for…in循環更可靠。

四、Object.entries()

let obj = {a: 1, b: 2, c: 3};
let entries = Object.entries(obj);

console.log(entries); // 輸出 [['a', 1], ['b', 2], ['c', 3]]

Object.entries()方法接受一個對象作為參數，返回一個由該對象的所有可枚舉屬性的屬性名和屬性值組成的數組，數組中每個元素是一個由兩個元素組成的數組，第一個元素是屬性名，第二個元素是屬性值，數組中屬性名和屬性值的順序與for…in循環遍歷的順序相同。

需要注意的是，Object.entries()只返回對象自身的屬性名和屬性值而不包括繼承的屬性名和屬性值，因此它比for…in循環更可靠。

五、Symbol.iterator迭代器

let obj = {a: 1, b: 2, c: 3};
obj[Symbol.iterator] = function() {
  let keys = Object.keys(this);
  let index = 0;
  return {
    next: () => {
      if (index < keys.length) {
        return {value: this[keys[index++]], done: false};
      } else {
        return {done: true};
      }
    }
  };
};

for (let value of obj) {
  console.log(value); // 輸出 1 2 3
}

Symbol.iterator是ES6新引入的一種機制，可用於定製對象的迭代行為。對象只要部署了Symbol.iterator屬性，就可以通過for…of循環遍歷其屬性值。

對象的Symbol.iterator屬性是一個函數，執行該函數將返回一個迭代器對象，該迭代器對象必須包含一個next()方法，執行該方法將返回一個對象，該對象包含兩個屬性，value和done，value表示屬性值，done表示迭代是否結束。

上述代碼通過自定義Symbol.iterator屬性，實現了遍歷對象屬性值的功能。

六、Generator函數

let obj = {a: 1, b: 2, c: 3};
obj[Symbol.iterator] = function* () {
  let keys = Object.keys(this);
  for (let i = 0; i < keys.length; i++) {
    yield this[keys[i]];
  }
};

for (let value of obj) {
  console.log(value); // 輸出 1 2 3
}

Generator函數是ES6新引入的一種函數類型，可以用於定義迭代器。Generator函數的特點是能夠通過yield關鍵字，將函數的執行過程暫停，然後再次執行時可以繼續從暫停的位置繼續執行。

上述代碼通過定義一個Generator函數作為Symbol.iterator屬性的值，實現了遍歷對象屬性值的功能。

七、Proxy對象

let obj = {a: 1, b: 2, c: 3};
let proxiedObj = new Proxy(obj, {
  ownKeys: function(target) {
    return ['a', 'b', 'c'];
  },
  getOwnPropertyDescriptor: function(target, key) {
    return {value: target[key], writable: true, enumerable: true, configurable: true};
  }
});

for (let value of proxiedObj) {
  console.log(value); // 輸出 1 2 3
}

Proxy對象是ES6新引入的一種對象類型，可以用於攔截對象的操作。其中ownKeys和getOwnPropertyDescriptor兩個攔截器方法可以用於支持遍歷對象屬性值的功能。

ownKeys方法接受一個目標對象為參數，返回一個數組，該數組包含了目標對象的所有自身屬性名和Symbol類型的屬性名。在上述代碼中，ownKeys被攔截並且返回了一個包含所有自身屬性名的數組。

getOwnPropertyDescriptor方法接受一個目標對象和一個屬性名為參數，返回一個對象，該對象包含了指定屬性的屬性描述符。在上述代碼中，getOwnPropertyDescriptor被攔截並且返回了一個包含目標對象屬性值和屬性描述符的對象。

通過使用Proxy對象可以非常靈活地定製對象遍歷行為。