[javascript] 키를 기준으로 JavaScript 객체 정렬

JavaScript 객체를 키별로 정렬해야합니다.

따라서 다음과 같습니다.

{ 'b' : 'asdsad', 'c' : 'masdas', 'a' : 'dsfdsfsdf' }

될 것입니다 :

{ 'a' : 'dsfdsfsdf', 'b' : 'asdsad', 'c' : 'masdas' }



답변

이 질문에 대한 다른 답변은 구식이며 구현 현실과 결코 일치하지 않으며 ES6 / ES2015 사양이 게시되어 공식적 으로 잘못되었습니다.


참조 섹션 속성 반복 순서ES6 탐색 악셀 Rauschmayer에 의해 :

속성 키를 반복하는 모든 메서드는 동일한 순서로 수행됩니다.

  1. 먼저 모든 배열 인덱스를 숫자 순으로 정렬합니다.
  2. 그런 다음 모든 문자열 키 (인덱스가 아님)가 작성된 순서대로 표시됩니다.
  3. 그런 다음 생성 된 순서대로 모든 기호.

예, JavaScript 객체 실제로 순서가 있으며 키 / 속성의 순서를 변경할 수 있습니다.

다음은 알파벳순으로 키 / 속성별로 개체를 정렬하는 방법입니다.

const unordered = {
  'b': 'foo',
  'c': 'bar',
  'a': 'baz'
};

console.log(JSON.stringify(unordered));
// → '{"b":"foo","c":"bar","a":"baz"}'

const ordered = {};
Object.keys(unordered).sort().forEach(function(key) {
  ordered[key] = unordered[key];
});

console.log(JSON.stringify(ordered));
// → '{"a":"baz","b":"foo","c":"bar"}'

ES5 엔진과의 호환성 var대신에 사용하십시오 const.


답변

JavaScript 객체 1 은 순서가 없습니다. “정렬”하려고 시도하는 것은 의미가 없습니다. 객체의 속성을 반복하려면 키를 정렬 한 다음 관련 값을 검색하면됩니다.

var myObj = {
    'b': 'asdsadfd',
    'c': 'masdasaf',
    'a': 'dsfdsfsdf'
  },
  keys = [],
  k, i, len;

for (k in myObj) {
  if (myObj.hasOwnProperty(k)) {
    keys.push(k);
  }
}

keys.sort();

len = keys.length;

for (i = 0; i < len; i++) {
  k = keys[i];
  console.log(k + ':' + myObj[k]);
}


Object.keys환상을 사용한 대체 구현 :

var myObj = {
    'b': 'asdsadfd',
    'c': 'masdasaf',
    'a': 'dsfdsfsdf'
  },
  keys = Object.keys(myObj),
  i, len = keys.length;

keys.sort();

for (i = 0; i < len; i++) {
  k = keys[i];
  console.log(k + ':' + myObj[k]);
}


1 pedantic하지는 않지만 JSON 객체와 같은 것은 없습니다 .


답변

많은 사람들이 “객체를 정렬 할 수 없다”고 언급 했지만 그 후에는 작동하는 솔루션을 제공합니다. 역설, 그렇지 않습니까?

왜 이러한 솔루션이 작동하는지 언급하지 않습니다. 대부분의 브라우저 구현에서 객체의 값이 추가 된 순서대로 저장되기 때문입니다. 그래서 정렬 된 키 목록에서 새 객체를 만들면 예상 결과가 반환됩니다.

그리고 ES5 기능적인 방식으로 하나 이상의 솔루션을 추가 할 수 있다고 생각합니다.

function sortObject(obj) {
    return Object.keys(obj).sort().reduce(function (result, key) {
        result[key] = obj[key];
        return result;
    }, {});
}

위의 ES2015 버전 ( “한 줄짜리”로 형식화 됨) :

const sortObject = o => Object.keys(o).sort().reduce((r, k) => (r[k] = o[k], r), {})

위의 예에 대한 간단한 설명 (의견에 따라) :

Object.keys제공된 객체 ( obj또는 o) 의 키 목록을 제공 한 다음 기본 정렬 알고리즘을 .reduce사용하여 키를 정렬합니다. 다음 으로 해당 배열을 다시 객체로 변환하는 데 사용되지만 이번에는 모든 키가 정렬됩니다.


답변

