> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 개체에 키가 있는지 확인하는 방법

JavaScript 개체에 키가 있는지 확인하는 방법

DDD
풀어 주다: 2024-11-10 05:22:03
원래의
280명이 탐색했습니다.

How to Check if a Key Exists in a JavaScript Object

JavaScript에서 객체는 가장 자주 사용되는 데이터 구조 중 하나입니다. 객체는 키-값 쌍의 형태로 데이터 컬렉션을 저장하며 객체에 특정 키가 존재하는지 여부를 아는 것이 일반적인 요구 사항입니다. 다행스럽게도 에서는 객체에 키가 있는지 확인하는 다양한 요구 사항과 시나리오에 적합한 다양한 방법을 제공합니다.
이 기사에서는 객체에 키가 있는지 확인하는 여러 가지 방법을 살펴보고 차이점, 사용 사례 및 잠재적인 함정을 강조하겠습니다.


  1. in 연산자 사용 in 연산자는 프로토타입 체인을 통해 상속될 수 있는 속성을 포함하여 속성(또는 키)이 객체에 존재하는지 확인하는 간단하고 효율적인 방법입니다. 통사론: 자바스크립트 코드 복사 객체의 '키' 예: 자바스크립트 코드 복사 const person = { 이름: 'John', 나이: 30 };

if ('이름' 직접) {
console.log('"name" 키가 존재합니다.');
} 그 밖의 {
console.log(''name' 키가 존재하지 않습니다.');
}

if ('주소' 직접) {
console.log(''주소' 키가 존재합니다.');
} 그 밖의 {
console.log(''주소' 키가 존재하지 않습니다.');
}
이 예에서 'name' in person은 name이 객체의 속성이기 때문에 true를 반환합니다. 하지만 직접 '주소'는 객체에 주소 키가 존재하지 않기 때문에 false를 반환합니다.
사용 사례:
직접 속성인지 프로토타입에서 상속되었는지 여부에 관계없이 객체에 속성이 존재하는지 확인하려면 in 연산자를 사용하세요.


  1. hasOwnProperty() 메서드 사용 in 연산자는 자신의 속성과 상속된 속성을 모두 확인하는 반면, hasOwnProperty() 메서드는 키가 프로토타입 체인에서 상속된 속성을 제외하고 객체 자체의 직접 속성으로 존재하는지 확인하는 데 사용됩니다. 통사론: 자바스크립트 코드 복사 object.hasOwnProperty('키') 예: 자바스크립트 코드 복사 const person = { 이름: 'John', 나이: 30 };

if (person.hasOwnProperty('이름')) {
console.log('"name" 키가 존재합니다.');
} 그 밖의 {
console.log(''name' 키가 존재하지 않습니다.');
}

if (person.hasOwnProperty('주소')) {
console.log(''주소' 키가 존재합니다.');
} 그 밖의 {
console.log(''주소' 키가 존재하지 않습니다.');
}
이 경우 hasOwnProperty()는 name이 person 객체의 직접적인 속성이기 때문에 true를 반환하고, 주소가 존재하지 않기 때문에 false를 반환합니다.
사용 사례:
속성이 객체의 직접 멤버이고 프로토타입 체인에서 상속되지 않았는지 확인해야 하는 경우 hasOwnProperty()를 사용하세요.


  1. 정의되지 않은 검사 사용 해당 값이 정의되지 않았는지 확인하여 키가 존재하는지 확인할 수 있습니다. 그러나 이 방법에는 제한 사항이 있습니다. 속성이 정의되지 않음으로 설정된 경우 키가 객체에 존재하더라도 false를 반환합니다. 따라서 이 방법은 다른 방법만큼 신뢰할 수 없습니다. 특히 개체의 속성이 명시적으로 정의되지 않음으로 설정된 경우 더욱 그렇습니다. 예: 자바스크립트 코드 복사 const person = { 이름: 'John', 나이: 정의되지 않음 };

if (person.name !== 정의되지 않음) {
console.log('"name" 키가 존재합니다.');
} 그 밖의 {
console.log(''name' 키가 존재하지 않습니다.');
}

if (person.address !== 정의되지 않음) {
console.log(''주소' 키가 존재합니다.');
} 그 밖의 {
console.log(''주소' 키가 존재하지 않습니다.');
}
이 예에서는 이름 키가 존재하지만 해당 값이 정의되지 않았으므로 검사가 통과됩니다. 그러나 개체에 주소가 정의되어 있지 않으므로 검사에서는 키가 존재하지 않는 것으로 올바르게 반환됩니다.
사용 사례:
이 방법은 객체에 명시적으로 정의되지 않음으로 설정된 속성이 없을 것이라고 확신하는 경우에 작동합니다. 값이 설정되었는지 여부만 확인해야 할 때 유용하지만 오탐에 주의하세요.


  1. Object.hasOwn() 사용(ES2022) ES2022에 도입된 Object.hasOwn()은 hasOwnProperty()에 대한 보다 강력한 대안을 제공합니다. 덮어쓸 수 있는 hasOwnProperty()와 달리 Object.hasOwn()은 Object 생성자의 일부이므로 사용하는 것이 더 안전합니다. 통사론: 자바스크립트 코드 복사 Object.hasOwn(객체, '키') 예: 자바스크립트 코드 복사 const person = { 이름: 'John', 나이: 30 };

if (Object.hasOwn(사람, '이름')) {
console.log('"name" 키가 존재합니다.');
} 그 밖의 {
console.log(''name' 키가 존재하지 않습니다.');
}

if (Object.hasOwn(사람, '주소')) {
console.log(''주소' 키가 존재합니다.');
} 그 밖의 {
console.log(''주소' 키가 존재하지 않습니다.');
}
이 메서드는 hasOwnProperty()와 동일하지만 hasOwnProperty() 메서드가 재정의될 수 있는 환경에서 사용하는 것이 더 안전합니다.
사용 사례:
hasOwnProperty()에 대한 보다 안전하고 현대적인 대안을 원하고 ES2022 이상을 지원하는 환경에서 작업하는 경우 Object.hasOwn()을 사용하세요.


결론
JavaScript 개체에 키가 있는지 확인할 때 선택하는 방법은 특정 요구 사항에 따라 달라집니다.
• 직접 속성과 상속 속성을 모두 확인하고 싶다면 in을 사용하세요.
• 직접 속성만 확인하고 상속된 속성은 제외하려면 hasOwnProperty()를 사용하세요.
• 빠른 확인이 필요한 경우 정의되지 않은 확인을 사용하지만 명시적으로 정의되지 않음으로 설정된 속성에 주의하세요.
• ES2022 환경에서는 hasOwnProperty()에 대한 보다 안전하고 현대적인 대안을 위해 Object.hasOwn()을 사용합니다.
이러한 각 방법은 다양한 시나리오를 처리하는 데 유연성을 제공하므로 애플리케이션 요구 사항에 따라 개체에 키가 있는지 효과적으로 확인할 수 있습니다.

위 내용은 JavaScript 개체에 키가 있는지 확인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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