首页 > web前端 > js教程 > 正文

函数参数的解构

WBOY
发布: 2024-08-28 13:06:11
转载
433人浏览过

函数参数的解构

假设我在 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、高度和深度是我们函数内的默认属性,我们不需要来自我们的服务器或第三方的数据中的它们

通过这种方式,我们为未来的开发人员隐藏了将与我们的多维数据集常量交互的属性,只向他们展示我们从外部源需要的属性以及我们设置为默认值的属性,以便我们甚至可以编写更好的实践
常量 z = 0
...
在我们的函数中使其更加清晰

以上就是函数参数的解构的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
来源:dev.to网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号