개별 데이터 구조에서 벗어나 그에 대한 반복에 대해 이야기해 보겠습니다.
이전 장에서 우리는 map.keys()
, map.values()
, map.entries()
메소드를 보았습니다.
이러한 방법은 일반적이며 데이터 구조에 사용하는 데 공통된 합의가 있습니다. 우리 자신만의 데이터 구조를 만든다면, 우리도 이를 구현해야 합니다.
다음과 같은 경우에 지원됩니다.
Map
Set
Array
일반 객체도 비슷한 메서드를 지원하지만 구문이 약간 다릅니다.
일반 객체의 경우 다음 방법을 사용할 수 있습니다.
Object.keys(obj) – 키 배열을 반환합니다.
Object.values(obj) – 값 배열을 반환합니다.
Object.entries(obj) – [key, value]
쌍의 배열을 반환합니다.
차이점에 유의하세요(예를 들어 지도와 비교).
지도 | 물체 | |
---|---|---|
호출 구문 | map.keys() | Object.keys(obj) , 그러나 obj.keys() 는 아님 |
보고 | 반복 가능한 | "실제" 배열 |
첫 번째 차이점은 obj.keys()
가 아닌 Object.keys(obj)
) 를 호출해야 한다는 것입니다.
왜 그렇습니까? 가장 큰 이유는 유연성입니다. 객체는 JavaScript의 모든 복잡한 구조의 기반이라는 점을 기억하세요. 따라서 우리는 자체 data.values()
메서드를 구현하는 data
와 같은 자체 객체를 가질 수 있습니다. 그리고 여전히 Object.values(data)
호출할 수 있습니다.
두 번째 차이점은 Object.*
메서드가 반복 가능한 개체가 아닌 "실제" 배열 개체를 반환한다는 것입니다. 그것은 주로 역사적인 이유 때문입니다.
예를 들어:
사용자 = { 이름: "존", 나이: 30 };
Object.keys(user) = ["name", "age"]
Object.values(user) = ["John", 30]
Object.entries(user) = [ ["name","John"], ["age",30] ]
다음은 속성 값을 반복하기 위해 Object.values
사용하는 예입니다.
사용자 = { 이름: "존", 나이: 30 }; // 값을 반복합니다. for (Object.values(user)의 값을 알려주세요) { 경고(값); // 존, 당시 30세 }
Object.keys/values/entries는 기호 속성을 무시합니다.
for..in
루프와 마찬가지로 이러한 메서드는 Symbol(...)
키로 사용하는 속성을 무시합니다.
보통 그게 편해요. 그러나 기호 키도 원하는 경우 기호 키만 배열로 반환하는 별도의 Object.getOwnPropertySymbols 메서드가 있습니다. 또한 모든 키를 반환하는 Reflect.ownKeys(obj) 메서드가 있습니다.
객체에는 배열에 존재하는 많은 메서드(예: map
, filter
등)가 부족합니다.
이를 적용하려면 Object.entries
다음에 Object.fromEntries
를 사용할 수 있습니다.
Object.entries(obj)
사용하여 obj
에서 키/값 쌍의 배열을 가져옵니다.
이러한 키/값 쌍을 변환하려면 해당 배열에 대해 배열 메서드(예: map
를 사용하세요.
결과 배열에 Object.fromEntries(array)
사용하여 다시 객체로 전환합니다.
예를 들어, 가격이 포함된 개체가 있고 이를 두 배로 늘리고 싶습니다.
가격 = { 바나나: 1, 주황색: 2, 고기: 4, }; doublePrices = Object.fromEntries( // 가격을 배열로 변환하고 각 키/값 쌍을 다른 쌍으로 매핑합니다. // 그런 다음 fromEntries가 객체를 반환합니다. Object.entries(가격).map(항목 => [항목[0], 항목[1] * 2]) ); 경고(doublePrices.meat); // 8
처음에는 어려워 보일 수도 있지만 한두 번 사용해보면 이해하기 쉬워집니다. 이런 식으로 강력한 변환 체인을 만들 수 있습니다.
중요도: 5
임의의 급여 수를 갖는 salaries
개체가 있습니다.
Object.values
와 for..of
루프를 사용하여 모든 급여의 합계를 반환하는 함수 sumSalaries(salaries)
작성하세요.
salaries
비어 있으면 결과는 0
이어야 합니다.
예를 들어:
급여 = { "존": 100, "피트": 300, "메리": 250 }; 경고( sumSalaries(salaries) ); // 650
테스트를 통해 샌드박스를 엽니다.
함수 sumSalaries(급여) { 합계 = 0으로 둡니다. for (Object.values(salaries)의 급여를 설정) { 합계 += 급여; } 반환 금액; // 650 } 급여 = { "존": 100, "피트": 300, "메리": 250 }; 경고( sumSalaries(salaries) ); // 650
또는 선택적으로 Object.values
및 reduce
사용하여 합계를 얻을 수도 있습니다.
// 급여 배열에 대한 루프를 줄이고, // 더하기 // 결과를 반환합니다. 함수 sumSalaries(급여) { return Object.values(salaries).reduce((a, b) => a + b, 0) // 650 }
샌드박스에서 테스트를 통해 솔루션을 엽니다.
중요도: 5
객체의 속성 수를 반환하는 함수 count(obj)
작성하세요.
사용자 = { 이름: '존', 나이: 30 }; 경고(개수(사용자)); // 2
코드를 최대한 짧게 만드세요.
PS 기호 속성을 무시하고 "일반" 속성만 계산합니다.
테스트를 통해 샌드박스를 엽니다.
함수 개수(obj) { return Object.keys(obj).length; }
샌드박스에서 테스트를 통해 솔루션을 엽니다.