Déstructuration dans les paramètres de fonction

Disons que j'ai un projet dans three.js et que j'ai besoin de quelques géométries, je vais coder en dur un tableau d'objets qui contiendra leurs valeurs x, y et z ainsi que leurs valeurs de largeur, de hauteur et de profondeur, mais ce tableau pourrait provenir du serveur ou d'API tierces =>

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
    }

  ];

Ensuite, je les rendrai en utilisant le tableau. fonction de carte =>

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

En un simple coup d'œil, nous pouvons nous rendre compte de la verbosité de ce code, en répétant l'argument cube à chaque fois.
Un autre signal d'alarme est le manque de clarté sur les propriétés que nous utilisons du tableau, par exemple, z vaut 0 dans les deux cas et il sera probablement zéro dans la grande majorité des cas.
Pour notre cas d'utilisation habituel, nous ne devrions pas exposer cette propriété à notre fonction, cela pourrait également se produire fréquemment avec la propriété de profondeur.

Pour cette raison, la meilleure option sera de déstructurer les propriétés provenant du tableau d'objets comme suit =>

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

Maintenant, nous utilisons simplement x, y, largeur, couleur. De cette façon, nous impliquons que z, la hauteur et la profondeur sont des propriétés par défaut dans notre fonction et que nous n'en avons pas besoin à partir des données provenant de notre serveur ou d'un tiers

De cette façon, nous masquons les propriétés pour les futurs développeurs qui interagiront avec la constante de nos cubes, en leur montrant simplement celles dont nous avons besoin provenant d'une source externe et celles que nous définissons par défaut pour une meilleure pratique que nous pouvons même écrire
const z = 0
...
à l'intérieur de notre fonction pour la rendre encore plus claire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!