>웹 프론트엔드 >JS 튜토리얼 >JavaScript 객체에 값을 할당하고 검색하는 방법

JavaScript 객체에 값을 할당하고 검색하는 방법

Susan Sarandon
Susan Sarandon원래의
2024-12-04 16:05:26173검색

Methods to assign and retrieve values in a JavaScript object

소개

키와 값을 개체에 할당하는 방법에는 네 가지가 있습니다.

  1. 점 표기법
  2. 대괄호 표기
  3. Object.defineProperty() 메소드
  4. Object.defineProperties() 메서드

도트 표기

점 표기법은 JavaScript에서 개체 속성에 액세스하기 위해 간단하고 일반적으로 사용되는 방법입니다. 점 표기법을 사용하여 객체에 속성을 만들고 할당할 수 있습니다. 이 접근 방식을 사용하면 객체가 생성된 후 속성을 동적으로 정의할 수 있습니다.

let objectName = {};  // "object literal" syntax
objectName.someKey = someValue; // set property and value

const value = objectName.someKey; // retrive value

찬성

가독성:

읽고 이해하기 쉽습니다.

: person.name은 person['name']보다 해석하기 더 쉽습니다.

사용 편의성:

간단한 구문으로 빠르게 작성할 수 있습니다.

정적 속성 이름:

유효한 식별자(문자, 숫자, 밑줄 및 $)를 사용하여 속성에 액세스하는 데 적합합니다.

단점

유효한 식별자로 제한됩니다.

속성 이름에 특수 문자, 공백이 있거나 동적이면 실패합니다.

: person.first-name은 오류를 발생시킵니다. 대신 person["first-name"]을 사용하세요.

변수를 사용할 수 없습니다:

: 속성 이름이 변수에 저장된 경우 점 표기법으로 사용할 수 없습니다.

대괄호 표기

대괄호 표기법을 사용하면 문자열이나 변수를 사용하여 개체 속성에 동적으로 액세스하거나 조작할 수 있습니다. 대괄호는 모든 속성 이름이나 변수를 사용할 수 있으므로 점 표기법보다 더 유연합니다. 하지만 쓰기가 조금 더 어렵습니다.

장점

동적 속성 액세스:

속성 이름이 변수나 표현식이 되도록 허용합니다.

: propName이 변수인 경우 obj[propName]은 유연합니다.

특수 문자 및 공백:

특수 문자, 공백 또는 예약된 키워드가 포함된 속성 이름에 작동합니다.

: obj["first-name"] 또는 obj["class"].

유연한 반복:

객체의 속성을 반복할 때 유용합니다.

단점

가독성이 떨어짐:

점 표기법에 비해 읽기가 더 어렵습니다. 특히 중첩된 속성의 경우 더욱 그렇습니다.

오타가 발생하기 쉬운 경우:

속성 이름의 실수는 개발 중에 발견되지 않을 수 있습니다(예: obj["naem"]).

말 수가 많은:

문자열 키에 더 많은 입력과 따옴표 사용이 필요합니다.

Object.defineProperty() 메서드

Object.defineProperty() 메서드는 객체에 새 속성을 정의하거나 기존 속성을 업데이트한 후 객체를 반환합니다.

let objectName = {};  // "object literal" syntax
objectName.someKey = someValue; // set property and value

const value = objectName.someKey; // retrive value

Object.defineProperties() 메서드

Object.defineProperties() 메서드는 객체에서 직접 새 속성을 정의하거나 기존 속성을 수정하여 객체를 반환합니다.

const user = {};

Object.defineProperty(user,  'firstName', {
  value: 'John',
  writable: true, // `false` is default
});

console.log('First name', user.firstName);

위 내용은 JavaScript 객체에 값을 할당하고 검색하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.