source

JavaScript에서 객체에 지정된 속성이 있는지 확인하는 방법

manycodes 2023. 2. 7. 00:05
반응형

JavaScript에서 객체에 지정된 속성이 있는지 확인하는 방법

""" "" "" "" " " " " " " " " " " " " " " " " " 어떻게 판단하면 됩니까?x.y「」의에 관계없이x.y

현재 사용하고 있습니다.

if (typeof(x.y) !== 'undefined')

좀 투박해 보이는데요.더 좋은 방법이 있을까요?

개체에 속성이 있습니다.

오브젝트 자체에 있는 속성(프로토타입 체인의 일부가 아님)을 테스트하는 경우 다음을 사용할 수 있습니다.

if (x.hasOwnProperty('y')) { 
  // ......
}

개체 또는 해당 프로토타입의 특성은 다음과 같습니다.

연산자를 사용하여 상속되는 속성도 테스트할 수 있습니다.

if ('y' in x) {
  // ......
}

오브젝트 @gnarf의 응답이 물리적으로 포함되어 있는지 여부를 확인하려면hasOwnProperty아, 아, 네.

오브젝트 자체 또는 프로토타입 체인의 위쪽에 속성이 존재하는지 여부를 알고 싶다면 연산자를 사용할 수 있습니다.

if ('prop' in obj) {
  // ...
}

예:

var obj = {};

'toString' in obj == true; // inherited from Object.prototype
obj.hasOwnProperty('toString') == false; // doesn't contains it physically

밑줄.js 또는 Lodash

if (_.has(x, "y")) ...

:)

다음과 같이 정리할 수 있습니다.

if ( x.y !== undefined ) ...

내 원래 코드의 한 가지 기능

if ( typeof(x.y) != 'undefined' ) ...

도움이 될 수 것이, 사용해도 입니다.x gnarf를 테스트해야 합니다.x이치노

그래서 아마도 세 가지 방법 모두 한 가지 속임수에 속할 수 있을 것이다.

포함한다

Object.keys(x).includes('y');

Array.prototype.includes()method는 배열이 엔트리에 특정 값을 포함할지 여부를 결정하며 필요에 따라 true 또는 false를 반환합니다.

그리고.

Object.keys()지정된 개체의 모든 열거 가능한 속성을 나타내는 문자열 배열을 반환합니다.

.hasOwnProperty() ES6+ † ES6+?.- like: - 션션 - - -:if (x?.y) 좋습니다.

ES6+:

ES6+에는 다음과 같이 확인할 수 있는 새로운 기능이 있습니다.

if (x?.y)

는 '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아,x 후, 「」를 호출합니다.y if 안에 이 발생하고 .x?.y부울로 변환됩니다.

속성 체크의 명확성과 함수 인수 옵션 객체의 검증에 관한 질문이므로 여러 속성의 존재를 테스트하기 위한 라이브러리가 필요 없는 간단한 방법을 언급해야겠다고 생각했습니다.면책사항:ECMAScript 5가 필요합니다(단, IE8을 사용하고 있는 IMO는 웹이 파손되어도 무방합니다).

function f(opts) {
  if(!["req1","req2"].every(opts.hasOwnProperty, opts)) {
      throw new Error("IllegalArgumentException");
  }
  alert("ok");
}
f({req1: 123});  // error
f({req1: 123, req2: 456});  // ok
const data = [{"b":1,"c":100},{"a":1,"b":1,"c":150},{"a":1,"b":2,"c":100},{"a":2,"b":1,"c":13}]

const result = data.reduce((r, e)  => {
  r['a'] += (e['a'] ? e['a'] : 0)
    r['d'] += (e['b'] ? e['b'] : 0)
  r['c'] += (e['c'] ? e['c'] : 0)

  return r
}, {'a':0, 'd':0, 'c':0})

console.log(result)
`result` { a: 4, d: 5, c: 363 }

이 스레드의 다른 예와 달리 이 구현은 개체에 우리가 확인하는 속성이 있다고 주장할 뿐입니다.

const hasOwnProperty = <X extends {}, Y extends PropertyKey>(
  object: X,
  property: Y
): object is Record<Y, unknown> & X => {
  return object.hasOwnProperty(property);
};

다음은 원하는 속성을 가진 분기를 식별하는 데 사용되는 예입니다.

const hasOwnProperty = <X extends {}, Y extends PropertyKey>(
  object: X,
  property: Y
): object is Record<Y, unknown> & X => {
  return object.hasOwnProperty(property);
};

type PaidProjectFeeType = 'FIXED_PRICE' | 'RATE' | '%future added value';

const PAID_PROJECT_FEE_TYPE_LABELS: Record<
  'FIXED_PRICE' | 'RATE',
  string
> = {
  FIXED_PRICE: 'Fixed Price',
  RATE: 'Rate',
};

export const getPaidProjectFeeTypeLabel = (
  feeType: PaidProjectFeeType
): string => {
  if (hasOwnProperty(PAID_PROJECT_FEE_TYPE_LABELS, feeType)) {
    PAID_PROJECT_FEE_TYPE_LABELS[feeType];
  }

  throw new Error('test');
};

https://tsplay.dev/m0LBOm

아쉽게도, 문제는 지금이다.PAID_PROJECT_FEE_TYPE_LABELS다음과 같이 가정합니다.

Record<PaidProjectFeeType, unknown> & Record<"FIXED_PRICE" | "RATE", string>

즉, 다음과 같은 값이 있을 수 있으므로 결과를 반환할 수 없습니다.X[Y]unknown이 기능은 오브젝트에 원하는 속성이 있다고 단언할 필요가 있지만 결과가 의도한 것과 일치하도록 단언할 필요가 있는 경우에 도움이 됩니다.

하지만 더 좋은 방법이 있다.

두 가지 유틸리티가 필요합니다.

export const keys = <T extends Record<string, unknown>>(
  object: T
): Array<keyof T> => {
  return Object.keys(object);
};

keys에 오브젝트 속성 이름의 유형 배열을 나타냅니다.

export const includes = <C extends M, M>(
  collection: readonly C[],
  member: M
): member is C => {
  return collection.includes(member as C);
};

includes는 속성이 읽기 전용 배열의 멤버임을 주장할 수 있습니다.include에 대한 자세한 내용은 이 블로그 투고를 참조하십시오.

export const keys = <T extends Record<string, unknown>>(
  object: T
): Array<keyof T> => {
  return Object.keys(object);
};

export const includes = <C extends M, M>(
  collection: readonly C[],
  member: M
): member is C => {
  return collection.includes(member as C);
};

type PaidProjectFeeType = 'FIXED_PRICE' | 'RATE' | '%future added value';

const PAID_PROJECT_FEE_TYPE_LABELS: Record<
  'FIXED_PRICE' | 'RATE',
  string
> = {
  FIXED_PRICE: 'Fixed Price',
  RATE: 'Rate',
};

export const getPaidProjectFeeTypeLabel = (
  feeType: PaidProjectFeeType
): string => {
  if (includes(keys(PAID_PROJECT_FEE_TYPE_LABELS), feeType)) {
    return PAID_PROJECT_FEE_TYPE_LABELS[feeType];
  }

  throw new Error('test');
};

https://tsplay.dev/N7gLDN

요컨대, 이 접근방식을 통해 우리는 그 범위를 좁힐 수 있다.feeType존재하는 가치에 대한 가치keys(PAID_PROJECT_FEE_TYPE_LABELS)그러면 속성 값에 액세스할 수 있습니다.

이 접근방식이 가장 효과적이며 기술적으로 주의할 점이 있습니다.keys구현은 런타임에 안전하지 않습니다.반환되는 런타임 값이 tsc를 사용하여 추론된 값과 다른 (대부분 이론적인) 시나리오가 있습니다.

다른 답변과 더불어 다음 웹 사이트를 사용하는 것이 좋습니다.Object.hasOwn()지정된 객체가 지정된 속성을 자체 속성(개체 자체에서 의미)으로 가지고 있는지 확인하는 방법. 새 속성을 사용할 수 있습니다.Object.hasOwn()method: 지정된 객체에 지정된 속성이 자체 속성으로 있는 경우 true를 반환하는 정적 메서드입니다.속성이 상속되거나 존재하지 않으면 메서드는 false를 반환합니다.

const person = { name: 'dan' };

console.log(Object.hasOwn(person, 'name'));// true
console.log(Object.hasOwn(person, 'age'));// false

const person2 = Object.create({gender: 'male'});

console.log(Object.hasOwn(person2, 'gender'));// false

보다 을 이 좋습니다.Object.hasOwnProperty(), 이것은 사물을 가 있기 입니다.Object.create(null)된 ""를 hasOwnProperty()방법.전화하면 이런 문제를 해결할 수 있지만Object.prototype.hasOwnProperty() 오브젝트에서는, 「」라고 하는,Object.hasOwn()이러한 문제를 극복하는 것이 바람직합니다(아래 예 참조).

let person = {
  hasOwnProperty: function() {
    return false;
  },
  age: 35
};

if (Object.hasOwn(person, 'age')) {
  console.log(person.age); // true - the remplementation of hasOwnProperty() did not affect the Object
}

let person = Object.create(null);
person.age = 35;
if (Object.hasOwn(person, 'age')) {
  console.log(person.age); // true - works regardless of how the object was created
}

★★★의 상세Object.hasOwn는, 다음의 URL 에 있습니다.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn

브라우저 호환성 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn#browser_compatibility

있는지 은 를 할 수 .in하다

단순하지 않은 이유:

if (typeof myObject.myProperty == "undefined") alert("myProperty is not defined!");

또는 특정 유형을 예상하는 경우:

if (typeof myObject.myProperty != "string") alert("myProperty has wrong type or does not exist!");

언급URL : https://stackoverflow.com/questions/1894792/how-to-determine-whether-an-object-has-a-given-property-in-javascript

반응형