関数パラメータの分割

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>
  }) 

一目見ただけで、引数キューブを毎回繰り返すこのコードの冗長さがわかります。
もう 1 つの危険信号は、配列からどのプロパティを使用しているかが明確でないことです。たとえば、z はどちらの場合も 0 であり、おそらく大部分の場合は 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 中国語 Web サイトの他の関連記事を参照してください。