JS對象遍歷的詳細闡述

一、Object.keys()

Object.keys()方法可以獲取對象的所有鍵（屬性名），返回一個由鍵名組成的數組。可以使用for循環或Array.prototype.forEach()方法遍歷此數組，然後通過鍵名獲取對象的值。

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

    const keysArray = Object.keys(obj);

    for(let i = 0; i < keysArray.length; i++){
      const key = keysArray[i];
      const value = obj[key];
      console.log(key, value);
    }
  

或者使用Array.prototype.forEach()方法

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

    const keysArray = Object.keys(obj);

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

二、for…in循環

for…in循環可以遍歷對象的所有可枚舉屬性，包括繼承而來的屬性，但是不包括Symbol類型的屬性和不可枚舉屬性。不建議使用for…in循環遍曆數組，因為數組也可以看做是一個對象，它的索引會被當做屬性名。

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

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

三、使用Reflect.ownKeys()

Reflect.ownKeys()方法返回一個數組，包含對象自身所有屬性名，不管屬性名是Symbol或者字符串。

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

    const keysArray = Reflect.ownKeys(obj);

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

四、使用Object.entries()

Object.entries()方法返回一個鍵值對數組，包含對象自身所有可枚舉屬性（不包括繼承而來的屬性），其中每個鍵值對的鍵為屬性名，值為屬性值。

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

    const entriesArray = Object.entries(obj);

    entriesArray.forEach((entry) => {
      const key = entry[0];
      const value = entry[1];
      console.log(key, value);
    });
  

五、使用Object.getOwnPropertyNames()

Object.getOwnPropertyNames()方法返回一個數組，包含對象自身所有屬性名，包括不可枚舉屬性。

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

    const keysArray = Object.getOwnPropertyNames(obj);

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