es6遍歷對象屬性的方法有哪些

ES6遍歷對象屬性的方法有哪些

在JavaScript中，遍歷對象的屬性是一個常見的操作。ES6（ECMAScript 2015）引入了多種新的方法來遍歷對象的屬性，使得開發者能夠更加靈活和高效地處理對象。本文將介紹ES6中常用的幾種遍歷對象屬性的方法。

1. for...in 循環

for...in 是JavaScript中最傳統的遍歷對象屬性的方法。它可以遍歷對象的所有可枚舉屬性，包括繼承的屬性。

const obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
  console.log(key, obj[key]);
}

注意：for...in 會遍歷對象原型鏈上的屬性。如果你只想遍歷對象自身的屬性，可以使用 hasOwnProperty 方法進行過濾。

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}

2. Object.keys()

Object.keys() 方法返回一個由對象的自身可枚舉屬性組成的數組。你可以使用 forEach 或 for...of 循環來遍歷這些屬性。

const obj = { a: 1, b: 2, c: 3 };

Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});

3. Object.values()

Object.values() 方法返回一個由對象的自身可枚舉屬性值組成的數組。與 Object.keys() 類似，你可以使用 forEach 或 for...of 循環來遍歷這些值。

const obj = { a: 1, b: 2, c: 3 };

Object.values(obj).forEach(value => {
  console.log(value);
});

4. Object.entries()

Object.entries() 方法返回一個由對象的自身可枚舉屬性的鍵值對組成的數組。每個鍵值對都是一個包含兩個元素的數組，第一個元素是屬性名，第二個元素是屬性值。

const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj).forEach(([key, value]) => {
  console.log(key, value);
});

5. Reflect.ownKeys()

Reflect.ownKeys() 方法返回一個由對象的所有自身屬性（包括不可枚舉屬性和Symbol屬性）組成的數組。這個方法可以看作是 Object.getOwnPropertyNames() 和 Object.getOwnPropertySymbols() 的結合。

const obj = { a: 1, b: 2, [Symbol('c')]: 3 };

Reflect.ownKeys(obj).forEach(key => {
  console.log(key, obj[key]);
});

6. for...of 循環與 Object.keys() 結合

雖然 for...of 循環不能直接用于對象，但你可以結合 Object.keys() 或 Object.entries() 來遍歷對象的屬性。

const obj = { a: 1, b: 2, c: 3 };

for (let key of Object.keys(obj)) {
  console.log(key, obj[key]);
}

7. Object.getOwnPropertyNames()

Object.getOwnPropertyNames() 方法返回一個由對象的所有自身屬性（包括不可枚舉屬性）組成的數組。與 Object.keys() 不同，Object.getOwnPropertyNames() 會返回所有自身屬性，而不僅僅是可枚舉的屬性。

const obj = { a: 1, b: 2, c: 3 };

Object.getOwnPropertyNames(obj).forEach(key => {
  console.log(key, obj[key]);
});

8. Object.getOwnPropertySymbols()

Object.getOwnPropertySymbols() 方法返回一個由對象的所有自身Symbol屬性組成的數組。這個方法特別適用于處理Symbol類型的屬性。

const obj = { a: 1, b: 2, [Symbol('c')]: 3 };

Object.getOwnPropertySymbols(obj).forEach(symbol => {
  console.log(symbol, obj[symbol]);
});

總結

ES6提供了多種遍歷對象屬性的方法，每種方法都有其特定的用途和優勢。根據具體的需求，你可以選擇最適合的方法來遍歷對象的屬性。無論是傳統的 for...in 循環，還是現代的 Object.keys()、Object.values()、Object.entries() 等方法，ES6都為你提供了豐富的工具來處理對象屬性。