假设我有一个 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
...
在我们的函数中使其更加清晰