[Every Breakthrough] JavaScript에 속성이 존재하는지 확인하는 방법

머리말

JavaScript 개발에서는 객체에 속성이 존재하는지 확인해야 하는 경우가 많습니다.
JavaScript는 상대적으로 느슨한 언어이기 때문에 더 엄격한 작업을 수행하기가 어렵습니다. 예를 들어 JavaScript에서는 "속성이 존재하는지 여부"에 대한 정의에 문제가 있습니다. 언제 존재하고 언제 존재하지 않는 것으로 간주됩니까? 옳고 그른 답은 없지만, 상황과 개발 요구가 다르면 "존재"의 의미가 다릅니다.
여기서는 일반적으로 사용되는 5가지 판단 방법과 그 문제점에 대해 이야기하겠습니다.

방법 1: 불리언 판단

예:

const obj1 = { name: 'Andy', age: 21 }
const obj2 = { name: 'Alice' }

console.log( obj1.age ? '存在' : '不存在' ); // 存在
console.log( obj2.age ? '存在' : '不存在' ); // 不存在

먼저 이 방법의 단점부터 말씀드리겠습니다
만약:

const obj = { name: 'Baby', age: 0 }

console.log( obj.age ? '存在' : '不存在' ); // 不存在

이 경우 연령은 "존재"해야 하나, "존재하지 않는다"고 판단하게 됩니다.

그럼 이 방법은 사용할 수 없다는 건가요?
이는 비즈니스의 개발 요구 사항에 따라 다릅니다.
비즈니스 개발 요구 사항에서 이 속성은 0, 빈 문자열, NaN, 정의되지 않음 등이 될 수 없다는 것을 알고 있다면 이 판단은 여전히 ​​가능합니다.
더 엄격한 환경에 놓으면 이 방법에는 결함이 있습니다.

방법 2: 선택적 연결(?.) 및 정의되지 않은 검사

먼저 예를 들어보겠습니다.

const obj1 = { name: 'Andy', age: 21 }
const obj2 = { name: 'Alice' }

console.log( obj1?.age !== undefined ? '存在' : '不存在' ); // 存在
console.log( obj2?.age !== undefined ? '存在' : '不存在' ); // 不存在

이 비교 논리는 JS 언어에서는 존재하지 않는 값은 정의되지 않는다는 것입니다.

그러나 개체에서는 다음과 같은 상황이 발생할 수도 있습니다.

const obj = {
    name: 'Andy',
    age: undefined
}

이 경우 연령 속성은 '존재함' 또는 '존재하지 않음'이어야 합니까?

말하기는 어렵지만 여전히 특정 수요 환경에 따라 다릅니다.

방법 3: Object.keys() 찾기

객체에 age 속성이 있는지 알아야 한다고 하면 그 값이 무엇인지는 상관하지 않습니다.

다음 방법을 사용할 수 있습니다.

const obj = { name: 'Andy', age: 21 }

console.log( Object.keys(obj).includes('age') ? '存在' : '不存在' ); // 存在

판단을 위해 열거 가능한 자체 속성 이름을 얻으려면 Object.keys()를 사용하세요.

여기에는 두 개의 키워드가 있습니다. 하나는 '자신'이고 다른 하나는 '열거 가능'입니다.

먼저 '나'가 무엇인지부터 이야기해보자.

예를 들어 여기에 객체가 있습니다. 객체에 속성 이름을 추가하세요.

const obj = { name: 'Andy' }
// `name` 就是 obj 自身的属性
console.log( Object.keys(obj) ); // [ 'name' ]

그럼 그 자체의 속성이 아닌 것은 무엇입니까? 여기서 "프로토타입"이 작동합니다. 객체에는 프로토타입이 있으며 프로토타입에 추가된 속성은 "자체" 속성이 아닙니다.

const obj = Object.create( { type: 'human' } );
obj.name = 'Andy';

console.log( obj.name ); // Andy
console.log( obj.type ); // human
console.log( Object.keys(obj) ); // [ 'name' ]

