키 / 값 자바 스크립트 객체의 키를 얻는 가장 좋은 방법


185

다음과 같은 JS 객체가있는 경우 :

var foo = { 'bar' : 'baz' }

나는 그것이 알고 있다면 foo그 기본 키 / 값 구조를 가지고 있지만 키의 이름을 모르는 그것을 얻을 수있는 가장 쉬운 방법은 무엇입니까? for ... in? $.each()? 더 좋은 것이 있기를 바랍니다 ....


5
...에서 무엇이 잘못 되었나요?
Matt

1
간접적으로 느껴지고 hasOwnProperty를 사용해야합니다. 나는 그것을 수행하는 라이브러리 함수를 만들 것 같다 ....
sprugman

답변:


93

모든 키를 얻으려면 ECMAScript 5가 도입되었습니다Object.keys . 이것은 최신 브라우저에서만 지원되지만 MDC 설명서 는 대체 구현 ( for...inbtw 도 사용 )을 제공합니다.

if(!Object.keys) Object.keys = function(o){
     if (o !== Object(o))
          throw new TypeError('Object.keys called on non-object');
     var ret=[],p;
     for(p in o) if(Object.prototype.hasOwnProperty.call(o,p)) ret.push(p);
     return ret;
}

물론 키와 가치를 모두 원한다면 for...in유일한 솔루션입니다.


p열쇠를 주지만 열쇠의 가치는 어떻게 얻습니까? 감사.
Si8

1
키와 값 모두에 대해 새로운 Object.entries () developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…를
Kzqai

아마도 내 이해가 제한되어 있음을 나타내는 것일 수도 있지만이 대답은 키 / 값을 얻는 것만 큼 간단한 것에 대해 매우 장황하게 보입니다 (물론 재사용 가능). @Michael Benin의 답변이 최고의 답변으로 표시되어서는 안됩니까?
Aaron Matthews

7
음 ... 첫 번째 링크를 클릭 한 다른 사람이 익명의 마약으로 리디렉션됩니까?
존 더 스킨

193

for 루프를 사용하여 객체 내부를 반복합니다.

for(var i in foo){
  alert(i); // alerts key
  alert(foo[i]); //alerts key's value
}

또는

Object.keys(foo)
  .forEach(function eachKey(key) { 
    alert(key); // alerts key 
    alert(foo[key]); // alerts value
  });

내가이 원하지 않는 경우 foo[i]"_proto_"?
user2284570


내가 경고에 무엇을 원하지 않는 경우 () foo[i]경우가 i있다 some string?
user2284570

@ user2284570 : 나는 문자열이 될 수 있습니다-문제 없습니다.
Gerfried