얘들 아 나는 비 유적으로 충격을 받았습니다! 모든 대답이 다소 오래되었지만 정렬의 안정성에 대해서는 아무도 언급하지 않았습니다! 저와 함께 견딜 수 있도록 최선을 다해 질문에 답변하고 여기에 자세히 설명하겠습니다. 이제 사과하겠습니다. 읽을 거리가 많습니다.

2018 년부터 ES6 만 사용하므로 Polyfill은 모두 MDN 문서에서 사용할 수 있으며 주어진 부분에서 연결됩니다.


질문에 대한 답변 :

키가 숫자 일 경우 Object.keys()함께 Array.prototype.reduce()정렬 된 객체를 반환하기 위해 함께 사용할 수 있습니다 .

// Only numbers to show it will be sorted.
const testObj = {
  '2000': 'Articel1',
  '4000': 'Articel2',
  '1000': 'Articel3',
  '3000': 'Articel4',
};

// I'll explain what reduces does after the answer.
console.log(Object.keys(testObj).reduce((accumulator, currentValue) => {
  accumulator[currentValue] = testObj[currentValue];
  return accumulator;
}, {}));

/**
 * expected output:
 * {
 * '1000': 'Articel3',
 * '2000': 'Articel1',
 * '3000': 'Articel4',
 * '4000': 'Articel2'
 *  }
 */

// if needed here is the one liner:
console.log(Object.keys(testObj).reduce((a, c) => (a[c] = testObj[c], a), {}));

그러나 문자열로 작업하는 Array.prototype.sort()경우이 모든 것을 체인 으로 묶는 것이 좋습니다 .

// String example
const testObj = {
  'a1d78eg8fdg387fg38': 'Articel1',
  'z12989dh89h31d9h39': 'Articel2',
  'f1203391dhj32189h2': 'Articel3',
  'b10939hd83f9032003': 'Articel4',
};
// Chained sort into all of this.
console.log(Object.keys(testObj).sort().reduce((accumulator, currentValue) => {
  accumulator[currentValue] = testObj[currentValue];
  return accumulator;
}, {}));

/**
 * expected output:
 * {
 * a1d78eg8fdg387fg38: 'Articel1',
 * b10939hd83f9032003: 'Articel4',
 * f1203391dhj32189h2: 'Articel3',
 * z12989dh89h31d9h39: 'Articel2'
 * }
 */

// again the one liner:
console.log(Object.keys(testObj).sort().reduce((a, c) => (a[c] = testObj[c], a), {}));

누군가 감소가 궁금한 경우 :

// Will return Keys of object as an array (sorted if only numbers or single strings like a,b,c).
Object.keys(testObj)

// Chaining reduce to the returned array from Object.keys().
// Array.prototype.reduce() takes one callback 
// (and another param look at the last line) and passes 4 arguments to it: 
// accumulator, currentValue, currentIndex and array
.reduce((accumulator, currentValue) => {

  // setting the accumulator (sorted new object) with the actual property from old (unsorted) object.
  accumulator[currentValue] = testObj[currentValue];

  // returning the newly sorted object for the next element in array.
  return accumulator;

  // the empty object {} ist the initial value for  Array.prototype.reduce().
}, {});

필요한 경우 하나의 라이너에 대한 설명이 있습니다.

Object.keys(testObj).reduce(

  // Arrow function as callback parameter.
  (a, c) =>

  // parenthesis return! so we can safe the return and write only (..., a);
  (a[c] = testObj[c], a)

  // initial value for reduce.
  ,{}
);

정렬이 약간 복잡한 이유 :

간단히 말해서 Object.keys()정상적인 루프에서와 동일한 순서로 배열을 반환합니다.

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

Object.keys ()는 요소가 객체에서 직접 찾을 수있는 열거 가능한 속성에 해당하는 문자열 인 배열을 반환합니다. 속성의 순서는 객체의 속성을 수동으로 반복하여 주어진 순서와 동일합니다.

참고 사항- Object.keys()배열에서도 사용할 수 있습니다 . 색인이 반환됩니다.

// simple array
const arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

그러나 이러한 예에서 볼 수 있듯이 쉽지는 않습니다. 실제 객체에는 숫자와 알파벳 문자 또는 기호가 포함될 수 있습니다 (하지 마십시오).

다음은 모두 하나의 객체에있는 예입니다.

// This is just to show what happens, please don't use symbols in keys.
const testObj = {
  '1asc': '4444',
  1000: 'a',
  b: '1231',
  '#01010101010': 'asd',
  2: 'c'
};

console.log(Object.keys(testObj));
// output: [ '2', '1000', '1asc', 'b', '#01010101010' ]

