개체에서 다차원 배열 만들기

JavaScript에는 사용자가 눈치채지 못하는 사이에 지나갈 수 있는 풍부한 내장 메서드가 있습니다.

이 짧은 자습서에서는 객체에서 다차원 배열을 구성하기 위해 내장된 메서드를 사용하는 방법을 살펴보겠습니다.

먼저 다음과 같은 객체가 있다고 가정해 보겠습니다.

const cart = {
  phone: {
    brand: "Techno Camon 18",
    price: "Sh. 25000",
  },
  shoes: {
    brand: "Oxford",
    price: "Sh. 18000",
  },
  jeans: {
    brand: "Levis",
    price: "Sh. 2000",
  },
};

위 스니펫에는 제품에 해당하는 세 개의 키가 있는 cart라는 객체가 있습니다. 이러한 각 키는 객체를 값으로 보유합니다.

각 개체의 값에는 a brand 및 price 의 두 가지 속성이 포함됩니다.

엄청난! 이제 우리가 원하는 것은 cart 객체의 다차원 배열을 만드는 것입니다.

해보자

let cartAsArray = Object.entries(cart);

console.log(cartAsArray);
/* => [
    [
        "phone",
        {
            "brand": "Techno Camon 18",
            "price": "Sh. 25000"
        }
    ],
    [
        "shoes",
        {
            "brand": "Oxford",
            "price": "Sh. 18000"
        }
    ],
    [
        "jeans",
        {
            "brand": "Levis",
            "price": "Sh. 2000"
        }
    ]
]*/

위 스니펫에서는 Object.entries() 메서드를 사용하여 객체cart를 다차원 배열로 변환했습니다.

보시다시피 각각 두 개의 요소가 있는 세 개의 배열이 있습니다. 첫 번째 요소는 항목 이름이고 두 번째 요소는 브랜드와 가격을 포함하는 개체입니다.

사용 사례

객체를 반복하려는 경우 객체 키를 반복하는 for...in 루프를 쉽게 사용할 수 있습니다.

그러나 특정 방식으로 항목을 주문하고 싶은 경우 Object.entries()가 매우 도움이 될 수 있습니다..

예를 들어 장바구니 항목을 알파벳순으로 주문하고 싶다고 가정해 보겠습니다.

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

let orderedCartItems = Object.entries(cart).sort();
console.log(orderedCartItems);
/* => [
    [
        "jeans",
        {
            "brand": "Levis",
            "price": "Sh. 2000"
        }
    ],
    [
        "phone",
        {
            "brand": "Techno Camon 18",
            "price": "Sh. 25000"
        }
    ],
    [
        "shoes",
        {
            "brand": "Oxford",
            "price": "Sh. 18000"
        }
    ]
] */

멋지네요

보시다시피 다차원 배열에서 Array.prototype.sort() 메서드를 호출하여 카트 항목을 사전순 및 오름차순으로 정렬할 수 있습니다.

내 물건을 되찾고 싶으면 어떻게 합니까?

개체를 다시 갖고 싶은 경우가 있습니다. 나는 그것을 얻었고 여기에 당신이 기동할 수 있는 방법이 있습니다.

cart = Object.fromEntries(orderedCartItems);
console.log(cart);
/* => {
    "jeans": {
        "brand": "Levis",
        "price": "Sh. 2000"
    },
    "phone": {
        "brand": "Techno Camon 18",
        "price": "Sh. 25000"
    },
    "shoes": {
        "brand": "Oxford",
        "price": "Sh. 18000"
    }
}
*/

봤어? 예, 개체를 되찾았지만 이번에는 알파벳순으로 정렬되어 있습니다.

이러한 기술을 창의적으로 사용할 수 있다는 것을 알고 있지만 위에 제공된 예는 데모용일 뿐입니다.

주요 테이크아웃

Object.entries() 메서드를 사용하여 개체를 다차원 배열로 변환할 수 있습니다.

다차원 배열

에서 Object.fromEntries()를 호출하여 객체로 되돌릴 수 있습니다.

어떤 경우에 이것이 유용하다고 생각하십니까?