Object.values() not working ie11 해결방법

다음과 같은 배열이 있다고 해볼까요?

const testObject= {

  test1: '안녕하세요 1',

  test2: '안녕하세요 2',

  test3: '안녕하세요 3',

  test4: '안녕하세요 4',

  test5: '안녕하세요 5'

};

 

이 배열을 key와 value로 나누고 싶다면 어떻게 해야할까요?

아래처럼 결과가 나오도록 하려면요.

 

> Array [ "test1", "test2", "test3", "test4", "test5"] 

 

> Array [ "안녕하세요 1", "안녕하세요 2", "안녕하세요 3", "안녕하세요 4", "안녕하세요 5" ]

 

 

Object.keys() 메서드는 객체의 key 배열을 반환해주는데요.

 

console.log( Object.keys(testObject) )

 

// > Array [ "test1", "test2", "test3", "test4", "test5"]

 

Object.values() 메서드는 객체의 값들로 이루어진 배열을 반환합니다.

console.log( Object.values(testObject) )

// > Array [ "안녕하세요 1", "안녕하세요 2", "안녕하세요 3", "안녕하세요 4", "안녕하세요 5"]

 

하지만 아쉽게도 Object.values()는 ie를 지원하지 않습니다.

 

(출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/values)

 

ie는 이제 지원도 안하는데 ie 쓰는 고객사 사이트들은 왜 이리 많은 것인지...

유독 한국에서는 ie를 쓰는 분들이 많은 것 같아요

 

거두절미하고 배열의 값들을 반환하려면 Object.keys와 .map을 활용해서 반환 할 수 있습니다.

 

const getValues = Object.keys(testObject).map(function(i) {

  return testObject[i];

});

 

IE를 지원하지 않는다면 위의 방법으로 , IE는 고려하지 않고 기타 브라우저에서만 돌아가면 된다 하시는 분들은 

Object.values()방법이나 , Object.entries() 를 사용하시면 됩니다.

 

• Object.entries()

for ... in 과 같은 순서로 주어진 [ key, value ] 쌍의 배열을 반환합니다.

const testObject= {

  test1: '안녕하세요 1',

  test2: '안녕하세요 2',

  test3: '안녕하세요 3',

  test4: '안녕하세요 4',

  test5: '안녕하세요 5'

};

 

for( const [key, value] of Object.entries(testObject)) {

    console.log(`${key}, ${value}`);

}