函数参数的解构

假设我有一个 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中文网其他相关文章！