함수 매개변수의 구조분해-JS 튜토리얼-php.cn

함수 매개변수의 구조분해

WBOY

풀어 주다： 2024-08-29 10:36:02

원래의

705명이 탐색했습니다.

Destructuring in function parameters

3.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이고 대부분의 경우 아마도 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, 높이 및 깊이가 함수 내부의 기본 속성이며 서버나 제3자에서 오는 데이터에서 해당 속성이 필요하지 않음을 암시합니다

이러한 방식으로 우리는 큐브의 상수와 상호 작용할 향후 개발자를 위해 속성을 숨기고, 외부 소스에서 필요한 속성과 더 나은 연습을 위해 기본값으로 설정하는 속성을 표시할 뿐입니다.
const z = 0
...
함수 내부를 더욱 명확하게 만들기 위해

위 내용은 함수 매개변수의 구조분해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!