값 알고리즘으로 정렬

안녕하세요 코더 여러분,

생각 실험으로 자바스크립트에서 .sort() 메서드의 특정 기능을 재구성하는 방법을 탐색할 수 있다고 생각했습니다.

도전

세계 통화와 그 가치를 표시하는 웹 페이지를 만들고 있다고 가정해 보겠습니다. 완성된 프로젝트는 다음과 같이 보일 수 있습니다.



이 페이지를 구축하기 위해 api.coingecko.com과 같은 무료 온라인 API에서 json 파일을 가져왔습니다. 이 가져오기 요청에 대한 코드는 다음과 같습니다.

let jsonOBJ = {}
fetch(
'https://api.coingecko.com/api/v3/exchange_rates'
).then(
res=>res.json()
).then(
data=> {jsonOBJ = data})

이제 결과 json 개체의 잘린 버전을 살펴보겠습니다.

 let jsonOBJ = {"rates": {
    "btc": {
      "name": "Bitcoin",
      "unit": "BTC",
      "value": 1.0,
      "type": "crypto"
 },
    "ltc": {
      "name": "Litecoin",
      "unit": "LTC",
      "value": 372.614,
      "type": "crypto"
    },
    "eth": {
      "name": "Ether",
      "unit": "ETH",
      "value": 13.371,
      "type": "crypto"
}
   }}

엄청난. 이제 까다로운 부분이 있습니다. 값 중 하나로 이 개체를 재정렬하는 방법은 무엇입니까?

예를 들어 "rates"개체의 개체가 "value"하위 필드로 정렬되도록 개체를 정렬하려고 한다고 가정해 보겠습니다.

결과 객체는 다음과 같아야 합니다.

 let jsonOBJ = {"rates": {
    "btc": {
      "name": "Bitcoin",
      "unit": "BTC",
      "value": 1.0,
      "type": "crypto"
 },
"eth": {
      "name": "Ether",
      "unit": "ETH",
      "value": 13.371,
      "type": "crypto"
},
    "ltc": {
      "name": "Litecoin",
      "unit": "LTC",
      "value": 372.614,
      "type": "crypto"
    }

   }

솔루션 연습

이 문제를 몇 가지 다른 부분으로 나누겠습니다.

작업 1: 정렬 항목의 배열 만들기

우선, 모든
정렬하려는 필드의 값. 이것은
나중에 유용하게 사용하세요.

//create the new array
 let sortArray = []

/*for each key in the unsorted object, find the corresponding sorting value field and push that item into the empty array "sortArray"*/

 Object.keys(jsonOBJ.rates).map(
                e=>sortArray.push(jsonOBJ.rates[e] 
                ['value'])
        )

그 결과 sortArray에 대한 다음 값이 생성됩니다.

sortArray = [1.0, 372.614, 13.371]

마지막으로 json 객체가 정렬되기를 바라는 방식으로 해당 값을 정렬해 보겠습니다. 이 경우 최소값에서 최대값까지 숫자로 정렬해야 합니다.

sortArray = sortArray.sort((a,b) => a-b)
console.log(sortArray)
//[1, 13.371, 372.614]

훌륭한! 이제 json 개체의 값으로 구성된 배열이 있습니다. 이러한 값은 정렬하려는 필드에서 가져온 것입니다. 그리고 원하는 배열로 정렬됩니다.

정렬된 객체 빌드

여기서 일이 조금 더 까다로워집니다. 정렬된 값 배열을 사용하여

sortArray = [1, 13.371, 372.614]

우리는 이 sortArray를 반복하고 원래 중첩된 json 개체에 대해 각 요소를 확인하여 일치하는 항목을 찾습니다. 일치하는 항목이 있으면 중첩된 개체를 새 개체에 추가합니다. 데이터를 정렬하려는 순서대로 sortArray를 반복할 것이므로 결과로 생성되는 새 개체도 마찬가지로 올바른 순서가 됩니다.

 let newOBJ = {}
 for (let i in sortArray){
        for (let j in jsonOBJ.rates )
        {
            if (jsonOBJ.rates[j]['value'] === sortArray[i]){
                newOBJ[j] = jsonOBJ.rates[j]; 
                //deleting the nested jsonOBJ object here prevents double entries.
                delete jsonOBJ.rates[j];
            }
        }
    } 
    //replace original with newObj
    jsonOBJ['rates']=newOBJ

그렇게 해야 합니다. 이제 console.log(jsonOBJ)를 사용하면 중첩 배열의 올바른 순서를 볼 수 있습니다.

{"rates": {
    "btc": {
      "name": "Bitcoin",
      "unit": "BTC",
      "value": 1.0,
      "type": "crypto"
 },
"eth": {
      "name": "Ether",
      "unit": "ETH",
      "value": 13.371,
      "type": "crypto"
},
    "ltc": {
      "name": "Litecoin",
      "unit": "LTC",
      "value": 372.614,
      "type": "crypto"
    }

   }

엄청난! 이 항목은 실제로 올바른 순서로 되어 있습니다.

앞을 내다보며

이 접근 방식의 정말 멋진 점 중 하나는 어떤 중첩 필드(해당 필드가 얼마나 중첩되어 있든 상관 없음)와 원하는 정렬 규칙에 따라 json 객체를 정렬할 수 있다는 것입니다.

중첩된 "이름"필드를 기준으로 같은 개체를 사전순으로 정렬하시겠습니까? 문제 없어요. 간단히 cntrl+f를 누르고 "value"문자열을 "name"문자열로 바꾸고 정렬 규칙을 바꾸십시오.

sortArray = sortArray.sort((a,b) => a-b)

~와 함께

sortArray = sortArray.sort()

기능으로

물론, 우리가 직면할 수 있는 미래의 모든 상황을 처리할 수 있는 재사용 가능한 함수로 컴파일할 수 없다면 이 알고리즘을 작성할 수 있다는 것이 무슨 소용이 있겠습니까?

함수로 표현된 이 알고리즘을 살펴보겠습니다. 이 알고리즘은 (a) 정렬되지 않은 원본 객체, (b) 정렬하려는 중첩 필드의 키 값 및 (c) 정렬 함수를 인수로 사용합니다. 정렬된 객체를 반환합니다.

function sortByValue(obj, value, sortFunction){
    let sortArray = []
    let newOBJ = {}

    //add values, in the order they are in now, to sortArray
    Object.keys(obj).map(key=>{
        sortArray.push(obj[key][value])}
        )

    //Perform the sortFunction
    sortFunction(sortArray)

    //Cross-iterate sortArray with original object and populate the new Object
    for (let i in sortArray){
        for (let j in obj ){
            if (obj[j][value] === sortArray[i]){
                newOBJ[j] = obj[j]}
            }
        } 
    return newOBJ
}

위의 함수는 정렬 키가 개체에서 1개의 중첩 깊이인 경우에만 작동한다는 점에 유의해야 합니다. 그러나 이것이 다른 상황을 처리하기 위해 어떻게 확장될 수 있는지 쉽게 알 수 있습니다.

이것으로 블로그 포스팅을 마칩니다. 안녕!