developer tip

JavaScript 객체에서 키를 정렬 / 순서화하는 방법이 있습니까?

optionbox 2020. 12. 15. 19:03
반응형

JavaScript 객체에서 키를 정렬 / 순서화하는 방법이 있습니까?


예를 들어 다음

var data = {
    'States': ['NSW', 'VIC'],
    'Countries': ['GBR', 'AUS'],
    'Capitals': ['SYD', 'MEL']
}
for (var item in data) {
    console.log(item);
}

인쇄물

States
Countries
Capitals

인쇄되도록 알파벳순으로 정렬하는 방법이 있습니까?

Capitals
Countries
States

객체 자체가 아닙니다. 객체의 속성 컬렉션은 순서가 없습니다.

한 가지 할 수있는 Object.keys()일은를 사용하고 배열을 정렬 한 다음 반복하는 것입니다.

Object.keys(data)
      .sort()
      .forEach(function(v, i) {
          console.log(v, data[v]);
       });

ECMAScript 5th edition을 지원하지 않는 브라우저 용 패치 (구현) :


네, 있습니다. ECMAScript 표준에 속하지 않지만 브라우저와 Node.js에서 지원되며 분명히 안정적입니다. https://stackoverflow.com/a/23202095/645715를 참조 하십시오 .

편집 : 키가 정렬 된 객체를 반환합니다. Object.keys(...)객체에서 정렬 된 키를 가져 오는 데 사용할 수 있습니다 .

객체 키 순서에 대해 걱정하는 이유는 무엇입니까? XML을 중첩 된 객체로 표현하고 XML 태그를 해시 키로 사용하는 xml2js 를 사용하여 XML 을 구문 분석하는 것과 같은 일부 응용 프로그램에서는 차이가 중요 할 수 있습니다 .

몇 가지 참고 사항이 있습니다.

  • 정수처럼 보이는 키가 먼저 표시되고 숫자 순서로 나타납니다.
  • 문자열처럼 보이는 키가 다음에 삽입 순서로 나타납니다.
  • 이 주문은 Object.keys(obj)
  • 보고 된 순서 for (var key in obj) {...}는 Safari, Firefox에서 다를 수 있습니다.

이 함수는 정렬 된 키가 알파벳 순서로 삽입 된 객체를 반환합니다.

function orderKeys(obj, expected) {

  var keys = Object.keys(obj).sort(function keyOrder(k1, k2) {
      if (k1 < k2) return -1;
      else if (k1 > k2) return +1;
      else return 0;
  });

  var i, after = {};
  for (i = 0; i < keys.length; i++) {
    after[keys[i]] = obj[keys[i]];
    delete obj[keys[i]];
  }

  for (i = 0; i < keys.length; i++) {
    obj[keys[i]] = after[keys[i]];
  }
  return obj;
}

다음은 빠른 테스트입니다.

var example = { 
      "3": "charlie",
      "p:style": "c",
      "berries": "e",
      "p:nvSpPr": "a",
      "p:txBody": "d",
      "apples": "e",
      "5": "eagle",
      "p:spPr": "b"
    }

var obj = orderKeys(example);

이것은 반환

{ '3': 'charlie',
  '5': 'eagle',
  apples: 'e',
  berries: 'e',
  'p:nvSpPr': 'a',
  'p:spPr': 'b',
  'p:style': 'c',
  'p:txBody': 'd' }

그런 다음 주문 된 키를 다음과 같이 얻을 수 있습니다.

Object.keys(obj) 

어떤 반환

["3", "5", "apples", "berries", "p:nvSpPr", "p:spPr", "p:style", "p:txBody"]

여기에 좋은 기능적 솔루션이 있습니다.

원래,

  1. 목록으로 키를 추출하십시오. Object.keys
  2. sort 열쇠
  3. 원하는 결과를 얻기 위해 목록을 다시 객체로 축소

ES5 솔루션 :

not_sorted = {b: false, a: true};

sorted = Object.keys(not_sorted)
    .sort()
    .reduce(function (acc, key) { 
        acc[key] = not_sorted[key];
        return acc;
    }, {});

console.log(sorted) //{a: true, b: false}

ES6 솔루션 :

not_sorted = {b: false, a: true}

sorted = Object.keys(not_sorted)
    .sort()
    .reduce((acc, key) => ({
        ...acc, [key]: not_sorted[key]
    }), {})

console.log(sorted) //{a: true, b: false}

If conversion to an array does not suit your template and you know the keys of your object you can also do something like this:

In your controller define an array with the keys in the correct order:

this.displayOrder = [
    'firstKey',
    'secondKey',
    'thirdKey'
];

In your template repeat the keys of your displayOrder and then use ng-init to reference back to your object.

<div ng-repeat="key in ctrl.displayOrder" ng-init="entry = ctrl.object[key]">
     {{ entry.detail }}
</div>

ReferenceURL : https://stackoverflow.com/questions/9658690/is-there-a-way-to-sort-order-keys-in-javascript-objects

반응형