首頁  >  文章  >  web前端  >  如何遍歷巢狀 JavaScript 物件:遞迴與非遞迴?

如何遍歷巢狀 JavaScript 物件:遞迴與非遞迴?

Susan Sarandon
Susan Sarandon原創
2024-11-02 05:14:02828瀏覽

How to Traverse Nested JavaScript Objects: Recursive vs. Non-Recursive?

巢狀JavaScript 物件導覽:綜合指南

迭代複雜的巢狀JavaScript 物件可能會帶來挑戰,特別是當您需要檢索時基於提供的字串標識符的特定嵌套物件。在本文中,我們將指導您透過一種全面的方法來有效地遍歷巢狀物件。

為了說明這個挑戰,讓我們考慮以下嵌套物件結構:

var cars = {
  label: 'Autos',
  subs: [
    {
      label: 'SUVs',
      subs: []
    },
    {
      label: 'Trucks',
      subs: [
        {
          label: '2 Wheel Drive',
          subs: []
        },
        {
          label: '4 Wheel Drive',
          subs: [
            {
              label: 'Ford',
              subs: []
            },
            {
              label: 'Chevrolet',
              subs: []
            }
          ]
        }
      ]
    },
    {
      label: 'Sedan',
      subs: []
    }
  ]
};

非遞歸方法

(2023年引入)

對於非遞歸方法,我們可以利用堆疊來遍歷物件:

const iterate = (obj) => {
  const stack = [obj];
  while (stack.length > 0) {
    const currentObj = stack.pop();
    Object.keys(currentObj).forEach(key => {
      console.log(`key: ${key}, value: ${currentObj[key]}`);
      if (typeof currentObj[key] === 'object' && currentObj[key] !== null) {
        stack.push(currentObj[key]);
      }
    });
  }
};

遞歸方法

對於提供深度迭代的遞歸方法

const iterate = (obj) => {
  Object.keys(obj).forEach(key => {
    console.log(`key: ${key}, value: ${obj[key]}`);

    if (typeof obj[key] === 'object' && obj[key] !== null) {
      iterate(obj[key]);
    }
  });
};

對於提供深度迭代的遞歸方法,我們可以利用Object.keys():

這兩種方法都提供了遍歷嵌套JavaScript 的有效方法物件。選擇非遞歸還是遞歸方法取決於您的特定要求和偏好。

以上是如何遍歷巢狀 JavaScript 物件:遞迴與非遞迴?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn