객체 키 배열 가져 오기


371

jQuery 또는 순수 JavaScript에서 JavaScript 객체의 키를 배열로 가져 오려고합니다.

이것보다 덜 장황한 방법이 있습니까?

var foo = { 'alpha' : 'puffin', 'beta' : 'beagle' };
var keys = [];
for (var key in foo) {
    keys.push(key);
}

4
를 추가하는 것 외에도 if(foo.hasOwnProperty(key))그게 내가 할 일입니다. 또는을 사용하십시오 $.map.
로켓 Hazmat

10
그래도 파이썬적인 한 줄짜리의 경우 ...
Richard

전체 답변의 가치가없는 오래된 질문이지만 피들 하려는 사람들을 위해 ... jsfiddle.net/LR5D9/3 이 솔루션은 for var in x루프를 엉망으로 만드는 프로토 타입 선언 문제를 처리합니다
동기화되지

답변:


618

사용 Object.keys:

var foo = {
  'alpha': 'puffin',
  'beta': 'beagle'
};

var keys = Object.keys(foo);
console.log(keys) // ['alpha', 'beta'] 
// (or maybe some other order, keys are unordered).

이것은 ES5 기능입니다. 이는 모든 최신 브라우저에서 작동하지만 기존 브라우저에서는 작동하지 않음을 의미 합니다 .

ES5- 심은 훔칠 수 있는 구현을 가지고 있습니다Object.keys


5
참고 : 이것은 최신 브라우저에서만 작동합니다 (IE <9가 아님).
로켓 Hazmat

2
그리고 모바일 브라우저는 어떻습니까?
Marwen Trabelsi

1
@SmartyTwiti : 잘 모르겠습니다. Chrome이나 Firefox와 같은 것으로 가정합니다.
로켓 Hazmat

MDN은 또한 위에서 언급 한 Polyfill을 가지고 있지만 IE7 및 8에서 버그를 지적한 후 훨씬 짧은 Polyfill을 참조하십시오. tokenposts.blogspot.com.au/2012/04/…
Campbeln

그렇다면 ES5 이전에는 어떻게 했습니까?
Andrew S

59

jQuery를 사용할 수 있습니다 $.map.

var foo = { 'alpha' : 'puffin', 'beta' : 'beagle' },
keys = $.map(foo, function(v, i){
  return i;
});

또는 each당신이 그들과 무언가를하고 있다면. $.each(foo, function(index, value){/* do something with index */});
크리스

33

물론, Object.keys()은 IS 최고의 개체의 키를 얻을 수있는 방법입니다. 환경에서 사용할 수없는 경우 예제와 같은 코드를 사용하여 사소하게 shim 할 수 있습니다 (단, Object.keys()동작을 달리하여 루프가 프로토 타입 체인의 모든 속성을 반복해야한다는 점을 제외하면 ).

그러나 예제 코드는 ...

var foo = { 'alpha' : 'puffin', 'beta' : 'beagle' };
var keys = [];
for (var key in foo) {
    keys.push(key);
}

jsFiddle .

... 수정 될 수 있습니다. 변수 부분 에서 바로 할당을 수행 할 수 있습니다 .

var foo = { 'alpha' : 'puffin', 'beta' : 'beagle' };
var keys = [], i = 0;
for (keys[i++] in foo) {}

jsFiddle .

물론이 동작은 Object.keys()실제로 하는 것과 다릅니다 ( jsFiddle ). MDN 문서에서 간단히 shim을 사용할 수 있습니다 .


8
var keys = [], i = 0; for (keys[i++] in foo) {}+1을 좋아했습니다
Jashwant

"for in"이 순서를 보장하지 않는다고 들었습니다. Object.keys가 알고 있는지 알고 있습니까?
Chris Stephens

@ChrisStephens 키가 정렬 된 배열로 되어도 순서를 보장 할 수 없습니다.
alex

2
이 모든 솔루션을 hasOwnProperty()반드시 확인 해야 합니까?
동기화되지 않은

1
@TIMINeutron 이유가 없어야 할 이유가 없습니다. :)
alex

7

나는 덜 장황한 것은 알지 못하지만 한 줄짜리 요청으로 다음 줄을 한 줄로 강요하도록 영감을 얻었습니다. 파이썬이 얼마나되는지 모르겠습니다.)

var keys = (function(o){var ks=[]; for(var k in o) ks.push(k); return ks})(foo);

3
아마 그럴지도 모른다 var enumerableKeysOnThePrototypeChain;)
alex

1
어딘가에서 가져 오는 대신 오브젝트가 우리의 관점에서 완전히 생성된다면 hasOwnProperty에 대해 걱정할 필요가 없다는 것을 알기에 충분히 똑똑 할 것입니다.
Dexygen

for (keys[i++] in foo) {}그래도 @alex의 두 번째 답변 ( ) 만큼 파이썬이 아닙니다. 여전히 수행하고 있기 때문에 Array.push()(전체 기능을 선언하는 것은 말할 것도 없습니다). pythonic 구현은 람다 식을 사용하여 가능한 한 암묵적인 이해에 의존하고 실패합니다.
cowbert

4

n- 깊이 중첩 된 객체의 키를 평면 배열로 나열 할 무언가를 찾고있는 경우 :

const getObjectKeys = (obj, prefix = '') => {
  return Object.entries(obj).reduce((collector, [key, val]) => {
    const newKeys = [ ...collector, prefix ? `${prefix}.${key}` : key ]
    if (Object.prototype.toString.call(val) === '[object Object]') {
      const newPrefix = prefix ? `${prefix}.${key}` : key
      const otherKeys = getObjectKeys(val, newPrefix)
      return [ ...newKeys, ...otherKeys ]
    }
    return newKeys
  }, [])
}

console.log(getObjectKeys({a: 1, b: 2, c: { d: 3, e: { f: 4 }}}))


1

요약

Object의 모든 키를 얻기 위해 사용할 수 있습니다 Object.keys(). Object.keys()객체를 인수로 사용하고 모든 키의 배열을 반환합니다.

예:

const object = {
  a: 'string1',
  b: 42,
  c: 34
};

const keys = Object.keys(object)

console.log(keys);

console.log(keys.length) // we can easily access the total amount of properties the object has

위의 예제에서 우리는 키 배열에 키 배열을 저장합니다. 그런 다음 키 배열의 길이를 확인하여 객체의 속성 양에 쉽게 액세스 할 수 있습니다.

다음을 사용하여 값 가져 오기 : Object.values()

의 보완 함수는 Object.keys()입니다 Object.values(). 이 함수는 객체를 인수로 사용하고 값의 배열을 반환합니다. 예를 들면 다음과 같습니다.

const object = {
  a: 'random',
  b: 22,
  c: true
};


console.log(Object.values(object));


1

Underscore.js를 사용하기로 결정한 경우 더 잘 수행하십시오.

var foo = { 'alpha' : 'puffin', 'beta' : 'beagle' };
var keys = [];
_.each( foo, function( val, key ) {
    keys.push(key);
});
console.log(keys);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.