Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript에서 객체의 열거 가능한 속성 값을 배열로 반환하는 방법

객체에서 키와 값을 가져오는 다양한 방법이 있지만, 대부분의 메서드는 결과를 배열 형태로 반환하지 않습니다. 그러나 실무에서는 값을 배열로 다루어야 하는 경우가 매우 많습니다. JavaScript는 이러한 요구를 해결하기 위해 Object.values() 메서드를 제공하며, 이 메서드는 객체의 열거 가능한(enumerable) 속성 값들을 요소로 가지는 배열을 반환합니다.

문법

Object.values(obj);

이 메서드는 인자로 객체를 전달받고, 해당 객체의 속성 값들로 구성된 배열을 반환합니다.

예제 1

다음 예제에서는 객체를 Object.values() 메서드에 전달하여 속성 값들이 배열 형태로 출력되는 것을 확인할 수 있습니다. 또한 Array.isArray()를 사용해 반환된 결과가 실제 배열인지 검증합니다.

<html>
<body>
<script>
   var obj = {"one":1,"two": 2,"three": 3};
   document.write(Array.isArray(Object.values(obj)));
   document.write("</br>");
document.write(Object.values(obj));
</script>
</body>
</html>

출력 결과

true
1,2,3

예제 2

다음 예제에서는 문자열과 숫자가 섞여 있는 객체를 Object.values() 메서드에 전달합니다. 반환된 값이 배열인지 여부를 Array.isArray()로 확인하고, 모든 속성 값이 배열 요소로 출력됩니다.

<html>
<body>
   <script>
      var object = {"name":"Elon","company":"Tesla","age":"47","property":"1 Billion dollars"};
      document.write(Array.isArray(Object.values(object)));
      document.write("</br>");
      document.write(Object.values(object));
   </script>
</body>
</html>

출력 결과

true
Elon,Tesla,47,1 Billion dollars

정리

Object.values()는 ES2017(ES8)에서 도입된 메서드로, 객체를 순회하며 자체 열거 가능한 속성 값만 추출합니다. 상속된 속성이나 심볼(Symbol) 키는 포함되지 않으며, 반환된 배열은 map, filter, forEach 등 배열 메서드를 바로 사용할 수 있어 데이터 처리에 매우 유용합니다.