이 예에서 type이 obj의 속성인지 어떻게 확인합니까? 말하기 어렵죠. '예' 또는 '아니요'라고 대답할 수 있습니다. 여유로운 언어 환경이 만들어낸 문제다.

그러나 알아야 할 것은 이 경우 Object.keys()가 프로토타입의 속성을 가져올 수 없다는 것입니다. "자신의" 속성만 읽을 수 있기 때문입니다.

두 번째는 "열거 가능"입니다.

여기서 속성 설명자가 언급됩니다. 많은 동료들은 JS 언어의 객체에서 각 속성에 설명자가 있다는 것을 모릅니다.
어떻게 읽을 수 있나요? 인쇄하여 살펴보겠습니다.

const obj1 = { name: 'Andy', age: 21 }
const obj2 = { name: 'Alice' }

console.log( obj1.age ? '存在' : '不存在' ); // 存在
console.log( obj2.age ? '存在' : '不存在' ); // 不存在

이 설명자는 실제로 값, 쓰기 가능 및 열거 가능 열거 가능 ...

과 같은 이 속성에 대한 일부 정보를 설명하는 객체라는 것을 알 수 있습니다.

이 열거 가능 항목은 해당 속성과 열거 가능 여부를 정의합니다. 예를 들어 이 속성은 for...in 루프 중에 읽을 수 있으며 Object.keys()의 경우에도 마찬가지입니다.

속성을 열거 불가능으로 다시 정의하면 Object.keys()가 이 속성을 읽을 수 없습니다.

const obj = { name: 'Baby', age: 0 }

console.log( obj.age ? '存在' : '不存在' ); // 不存在

여기에는 속성 설명자에 대한 지식이 포함됩니다. 이는 기본 JS 언어에 대한 매우 중요한 지식이며, 제가 아는 많은 프런트 엔드 프로그래머는 기본 JS에 대한 지식이 부족합니다.

그러면 판단하려는 속성이 열거 가능 여부에 관계없이 자체 속성만 있으면 어떻게 됩니까? 그러면 Object.keys()를 사용할 수 없습니다. 다음 방법을 사용할 수 있습니다.

방법 4: Object.hasOwn() 또는 hasOwnProperty() 사용

Object.hasOwn()과 hasOwnProperty()의 차이점은 무엇인가요?

Object.hasOwn()은 ES2022에 추가된 메소드로, 객체 자체에 특정 속성이 있는지 확인하고 hasOwnProperty의 최적화 처리를 대체하는 데 사용됩니다. 이 방법은 나중에 추가되었기 때문에 호환성이 여전히 문제입니다. 새 버전의 브라우저만 고려한다면 여전히 사용할 수 있습니다.

이 두 가지 방법은 "own" 속성 이름을 결정하므로 열거 가능 여부에 관계없이 읽을 수 있습니다.

const obj1 = { name: 'Andy', age: 21 }
const obj2 = { name: 'Alice' }

console.log( obj1?.age !== undefined ? '存在' : '不存在' ); // 存在
console.log( obj2?.age !== undefined ? '存在' : '不存在' ); // 不存在

객체의 hasOwnProperty()가 수정될 수 있으므로 Object.hasOwn()을 사용하는 이유:

const obj = {
    name: 'Andy',
    age: undefined
}

판단하려는 속성 이름이 자체적이고 열거 가능하지 않아도 되는 경우 프로토타입도 허용되며 마지막 방법을 사용해야 합니다.

방법 5: 연산자에서

in 연산자는 객체 또는 객체의 프로토타입 체인에 속성이 존재하는지 확인하는 데 사용됩니다.

const obj = { name: 'Andy', age: 21 }

console.log( Object.keys(obj).includes('age') ? '存在' : '不存在' ); // 存在

요약

이러한 방법은 어떤 방법이 옳고 그른지는 말하지 않습니다. 모든 시나리오가 동일한 접근 방식에 적합한 것은 아닙니다. 상황에 따라 모범 사례를 준수하여 코드 가독성과 보안을 강화하세요.

위 내용은 [Every Breakthrough] JavaScript에 속성이 존재하는지 확인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!