ES6에서 구조 분해를 사용하여 기존 객체 속성을 어떻게 수정할 수 있습니까?

DDD
풀어 주다: 2024-10-30 21:53:02
원래의
639명이 탐색했습니다.

How Can You Modify Existing Object Properties Using Destructuring in ES6?

확장 객체 구조 분해

ES6에서 구조 분해는 배열이나 객체의 값을 개별 변수로 풀어낼 수 있는 구문입니다. 구조 분해는 매우 편리하지만 기존 객체에 값을 할당하려는 경우 제한될 수 있습니다.

다음 시나리오를 고려하세요.

var foo = {
  x: "bar",
  y: "baz"
}
로그인 후 복사
var oof = {}
로그인 후 복사

구조 분해를 사용하여 foo에서 oof로 x 및 y 속성을 변환합니다. 간단한 시도는 다음과 같습니다.

oof{x,y} = foo
로그인 후 복사

그러나 이 방법은 작동하지 않습니다. 그렇다면 구조 분해를 사용하여 기존 객체 속성을 어떻게 수정할 수 있습니까?

가능한 솔루션

가장 세련된 접근 방식은 아니지만 구조 분해와 할당을 조합하여 사용할 수 있습니다. 원하는 결과를 얻습니다.

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

foo에서 x 및 y 속성을 읽어 oof의 해당 속성에 할당합니다.

대체 접근 방식

객체 속성 업데이트에 대한 대체 접근 방식은 다음과 같습니다.

oof.x = foo.x;
oof.y = foo.y;
로그인 후 복사

또는

['x', 'y'].forEach(prop => oof[prop] = foo[prop]);
로그인 후 복사

이러한 접근 방식은 기본 설정에 따라 더 명확하고 읽기 쉬울 수 있습니다.

위 내용은 ES6에서 구조 분해를 사용하여 기존 객체 속성을 어떻게 수정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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