快捷導(dǎo)航

JavaScript遍歷JSON所有Key的常用方法總結(jié)

更新時間：2026年05月14日 08:24:35 作者：detayun

這篇文章主要為大家詳細(xì)介紹了JavaScript遍歷JSON所有Key的四種常用方法,并展示了遞歸遍歷嵌套JSON的技巧和各方法的特點,有需要的小伙伴可以了解下

for…in 循環(huán)（最常用）

const json = {
  name: "張三",
  age: 25,
  city: "北京"
};

for (let key in json) {
  console.log(key);           // name, age, city
  console.log(json[key]);     // 張三, 25, 北京
}

Object.keys()（推薦 ?）

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

// 或
Object.keys(json).map(key => {
  console.log(key);
});

Object.entries()（同時獲取 key 和 value）

for (let [key, value] of Object.entries(json)) {
  console.log(`${key}: ${value}`);
}

Object.getOwnPropertyNames()（包括不可枚舉屬性）

Object.getOwnPropertyNames(json).forEach(key => {
  console.log(key);
});

遞歸遍歷嵌套 JSON

function traverseKeys(obj, prefix = '') {
  for (let key in obj) {
    const fullKey = prefix ? `${prefix}.${key}` : key;
    console.log(fullKey);
    
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      traverseKeys(obj[key], fullKey);  // 遞歸
    }
  }
}

const nestedJson = {
  user: {
    name: "張三",
    address: {
      city: "北京",
      street: "長安街"
    }
  }
};

traverseKeys(nestedJson);
// 輸出: user
//       user.name
//       user.address
//       user.address.city
//       user.address.street

方法對比

方法	遍歷原型鏈	包含 Symbol	推薦場景
`for...in`	?	?	簡單遍歷
`Object.keys()`	?	?	日常推薦
`Object.entries()`	?	?	需要 key+value
`getOwnPropertyNames()`	?	?	完整屬性

推薦使用 Object.keys() 或 Object.entries()，更安全且語義清晰！

方法補充

在 JavaScript 中，遍歷 JSON（即 JavaScript 對象）的所有 Key 有多種常用方法。下面按照推薦程度和使用場景介紹。

1. Object.keys() – 最常用

返回對象自身可枚舉屬性的 key 數(shù)組，不含原型鏈上的屬性。

const obj = { name: 'Alice', age: 25, city: 'Beijing' };
Object.keys(obj).forEach(key =&gt; {
  console.log(key, obj[key]);
});
// 輸出: name Alice, age 25, city Beijing

2. for...in – 遍歷所有可枚舉屬性（含原型鏈）

for (let key in obj) {
  if (obj.hasOwnProperty(key)) { // 過濾掉原型鏈上的屬性
    console.log(key, obj[key]);
  }
}

如果不加 hasOwnProperty 判斷，會遍歷到繼承的屬性（如 toString），通常需要避免。

3. Object.entries() – 同時獲取鍵和值

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

4. Object.getOwnPropertyNames() – 包含不可枚舉屬性

const obj = Object.create({}, {
  visible: { value: 1, enumerable: true },
  hidden:  { value: 2, enumerable: false }
});
Object.getOwnPropertyNames(obj).forEach(key =&gt; console.log(key));
// 輸出: visible, hidden （包含不可枚舉的 hidden）

5. Reflect.ownKeys() – 包含 Symbol 類型鍵

const sym = Symbol('id');
const obj = { [sym]: 123, name: 'test' };
Reflect.ownKeys(obj).forEach(key =&gt; console.log(key, obj[key]));
// 輸出: name test, Symbol(id) 123

6. 遍歷嵌套 JSON 的所有 Key（遞歸）

如果 JSON 內(nèi)部還嵌套了對象或數(shù)組，需要遞歸才能獲取所有層級的鍵。

function getAllKeys(obj, prefix = '') {
  let keys = [];
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      const fullKey = prefix ? `${prefix}.${key}` : key;
      keys.push(fullKey);
      const val = obj[key];
      if (val &amp;&amp; typeof val === 'object') {
        keys = keys.concat(getAllKeys(val, fullKey));
      }
    }
  }
  return keys;
}

const json = {
  user: { name: 'John', address: { city: 'NYC', zip: 10001 } },
  active: true
};
console.log(getAllKeys(json));
// 輸出: ['user', 'user.name', 'user.address', 'user.address.city', 'user.address.zip', 'active']