JavaScript ES6에서 객체 속성의 순회 순서

백엔드 서비스에서 JSON 객체 응답을 수신하고 해당 객체를 사용하여 React 구성 요소를 생성하는 코드를 본 적이 있습니까?

Object.keys(data).map((entry) => {
  <MyComponent key={entry.id} name={entry.name} ... />;
});

😱 여러 번 봤는데 어떤 경우에는 괜찮을 수도 있지만 매우 위험합니다! 특히 해당<MyComponent />을 수신/삽입된 순서대로 표시해야 하는 경우.

ES6 객체 순회

ES6 이전에는 개체 속성이 순회되는 순서가 지정되지 않았으므로 각 엔진이 적합하다고 판단되는 대로 처리했습니다.

ES6에서는 다음과 같은 몇 가지 방법에 대해 순회 순서가 보장되었습니다.

Object.getOwnPropertyNames()

Reflect.ownKeys()

Object.getOwnPropertySymbols()

그러나 다른 사람은 아닙니다.

Object.keys()

Object.values()

Object.entries()

JSON.stringify()

for .. in 루프

아시다시피 가장 인기 있는 방법은 주문을 보장하지 않는 방법입니다 😒

그것을 보장하는 것들은 다음 순서를 지정하는 [[OwnPropertyKeys]] 내부 방법을 따릅니다.

정수 인덱스(해당되는 경우), 오름차순.

속성 생성 시 기타 문자열 키(해당되는 경우)
주문하다.

속성 생성 순서의 기호 키(해당되는 경우).

const obj = {
  [Symbol('first')]: 'symbol: first'
  '5': 'integer: 5',
  'foo': 'string: foo',
  '01': 'string: 01',
  2: 'integer: 2',
};

console.log(Reflect.ownKeys(obj));
// ["2", "5", "foo", "01", Symbol(first) ]

그리고 Object.keys() 와 같은 다른 인기 있는 방법은 어떻습니까?

일부 주요 브라우저의 현재 버전은 이러한 인기 있는 방법에 대해서도 이와 동일한 순서를 구현하지만 - ES6 구현은 이러한 인기 있는 방법에 대한 특정 열거 순서를 정의할 필요가 없으므로 코드에서 계산하지 않는 것이 좋습니다. .
(내 프로젝트 중 하나에서 Object.keys()를 사용할 때 Safari 13.1.2에서 작동하지 않는 이 주문을 개인적으로 보았습니다 😟)

대안은 무엇입니까?

일부 타사 라이브러리를 제외하고 삽입 순서에 따라 반복을 보장하려는 경우 Array 또는 Map이 더 안전한 선택입니다!

희망이 있습니까?

글쎄, 실제로..있다! 😻

ECMA 사양을 변경하고 이[[OwnPropertyKeys]] 주문 동작을 모든 인기 있는 객체 탐색 방법에 대해 공식화하는 proposal이 있었고 그 제안은 accepted and merged into the main specification 이었습니다!

즉, ES2020에서 이러한 인기 있는 방법의 속성 순서는 ECMA 사양에 의해 보장되어 다른 방법과 동일한 결정론적 방식으로 반복됩니다!

결론

JavaScript의 객체 순회 순서는 다른 브라우저 구현으로 인해 항상 까다로웠지만 ES2020은 마침내 모든 인기 있는 순회 방법에 대한 결정적 순서 표준을 제공했습니다.
여전히 이 순서가 작동하지 않을 수 있습니다. 프로젝트에 integer 및 string 키가 혼합된 개체가 포함될 수 있지만 삽입 순서에 따라 순회가 필요할 수 있습니다.

객체 순회가 어떻게 작동하는지 아는 것이 좋고, 사용할 수 있는 대안이 있다는 것도 아는 것이 좋습니다 😊

즐거운 코딩! 🚀 🚀 🚀