如何將JavaScript物件扁平化為單層物件？

在JavaScript中，可以使用花括號{}建立物件。這被稱為物件字面量。物件字面量可以包含屬性和方法。

什麼是扁平化？

扁平化是將物件簡化為單層物件的過程。換句話說，物件的所有屬性和方法都包含在一個單層物件中。

如何扁平化物件？

有多種方法可以扁平化物件。

使用for...in迴圈

for...in迴圈可以用於迭代物件的屬性。對於每個屬性，我們可以將其新增到新物件中。

以下是使用for...in迴圈扁平化物件的程式碼片段。

<!doctype html>
<html>
<head>
   <title>Example - flatten an object</title>
</head>
<body>
   <div id="result1">Original Object: </div>
   <div id="result2">Flatten Object: </div>
   <script>
      var obj = {
         "a": 1,
         "b": 2,
         "c": {
            "d": 3,
            "e": 4
         }
      };
      var newObj = {};
      for (var key in obj) {
         if (typeof obj[key] === "object") {
            for (var subKey in obj[key]) {
               newObj[subKey] = obj[key][subKey];
            }
         } else {
            newObj[key] = obj[key];
         }
      }
      document.getElementById("result1").innerHTML += JSON.stringify(obj)
      document.getElementById("result2").innerHTML += JSON.stringify(newObj)
      console.log(newObj);

   </script>
</body>
</html>

在上面的程式碼中，我們聲明瞭一個名為obj的物件字面量。然後，我們聲明瞭一個名為newObj的空物件字面量。我們使用for...in迴圈迭代obj的屬性。對於每個屬性，我們檢查屬性值是否為物件。如果屬性值是物件，那麼我們將再次使用for...in迴圈迭代屬性值的子屬性。

對於每個子屬性，我們都將其新增到newObj物件中，子屬性名稱作為鍵。如果屬性值不是物件，則我們將屬性新增到newObj物件中，屬性名稱作為鍵。最後，我們將newObj記錄到控制檯。

扁平化的優點

扁平化物件有很多優點，其中一些包括：

易於訪問屬性

當物件被扁平化後，所有屬性和方法都包含在一個物件中。這使得訪問屬性和方法變得容易。

易於操作資料

當物件被扁平化後，資料包含在一個物件中。這使得操作資料變得容易。

易於序列化

當物件被扁平化後，它可以很容易地被序列化。序列化是將物件轉換為可以儲存或傳輸的格式的過程。

扁平化的缺點

扁平化物件也有一些缺點，其中一些包括：

資料冗餘

當物件被扁平化時，存在資料冗餘的可能性。資料冗餘是指相同的資料儲存在多個地方。

難以維護

當物件被扁平化後，可能難以維護。這是因為所有屬性和方法都包含在一個物件中。

結論

總而言之，扁平化是將物件簡化為單層物件的過程。有多種方法可以扁平化物件。扁平化物件的一些好處包括易於訪問屬性、易於操作資料和易於序列化。扁平化物件也有一些缺點，例如資料冗餘和難以維護。

更新於：2022年9月14日

3K+ 瀏覽量

啟動你的職業生涯

透過完成課程獲得認證

開始學習
廣告