函數參數的解構

假設我有一個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)=>{
    <mesh position={[cube.x, cube.y, cube.z]}>
        <boxGeometry args={[cube.width, cube.height, cube.depth]} /> 
        <meshPhongMaterial color={cube.color} /> 
      </mesh>
  }) 

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

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

 const cubes = geometriesRaw.map(({x,y, width, color})=>{
    <mesh position={[x, y, 0]}>
        <boxGeometry args={[width, 1, 1]} /> 
        <meshPhongMaterial color={color} /> 
      </mesh>
  }) 

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

透過這種方式，我們為未來的開發人員隱藏了與我們的多維資料集常數交互的屬性，只是向他們展示了我們從外部來源需要的屬性以及我們設定為預設值的屬性，以便我們甚至可以寫更好的實作
const z = 0
...
在我們的函數中使其更加清晰

以上是函數參數的解構的詳細內容。更多資訊請關注PHP中文網其他相關文章！