首页 > 其他分享 >函数参数的解构

函数参数的解构

时间:2024-09-22 08:51:03浏览次数:10  
标签:const 解构 函数参数 数组 我们 属性

假设我在 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)=&gt;{ <mesh position="{[cube.x," cube.y cube.z><boxgeometry args="{[cube.width," cube.height cube.depth></boxgeometry><meshphongmaterial color="{cube.color}"></meshphongmaterial></mesh> }) 登录后复制一眼就能看出这段代码的冗长,每次都重复参数立方体。另一个危险信号是我们不清楚我们使用数组中的哪些属性,例如,z 在两种情况下都是 0,并且在绝大多数情况下它可能为零。对于我们的常规用例,我们不应该将此属性暴露给我们的函数,深度属性也可能经常发生这种情况。因此,最好的选择是解构来自对象数组的属性,如下所示 => const cubes = geometriesRaw.map(({x,y, width, color})=&gt;{ <mesh position="{[x," y><boxgeometry args="{[width,"></boxgeometry><meshphongmaterial color="{color}"></meshphongmaterial></mesh> }) 登录后复制现在我们只使用 x,y,宽度,颜色。这样我们就暗示 z、高度和深度是我们函数内的默认属性,我们不需要来自我们的服务器或第三方的数据中的它们通过这种方式,我们为未来的开发人员隐藏了将与我们的多维数据集常量交互的属性,只向他们展示我们从外部源需要的属性以及我们设置为默认值的属性,以便我们甚至可以编写更好的实践常量 z = 0...在我们的函数中使其更加清晰 以上就是函数参数的解构的详细内容,更多请关注我的其它相关文章!

标签:const,解构,函数参数,数组,我们,属性
From: https://www.cnblogs.com/aow054/p/18424852

相关文章

  • Vue3.5中解构props,让父子组件通信更加丝滑
    前言在Vue3.5版本中响应式Props解构终于正式转正了,这个功能之前一直是试验性的。这篇文章来带你搞清楚,一个String类型的props经过解构后明明应该是一个常量了,为什么还没丢失响应式呢?本文中使用的Vue版本为欧阳写文章时的最新版Vue3.5.5关注公众号:【前端欧阳】,给自己一个进阶vu......
  • Vue3.5+ 响应式 Props 解构
    你好同学,我是沐爸,欢迎点赞、收藏、评论和关注。在Vue3.5+中,响应式Props解构已经稳定并默认启用。这意味着在<scriptsetup>中从defineProps调用解构的变量现在是响应式的。这一改进大大简化了声明带有默认值的props的方式,并使得在子组件中直接使用解构后的pro......
  • Python 从入门到实战19(函数参数)
            我们的目标是:通过这一套资料学习下来,通过熟练掌握python基础,然后结合经典实例、实践相结合,使我们完全掌握python,并做到独立完成项目开发的能力。上篇文章我们讨论了函数的基本介绍。今天我们继续学习一下函数参数。1、形参和实参我们上篇已讨论过,为了对比......
  • 关于JS解构数据结构的表现形式
    对数组或对象类数据结构,尤其是复杂的JOSN数据结构,要从中取出想要的个别数据,往往会采用遍历方法进行,即麻烦又增加了运行时间。从ES6开始,JS增加了解构进行简化,本质上是打散复杂的数据结构,将其折分为更小的部分(复制出的小结构),从而使用数据更为方便快捷。一、对象解构1.单层对......
  • JS中的 解构、可扩展运算符(...)
    一、解构([x,x,x]=[1,2,3])解构,英文名叫Destructuring。核心就是[A,B,C]=[1,2,3]这种形式。其核心思想就是把数组/对象的每个元素解构出来。虽然这话说的很抽象,但举个例子你就明白了。1.1数组解构const[a,b,c]=[1,2,3]console.log(a)//1console.log(b)/......
  • 【useTranslation】兼容数组解构和对象解构的三种实现方式
    useTranslation使用:数组解构:const[t,i18n]=useTranslation();对象解构:const{t,i18n}=useTranslation();useTranslation兼容数组解构和对象解构的三种实现方式:1.返回带属性的数组在这种实现方式中,返回一个数组,并为该数组添加对象属性。这样可以同时使用数组......
  • 深入理解C++中的const:函数参数与成员函数的最佳实践
    const关键字在C++中有多种用途,它的主要作用是定义不可修改的变量或数据,使得代码更加安全和清晰。具体使用场景包括:定义常量变量:使用const定义的变量在初始化后不能被修改。这样可以防止代码中对该变量的意外修改。constintmax_value=100;max_value=200;//错误:尝试......
  • 探索C语言中数组作为函数参数的奥秘
    在C语言的世界里,数组是一种基础且强大的数据结构,它允许我们存储相同类型的数据集合。然而,在处理函数和数组的关系时,尤其是在数组作为函数参数传递时,初学者往往会感到困惑。今天,我们就来深入探讨这一话题,通过具体的代码示例来揭开其神秘面纱。数组作为函数参数的两种形式在C语......
  • es6 解构用法:对 object 和 array 解构
    参考文档:https://book.douban.com/subject/26864806/(英文版+中文版) 解构目的:为了使代码更简单、简洁解构对象:object和array【注意】针对对象和数组,使用语法不同。一定要注意同样的符号出现在=左边和右边是不同的含义!!解构时必须初始化(let,var,const),否则会报语法错误......
  • ES6解构赋值详解;全面掌握:JavaScript解构赋值的终极指南
    目录全面掌握:JavaScript解构赋值的终极指南一、数组解构赋值1、基本用法2、跳过元素3、剩余元素4、默认值二、对象解构赋值1、基本用法2、变量重命名3、默认值4、嵌套解构三、复杂的嵌套结构解构四、函数参数解构赋值1、对象解构作为函数参数2、带有默认值的函......