투케이2K

512. (javaScript) [간단 소스] 자바스크립트 Object.fromEntries 사용해 json 객체 특정 value 값 기준 필터링 및 value 값 기준 정렬 수행 본문

JavaScript

512. (javaScript) [간단 소스] 자바스크립트 Object.fromEntries 사용해 json 객체 특정 value 값 기준 필터링 및 value 값 기준 정렬 수행

투케이2K 2026. 3. 17. 19:13
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / Object.fromEntries


- 사전) 👉 Object.fromEntries 간력 설명 : 

  >> Object.fromEntries() 는 키-값 쌍의 리스트(Iterable)를 하나의 객체(Object)로 변환하는 자바스크립트 함수입니다.

  >> Object.fromEntries() 는 ES2019(ES10)에서 도입된 기능이고, Map, 배열, 또는 다른 iterable 데이터를 객체로 바꿀 때 매우 유용하게 쓰입니다.

  >> Object.fromEntries() 를 통해 입력 받을 수 있는 데이터 : 

    - 배열 [ [key, value], [key, value], ... ]
    - Map 객체
    - Generator 함수가 생성한 key-value 쌍
    - 기타 iterable

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- [CDN 주소 설정] -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">
        
        window.onload = async function() {
          console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

          try {

            // --------------------------------------------
            // [샘플 json 데이터 생성]
            // --------------------------------------------
            const scores = {
              a: 90,
              b: 100,
              c: 70
            };


            // --------------------------------------------
            // ✅ [Object.fromEntries() 사용해 값 필터링 수행 (특정 조건만 남기기)]
            // --------------------------------------------            
            const filtered = Object.fromEntries(
              Object.entries(scores).filter(([, v]) => v >= 80) // 80 이상 필터링
            );

            console.log('filtered : ', JSON.stringify(filtered)); // {"a":90,"b":100}


            // --------------------------------------------
            // ✅ [Object.fromEntries() 사용해 값 변환 (매핑) 수행]
            // --------------------------------------------                        
            const doubled = Object.fromEntries(
              Object.entries(scores).map(([k, v]) => [k, v * 2]) // 곱하기 2 수행
            );

            console.log('doubled : ', JSON.stringify(doubled)); // {"a":180,"b":200,"c":140}


            // --------------------------------------------
            // ✅ [Object.fromEntries() 사용해 value 기준 정렬 수행]
            // --------------------------------------------             
            const descSorted = Object.fromEntries(
              Object.entries(scores).sort(([, v1], [, v2]) => v2 - v1) // 내림 차순 : 큰 순서
            );

            console.log('descSorted : ', JSON.stringify(descSorted)); // {"b":100,"a":90,"c":70}

            const ascSorted = Object.fromEntries(
              Object.entries(scores).sort(([, v1], [, v2]) => v1 - v2) // 오름 차순 : 작은 순서
            );

            console.log('ascSorted : ', JSON.stringify(ascSorted)); // {"c":70,"a":90,"b":100}
            
          }
          catch (exception) {
            console.error("[window onload] : [Exception] : 예외 상황 발생 : ", exception);

          }

        };

    </script>


</head>


<body>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[간단 소스] 자바스크립트 Object.entries 사용해 json 에 저장 된 key , value 값 동시 출력 수행

https://kkh0977.tistory.com/8699

https://blog.naver.com/kkh0977/224218640323


[간단 소스] 자바스크립트 Object.keys 사용해 json 에 저장 된 key 키 포함 및 개수 확인 및 for 문 key , value 출력

https://kkh0977.tistory.com/8691

https://blog.naver.com/kkh0977/224214219987


[자바스크립트 json string 문자열 데이터 JSON.parse 사용해 model 객체에 매핑 수행]

https://kkh0977.tistory.com/5055

https://blog.naver.com/kkh0977/223304887680?trackingCode=blog_bloghome_searchlist


[json 특정 key 포함 확인 및 데이터 출력 실시 - hasOwnProperty , for in]

https://kkh0977.tistory.com/1092

https://blog.naver.com/kkh0977/222461468315?trackingCode=blog_bloghome_searchlist


[JsonArray 에 담긴 JsonObject 객체 파싱해 특정 idx (순서) 로 정렬 실시]

https://kkh0977.tistory.com/876

https://blog.naver.com/kkh0977/222399966146?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

514. (javaScript) [간단 소스] 자바스크립트 string 문자열 형식 동적 자바 스크립트 코드 작성 및 import 모듈 로딩 , 소스 코드 실행  (0) 2026.03.19
513. (javaScript) [간단 소스] 자바스크립트 new Map 맵 객체 생성 및 기본 사용 방법 정리 - set , get , delete , has , clear  (0) 2026.03.18
511. (javaScript) [간단 소스] 자바스크립트 Object.entries 사용해 json 에 저장 된 key , value 값 동시 출력 수행  (0) 2026.03.16
510. (javaScript) [간단 소스] 자바스크립트 커스텀 json key 정렬 함수 생성 및 string , number , date 타입 asc , desc 정렬 수행  (0) 2026.03.13
509. (javaScript) [간단 소스] 자바스크립트 Object.keys 사용해 json 에 저장 된 key 키 포함 및 개수 확인 및 for 문 key , value 출력  (0) 2026.03.12
'JavaScript' Related Articles more
Comments