JavaScript는 객체에 어떤 속성이 있는지 판단하는 방법

대상에 어떤 속성이 있는지 판단하는 흔한 방식으로 정리하고 서로 다른 장면은 서로 다른 방식을 사용해야 한다.
1. 점 (.)또는 대괄호 ([])
점이나 괄호를 통해 대상의 속성 값을 얻을 수 있으며, 대상에 이 속성이 존재하지 않으면undefined를 되돌려줍니다.물론 여기서'존재하지 않는다'는 것은 대상 자체와 원형 체인에 존재하지 않고 원형 체인에 이 속성이 있으면 원형 체인의 속성 값을 되돌려준다.

//  
let test = {name : 'lei'}
//  
test.name      //"lei"
test["name"]     //"lei"

//  
test.age       //undefined

//  
test["toString"]   //toString() { [native code] }//  undefined test.un = undefinedtest.un       //undefined   ,  undefined 
그래서 우리는 Obj에 근거할 수 있다.x !== undefined의 반환 값은 Obj에 x 속성이 있는지 여부를 판단합니다.
이런 방식은 매우 간단하고 편리하다. 한계성은 x의 속성 값에 사용할 수 없지만 undefined 장면일 수 있다는 것이다.in 연산자는 이 문제를 해결할 수 있다
2. in 연산자
MDN의 in 연산자에 대한 설명: 지정한 속성이 지정한 대상이나 원형 체인에 있으면 in 연산자는true를 되돌려줍니다.
'name' in test//true
'un' in test//true
'toString' in test//true
'age' in test//false
예시에서 알 수 있듯이 값이undefined인 속성도 정상적으로 판단할 수 있다.
이런 방식의 한계성은 자신과 원형 체인의 속성을 구분할 수 없다는 것이다. 자신의 속성이 존재하는지 아닌지만 판단할 때 이런 방식은 적용되지 않는다.이때 hasOwnProperty()가 필요합니다.
3. hasOwnProperty()
test.hasOwnProperty('name')//true 자체 속성
test.hasOwnProperty('age')//false 없음
test.hasOwnProperty('toString')//false 원형 체인 속성
이 속성은 자신이 존재할 때만true로 되돌아오는 것을 볼 수 있습니다.자신의 속성만 판단하는 장면에 적용.
넷째, propertyIsEnumerable()

const object1 = {};
const array1 = [];
object1.property1 = 42;
array1[0] = 42;

console.log(object1.propertyIsEnumerable('property1'));
// expected output: true

console.log(array1.propertyIsEnumerable(0));
// expected output: true

console.log(array1.propertyIsEnumerable('length'));
// expected output: false
propertyIsEnumerable () 메서드는 지정된 속성을 일일이 열거할 수 있는지 여부를 나타내는 부울 값을 반환합니다.
총결산
네 가지 방식은 각각 장단점이 있다. 서로 다른 장면은 서로 다른 방식을 사용하고 때로는 결합하여 사용해야 한다. 예를 들어 자신의 속성을 두루 훑어볼 때 for・in・와hasOwnProperty()를 결합하여 사용한다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.

좋은 웹페이지 즐겨찾기