JavaScript의 계산된 속성 이름: 대괄호는 개체 속성을 어떻게 정의합니까?

계산된 속성 이름 공개: 대괄호 안에 무엇이 있습니까?

객체 리터럴이 최고로 군림하는 JavaScript 영역에서 호기심 많은 구문이 나타났습니다: 속성 이름을 대괄호로 묶었습니다. "계산된 속성 이름"으로 장식된 이 수수께끼 같은 표기법은 최근 ES6 사양의 페이지를 장식했습니다.

제공된 예에서 수수께끼처럼 소개된 dist 속성은 내부 개체에 대해 영향력을 가지며 해당 files 속성은 다음을 호스팅합니다. 독특한 구문 표본:

dist: {
    files: {
      [bpr + 'lib/Monster.min.js']: ['<%= concat.dist.dest %>']
    }
  }
}

이 비밀스러운 표현에 당황하여 수수께끼의 세계를 더 깊이 파헤칩니다.

계산된 속성 이름 이해하기

MDN이 명확하게 선언한 것처럼: "ECMAScript 2015부터 개체 이니셜라이저 구문은 계산된 속성 이름도 지원합니다. 대괄호 [] 안에 표현식을 넣으면 속성으로 계산됩니다. name."

본질적으로 이러한 대괄호는 평가된 표현식의 결과를 기반으로 속성 이름을 동적으로 생성할 수 있는 기능을 제공합니다. 이 기능은 이름을 정적으로 결정할 수 없는 개체 속성을 구성할 때 매우 유용합니다.

구문 설명

계산된 속성 이름의 구문은 간단합니다. 대괄호 안의 속성 이름입니다. 이 표현식은 단순한 변수 참조부터 복잡한 계산까지 다양합니다.

const propertyName = 'age';
const object = {
  [propertyName]: 25
};

이 예에서 속성 이름은 propertyName 변수의 값에 의해 동적으로 생성됩니다.

동적 강화 객체 구성

계산된 속성 이름을 사용하면 속성 이름이 런타임에 결정되는 동적 객체를 생성할 수 있습니다. 이러한 유연성은 외부 데이터 또는 사용자 입력을 기반으로 데이터 구조를 생성할 때 특히 유용합니다.

const data = {
  firstName: 'John',
  lastName: 'Doe',
  [`${firstName} ${lastName}`]: 'John Doe'
};

이 코드는 firstName 및 lastName 속성의 연결을 사용하여 속성을 동적으로 생성합니다. 결과 객체에는 "John Doe"라는 속성이 있으므로 전체 이름에 쉽게 액세스할 수 있습니다.

요약

ES6에 도입된 계산된 속성 이름, 평가된 표현식을 통해 동적 속성 이름 생성을 활성화하여 JavaScript의 객체 구성 기능을 향상시킵니다. 이러한 유연성은 정교하고 표현력이 풍부한 객체 기반 데이터 구조를 구성할 수 있는 다양한 가능성을 열어줍니다.

위 내용은 JavaScript의 계산된 속성 이름: 대괄호는 개체 속성을 어떻게 정의합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!