假設我有一個Three.js 項目，我需要一些幾何圖形，我將硬編碼一個物件數組，其中包含它們的x、y 和z 值以及它們的寬度、高度和深度值，但此陣列可能來自伺服器或第三方API =>

const geometriesRaw = [
    {
      color: 0x44aa88,
      x: 0,
      y: 1,
      z: 0,
      width: 1,
      height: 1,
      depth: 1
    },
    {
      color: 0x8844aa,
      x: -2,
      y: 1,
      z: 0,
      width: 1.5,
      height: 1.5,
      depth: 1.5
    }

  ];

然後我將使用陣列渲染它們。地圖函數 =>

  const cubes = geometriesRaw.map((cube)=>{
    
         
         
      
  }) 

只要看一眼，我們就可以意識到這段程式碼的冗長，每次都重複參數立方體。
另一個危險訊號是我們不清楚我們使用陣列中的哪些屬性，例如，z 在兩種情況下都是 0，並且在絕大多數情況下它可能為零。
對於我們的常規用例，我們不應該將此屬性暴露給我們的函數，深度屬性也可能經常發生這種情況。

因此，最好的選擇是解構來自物件陣列的屬性，如下所示 =>

 const cubes = geometriesRaw.map(({x,y, width, color})=>{
    
         
         
      
  }) 

現在我們只用 x、y、寬度、顏色。這樣我們就暗示 z、高度和深度是我們函數內的預設屬性，我們不需要來自我們的伺服器或第三方的資料中的它們

透過這種方式，我們為未來的開發人員隱藏了與我們的立方體常量交互的屬性，只是向他們展示了我們從外部源需要的屬性以及我們設置為默認值的屬性，以便我們甚至可以編寫更好的實踐
常數 z = 0
...
在我們的函數中使其更加清晰