JS Object 遍歷詳解

一、基礎遍歷方法

JavaScript 中的 Object 是一種鍵值對數據結構，使用起來非常靈活。在編程過程中，我們經常需要遍歷 Object 以獲取其中的值或者進行操作。下面將介紹幾種基礎的遍歷方法。

1. for…in 循環

const person = {
  name: '張三',
  age: 18,
  gender: 'male'
};

for (const key in person) {
  console.log(person[key]);
}

上面代碼中，我們使用了 for…in 循環遍歷了 person 對象。在循環中，關鍵字 key 指代 person 對象中的鍵名，我們可以通過 person[key] 來獲取相應鍵值。

2. Object.keys()

const person = {
  name: '張三',
  age: 18,
  gender: 'male'
};

const keys = Object.keys(person);

console.log(keys); // ['name', 'age', 'gender']

上面代碼中，我們使用 Object.keys() 方法來獲取 person 對象中的所有鍵名，並將其存儲在 keys 變數中。

3. Object.values()

const person = {
  name: '張三',
  age: 18,
  gender: 'male'
};

const values = Object.values(person);

console.log(values); // ['張三', 18, 'male']

上面代碼中，我們使用 Object.values() 方法來獲取 person 對象中的所有鍵值，並將其存儲在 values 變數中。

4. Object.entries()

const person = {
  name: '張三',
  age: 18,
  gender: 'male'
};

const entries = Object.entries(person);

console.log(entries);
// [ ['name', '張三'], ['age', 18], ['gender', 'male'] ]

上面代碼中，我們使用 Object.entries() 方法來獲取 person 對象中的所有鍵值對，並將其存儲在 entries 變數中。

二、深度遍歷方法

有時候，我們需要遍歷的對象是多層嵌套的，需要使用深度遍歷的方式進行。下面介紹幾種深度遍歷的方法。

1. 遞歸法

const person = {
  name: '張三',
  age: 18,
  gender: 'male',
  father: {
    name: '張爸爸',
    age: 40,
    gender: 'male'
  }
};

function deepTraversal(obj) {
  for (const key in obj) {
    if (typeof obj[key] === 'object') {
      deepTraversal(obj[key]);
    } else {
      console.log(`${key}: ${obj[key]}`);
    }
  }
}

deepTraversal(person);

上面代碼中，我們使用遞歸法遍歷了深度嵌套的 person 對象。在 deepTraversal 函數中，我們首先判斷鍵值類型是否為 object，如果是，繼續遞歸遍歷，否則列印鍵名及其對應的鍵值。

2. 棧方法

function stackTraversal(obj) {
  const stack = [];
  stack.push(obj);
  
  while(stack.length !== 0) {
    const node = stack.pop();
    if (typeof node === 'object') {
      for (const key in node) {
        stack.push(node[key]);
      }
    } else {
      console.log(node);
    }
  }
}

stackTraversal(person);

上面代碼中，我們使用棧方法來遍歷深度嵌套的 person 對象。首先，我們將需要遍歷的對象推入棧中，然後不斷從棧中 pop 出元素。如果該元素是 object 類型，則將其可遍歷的子元素推入棧中，否則列印該元素。

三、常見應用場景

Object 遍歷在實際編程中非常常見，下面介紹幾個常見的應用場景。

1. 解構賦值

const person = {
  name: '張三',
  age: 18,
  gender: 'male'
};

const { name, age } = person;

console.log(name, age); // 張三 18

上面代碼中，我們使用解構賦值的方式從 person 對象中獲取 name 和 age 兩個鍵值，實現了快速獲取特定鍵值的功能。

2. 複製對象

const person = {
  name: '張三',
  age: 18,
  gender: 'male'
};

const newPerson = {};

for (const key in person) {
  newPerson[key] = person[key];
}

console.log(newPerson); // { "name": "張三", "age": 18, "gender": "male" }

上面代碼中，我們通過遍歷 person 對象並複製其中的鍵值對，得到了一個新的對象 newPerson，這可以用於實現對象的複製或者克隆。

3. 數據處理

const persons = [
  { id: 1, name: '張三', age: 18 },
  { id: 2, name: '李四', age: 20 },
  { id: 3, name: '王五', age: 22 }
];

const names = persons.map(person => person.name);

console.log(names); // ['張三', '李四', '王五']

上面代碼中，我們使用 map 方法從 persons 數組中提取出 name 屬性，得到了一個新數組 names，用於數據處理和轉換。