당신은 (내가 Object.keys에서 VAR (foo는))에 대한 의미하지 않는다 {
사무라이 잭

103

다음과 같이 반복하지 않고 각 키에 개별적으로 액세스 할 수 있습니다.

var obj = { first: 'someVal', second: 'otherVal' };
alert(Object.keys(obj)[0]); // returns first
alert(Object.keys(obj)[1]); // returns second

3
이제이 목적으로 스프레드 연산자를 사용할 수 있습니다. const [firstKey, ...rest] = Object.keys(obj);
Nerlin

65

주어진 객체 :

var foo = { 'bar' : 'baz' }

를 얻으려면 다음 bar을 사용하십시오.

Object.keys(foo)[0]

를 얻으려면 다음 baz을 사용하십시오.

foo[Object.keys(foo)[0]]

단일 객체 가정


27

하나 라이너 당신을 위해 :

const OBJECT = {
    'key1': 'value1',
    'key2': 'value2',
    'key3': 'value3',
    'key4': 'value4'
};

const value = 'value2';

const key = Object.keys(OBJECT)[Object.values(OBJECT).indexOf(value)];

window.console.log(key); // = key2

26

가장 간단하고 쉬운 방법입니다. 이것이 우리가 이것을하는 방법입니다.

var obj = { 'bar' : 'baz' }
var key = Object.keys(obj)[0];
var value = obj[key];
     
 console.log("key = ", key) // bar
 console.log("value = ", value) // baz
Object.keys ()는 객체를 사용할 때 키 배열을 반환하는 자바 스크립트 메서드입니다.

Object.keys(obj) // ['bar']

이제 객체를 반복하고 아래와 같은 값에 액세스 할 수 있습니다.

Object.keys(obj).forEach( function(key) {
  console.log(obj[key]) // baz
})

TypeError키가 숫자가 될 것으로 예상되면 얻을 수 있습니다 . 키는 항상 문자열이기 때문에.
녹색

15

나는 같은 문제가 있었고 이것이 효과가 있었다.

//example of an Object
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

//How to access a single key or value
var key = Object.keys(person)[0];
var value = person.firstName;

11
왜 안돼 var value = person[key];? 그렇게하면 끌어 내고자하는 가치의 열쇠를 알 필요가 없습니다.
Sean Kendle

14
// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}

MDN 참조


9

이외의 다른 항목은 없습니다 for (var key in foo).


5

가장 쉬운 방법은 Underscore.js를 사용하는 것입니다.

열쇠

_.keys (object) 객체 속성의 모든 이름을 검색합니다.

_.keys ({1 : 1, 2 : 2, 3 : 3}); => [ "1", "2", "3"]

예, 추가 라이브러리가 필요하지만 너무 쉽습니다!


4
@lonesomeday는 그렇습니다.하지만 밑줄 / 대쉬는 다른 많은 방법으로 유용하므로 가져올 가치가 있습니다.
jcollum

4

이외의 다른 방법은 없습니다 for ... in. 그것을 사용하고 싶지 않다면 (아마도 hasOwnProperty각 반복 에서 테스트 해야하는 것이 비효율적 입니까?) 다른 구성을 사용하십시오 (예 : kvp 배열).

[{ key: 'key', value: 'value'}, ...]

4

을 언급 $.each()했으므로 jQuery 1.6 이상에서 작동하는 편리한 방법이 있습니다.

var foo = { key1: 'bar', key2: 'baz' };

// keys will be: ['key1', 'key2']
var keys = $.map(foo, function(item, key) {
  return key;
});

4

Object.keys () Object.keys () 메소드는 for ... in 루프에서 제공 한 것과 동일한 순서로 주어진 객체의 자체 열거 가능 속성의 배열을 반환합니다 (차이 for 루프는 속성을 열거한다는 점). 프로토 타입 체인에서도).

var arr1 = Object.keys(obj);

Object.values ​​() Object.values ​​() 메소드는 for ... in 루프에서 제공 한 것과 동일한 순서로 주어진 객체의 자체 열거 가능 속성 값의 배열을 반환합니다 (차이는 for-in 루프가 열거한다는 점). 프로토 타입 체인의 속성).

var arr2 = Object.values(obj);

자세한 내용은 여기 로 이동 하십시오


3

자바 스크립트에서 객체 또는 맵의 키에 액세스하기 위해 각 루프에 사용

for(key in foo){
   console.log(key);//for key name in your case it will be bar
   console.log(foo[key]);// for key value in your case it will be baz
}

참고 : 사용할 수도 있습니다

Object.keys (foo);

다음과 같이 출력됩니다.

[바];



1

Object.keys 기능을 사용하여 다음과 같은 키를 얻을 수 있습니다.

const tempObjects={foo:"bar"}

Object.keys(tempObjects).forEach(obj=>{
   console.log("Key->"+obj+ "value->"+tempObjects[obj]);
});

0

문자열로 표시하려면 다음을 사용하십시오.

console.log("they are: " + JSON.stringify(foo));

0

객체의 키 / 값을 얻는 가장 좋은 방법.

let obj = {
        'key1': 'value1',
        'key2': 'value2',
        'key3': 'value3',
        'key4': 'value4'
    }
    Object.keys(obj).map(function(k){ 
    console.log("key with value: "+k +" = "+obj[k])    
    
    })
    

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.