> 웹 프론트엔드 > JS 튜토리얼 > JavaScript ES6에서 기존 객체를 분해할 수 있나요?

JavaScript ES6에서 기존 객체를 분해할 수 있나요?

Barbara Streisand
풀어 주다: 2024-10-28 15:03:30
원래의
979명이 탐색했습니다.

Can You Destructure Onto an Existing Object in JavaScript ES6?

JavaScript ES6에서 기존 객체를 분해할 수 있나요?

구조 분해는 ES6에 도입된 편리한 기능으로 데이터를 편리하게 추출할 수 있습니다. 객체와 배열에서. 그러나 일반적인 질문이 생깁니다. 기존 객체로 구조 분해가 가능한가요?

다음 시나리오를 고려해보세요. foo와 oof라는 두 개의 객체가 있습니다. x 및 y 값을 foo에서 oof로 전송하려고 합니다. 구조 분해가 이 작업에 이상적인 도구인 것처럼 보이지만 ES6 구조 분해 구문을 사용하여 이를 직접 달성할 수 있는 방법이 있는지 궁금할 수 있습니다.

직접 전송 시도:

직관적으로 oof{x,y} = foo와 같은 구문을 사용한다고 생각할 수도 있지만 안타깝게도 이는 작동하지 않습니다. 대신 JavaScript는 대입 연산자의 왼쪽에 새 변수가 선언될 것으로 예상합니다.

피하는 해결책:

이 제한을 우회하려면 다음을 수행할 수 있습니다. 약간 독특하지만 효과적인 솔루션을 사용합니다.

({x: oof.x, y: oof.y} = foo);
로그인 후 복사

이 줄은 foo에서 x 및 y 값을 읽고 이를 oof의 해당 위치에 할당합니다. 이 접근 방식은 가장 우아하지는 않지만 원하는 목표를 달성합니다.

대체 옵션:

보다 전통적인 접근 방식의 경우 다음 대안을 고려하세요.

  • 명시적 할당:
oof.x = foo.x;
oof.y = foo.y;
로그인 후 복사
  • forEach 사용:
['x', 'y'].forEach(prop => oof[prop] = foo[prop]);
로그인 후 복사

이러한 방법은 아마도 더 간단하고 가독성을 유지합니다.

요약:

ES6 구조 분해 구문에서는 기존 객체에 대한 분해가 직접 지원되지 않습니다. 그러나 주어진 기술을 사용하여 원하는 결과를 얻을 수도 있고 명확성이 우선인 경우 전통적인 할당 접근 방식을 선택할 수도 있습니다. ({x: oof.x, y: oof.y} = foo);, oof.x = foo.x; oof.y = foo.y; 또는 다른 방법을 선택하는 것은 선호도와 상황에 따라 다릅니다.

위 내용은 JavaScript ES6에서 기존 객체를 분해할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