이제 Array.prototype.sort()위의 배열에서 사용 하면 출력이 변경됩니다.

console.log(Object.keys(testObj).sort());
// output: [ '#01010101010', '1000', '1asc', '2', 'b' ]

문서에서 인용 한 내용은 다음과 같습니다.

sort () 메서드는 배열의 요소를 적절하게 정렬하고 배열을 반환합니다. 정렬이 반드시 안정적인 것은 아닙니다. 기본 정렬 순서는 문자열 유니 코드 코드 포인트에 따릅니다.

정렬의 시간 및 공간 복잡성은 구현에 따라 다르므로 보장 할 수 없습니다.

그들 중 하나가 원하는 결과를 반환하는지 확인해야합니다. 실제 예제에서 사람들은 API 및 데이터베이스와 같은 서로 다른 정보 입력을 함께 사용하는 경우 상황을 정리하는 경향이 있습니다.


그래서 큰 문제는 무엇입니까?

모든 프로그래머가 이해해야 할 두 가지 기사가 있습니다.

내부 알고리즘 :

컴퓨터 과학에서 인플레 이스 알고리즘은 보조 데이터 구조를 사용하지 않고 입력을 변환하는 알고리즘입니다. 그러나 보조 변수에는 소량의 추가 저장 공간이 허용됩니다. 알고리즘이 실행될 때 일반적으로 입력이 출력에 의해 덮어 쓰기됩니다. 인플레 이스 알고리즘은 요소 교체 또는 교체를 통해서만 입력 시퀀스를 업데이트합니다. 제자리에 있지 않은 알고리즘을 제자리 안 또는 제자리라고도합니다.

기본적으로 기존 배열을 덮어 씁니다! 다른 이유로 기존 어레이를 유지하려는 경우에 중요합니다. 따라서 이것을 명심하십시오.

정렬 알고리즘

안정적인 정렬 알고리즘은 입력에 나타나는 것과 동일한 순서로 동일한 요소를 정렬합니다. 일부 종류의 데이터를 정렬 할 때는 정렬 순서를 결정할 때 데이터의 일부만 검사합니다. 예를 들어, 오른쪽에있는 카드 정렬 예에서 카드는 순위별로 정렬되며 해당 수트는 무시됩니다. 이를 통해 원래 목록의 여러 가지 올바르게 정렬 된 버전을 사용할 수 있습니다. 안정적인 정렬 알고리즘은 다음 규칙에 따라 다음 중 하나를 선택합니다. 두 개의 5 카드와 같이 두 항목이 동일하게 비교되는 경우 상대 순서가 유지되므로 입력에서 다른 항목보다 먼저 오면 출력에서 다른 것보다 먼저 나옵니다.

여기에 이미지 설명을 입력하십시오

카드 놀이에서 안정적인 종류의 예. 카드가 안정적인 정렬로 순위별로 정렬 될 때 두 5는 원래 있던 정렬 된 출력에서 ​​동일한 순서로 유지되어야합니다. 불안정한 정렬로 정렬 된 경우 5는 반대 방향으로 끝날 수 있습니다. 정렬 된 출력에서 ​​순서.

이것은 정렬이 옳지 만 변경되었음을 나타냅니다. 따라서 현실 세계에서 정렬이 정확하더라도 우리가 기대하는 것을 얻도록해야합니다! 이것도 명심하십시오. 더 많은 JavaScript 예제는 Array.prototype.sort ()-docs를 참조하십시오 . https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort


답변

이것은 나를 위해 작동

/**
 * Return an Object sorted by it's Key
 */
var sortObjectByKey = function(obj){
    var keys = [];
    var sorted_obj = {};

    for(var key in obj){
        if(obj.hasOwnProperty(key)){
            keys.push(key);
        }
    }

    // sort keys
    keys.sort();

    // create new array based on Sorted Keys
    jQuery.each(keys, function(i, key){
        sorted_obj[key] = obj[key];
    });

    return sorted_obj;
};


답변

2019 년 이며이 문제를 해결하는 2019 방법이 있습니다 🙂

Object.fromEntries(Object.entries({b: 3, a:8, c:1}).sort())


답변

여기 1 개의 라이너가 있습니다

var data = { zIndex:99,
             name:'sravan',
             age:25,
             position:'architect',
             amount:'100k',
             manager:'mammu' };

console.log(Object.entries(data).sort().reduce( (o,[k,v]) => (o[k]=v,o), {} ));