Javascript 객체의 첫 번째 속성에 액세스하는 방법은 무엇입니까?


611

객체의 첫 번째 속성에 액세스하는 우아한 방법이 있습니까?

  1. 당신이 당신의 재산의 이름을 모르는 곳
  2. for .. injQuery 와 같은 루프를 사용하지 않고$.each

예를 들어, foo1foo1의 이름을 모르고 객체 에 액세스해야합니다 .

var example = {
    foo1: { /* stuff1 */},
    foo2: { /* stuff2 */},
    foo3: { /* stuff3 */}
};

1
먼저 배열로 변환하는 것이 좋습니다
cregox

답변:


1392
var obj = { first: 'someVal' };
obj[Object.keys(obj)[0]]; //returns 'someVal'

이를 사용하면 인덱스별로 다른 속성에도 액세스 할 수 있습니다. tho를 조심하십시오! Object.keysECMAScript에 따라 반환 순서가 보장되는 것은 아니지만 비공식적으로 모든 주요 브라우저 구현 에 의한 것입니다. 이에 대한 자세한 내용은 https://stackoverflow.com/a/23202095 를 참조하십시오.


25
당신은 그것이 가장 빠른 방법이 아니라고 말합니다. 어떤 방법이 더 빠를까요?
T Nguyen

3
이것은 모든 객체 키의 전체 배열을 생성하므로 매우 효율적이지 않습니다.
Andrew Mao

9
내가 :) 그것을 알고 있다면 @T 구엔 나는 그것을 게시 할 것
그르 Kaczan

5
@DavChana-벤치 마크가 잘못 설정되었습니다. 상용구 블록이 항상 실행하고됩니다 블록 2는 첫 번째 결과를 의미 비어 것은 실행 나타냅니다 보일러 + 블록 1을 , 두 번째 결과 만 나타냅니다 상용구를 . 올바른 벤치 마크가 있습니다 : http://jsben.ch/#/R9aLQ , 그것들이 거의 동일 함을 보여줍니다 (테스트를 여러 번 실행).
myfunkyside

9
나는 first()이것을 처리 할 수 ​​있거나 비슷한 것이 있습니다.
Fr0zenFyr

113

for … in루프를 시도하고 첫 번째 반복 후에 중단하십시오.

for (var prop in object) {
    // object[prop]
    break;
}

1
나는 이것이 유일한 옵션이라고 생각합니다. 그래도 속성이 예측 가능하고 유용한 순서로 반복된다는 보장이 확실하지 않습니다. 즉, foo1을 의도하지만 foo3을 얻을 수 있습니다. 예와 같이 속성에 번호가 매겨져 있으면 문자열 비교를 수행하여 식별자가 '1'로 끝나는 것을 확인할 수 있습니다. 그런 다음 다시 서 수가 모음의 주요 관심사 인 경우 객체 대신 배열을 사용해야합니다.
steamer25 2016 년

2
다른 사람이 주문에 대해 우려하는 경우 대부분의 브라우저는 예상대로 작동합니다. stackoverflow.com/questions/280713/…
Flash

6
var prop; (객체에 소품) 휴식; // object [prop]
netiul 2016 년

12
오래된 대답이지만. 속성이 개체에 속하는지 확인할 수 있습니다. 처럼 : for (..) {if (! obj.hasOwnProperty (prop)) 계속; .... 휴식; } 객체가 실제로 비어있는 경우 프로토 타입이나 다른 것을 가로 지르지 않습니다.
pgarciacamou


46

Object.keys객체의 속성 배열을 가져 오는 데 사용 합니다. 예:

var example = {
    foo1: { /* stuff1 */},
    foo2: { /* stuff2 */},
    foo3: { /* stuff3 */}
};

var keys = Object.keys(example); // => ["foo1", "foo2", "foo3"] (Note: the order here is not reliable)

여기에 제공된 설명서 및 크로스 브라우저 심 . 그것의 사용의 예는 여기 내 대답 중 다른 하나에서 찾을 수 있습니다 .

편집 : 명확성을 위해 다른 답변에 올바르게 언급 된 내용을 에코하고 싶습니다. 자바 객체의 키 순서는 정의되어 있지 않습니다.


25

단일 규칙 버전 :

var val = example[function() { for (var k in example) return k }()];

2
개체에 프로그래밍 방식으로 추가 된 다른 원치 않는 값이 포함되어있어이 스 니펫에서 원치 않는 결과를 얻을 수 있으므로 for in검사하지 않고 사용하는 것이 위험 할 수 있습니다 hasOwnProperty. 짧고 깔끔하다는 것이 안전한 최적을 의미하지는 않습니다.
Javier Cobos

24

"첫번째"속성이 없습니다. 객체 키가 정렬되지 않았습니다.

위해와 그들에 당신이 루프 만약 (var foo in bar)당신이 그들을 얻을 것이다 어떤 순서지만 향후 변경 될 수 있습니다 (특히 추가하거나 다른 키를 제거하는 경우).


대박. 삽입 순서를 유지하는 맵을 구현하기 위해 객체를 사용하고 있습니다. 다음 삽입이 간격을 채우므로 값을 제거하면 중단됩니다. :(
David Harkness

2
키 / 값 순서는 최신 버전의 JS에서 유지되어야합니다
Alexander Mills

11

lodash 라이브러리가있는 솔루션 :

_.find(example) // => {name: "foo1"}

그러나 자바 스크립트 VM 구현에 의존하기 때문에 객체 속성 내부 스토리지 순서를 보장 할 수 없습니다.


2
방금 이것을 테스트했는데 작동하지 않습니다. 키 / 값 쌍이 아닌 값만 반환합니다.
Chris Haines

2
질문에 키 / 값 쌍을 반환해야한다는 언급은 없으며 단지 객체를 요청하고 허용 된 답변은이 lodash 함수만큼이나 중요합니다. 첫 번째 속성의 내용을 반환합니다. 귀하의 특정 요구에 맞지 않을 수도 있지만이 답변은 원래 질문에 근거하여 정확합니다.
Carrm

예 작업을 수행, 유용 당신은 당신의 목적은 단 하나의 자식 개체가 알고 때var object = { childIndex: { .. } }; var childObject = _.find(Object);
라자 쿠리

9

MDC 에서 정의한 객체 리터럴 은 다음과 같습니다.

중괄호 ({})로 묶여있는 0 개 이상의 속성 이름 쌍 및 개체의 관련 값 목록.

따라서 객체 리터럴은 배열이 아니며 명시적인 이름을 for사용하거나 in키워드를 사용하여 루프를 사용하여 속성에 액세스 할 수 있습니다 .


25
이 답변에 녹색 진드기 만 보이는 다른 사람들에게는 현재 350 개의 upvotes가있는 다른 솔루션이 있습니다.
redfox05

7

최고 답변은 전체 배열을 생성 한 다음 목록에서 캡처 할 수 있습니다. 또 다른 효과적인 지름길이 있습니다.

var obj = { first: 'someVal' };
Object.entries(obj)[0][1] // someVal

3

이것은 이전에 여기에서 다루어졌습니다.

first의 개념은 객체 속성에는 적용되지 않으며 for ... in 루프의 순서는 사양에 의해 보장되지 않지만 실제로는 크롬에 중요 하지 않은 경우를 제외하고 는 확실히 FIFO입니다 ( bug report ). 그에 따라 결정하십시오.


3

이전 IE 버전에서는 지원되지 않으므로 Object.keys를 사용하지 않는 것이 좋습니다. 그러나 실제로 필요한 경우 위 코드를 사용하여 이전 버전과의 호환성을 보장 할 수 있습니다.

if (!Object.keys) {
Object.keys = (function () {
var hasOwnProperty = Object.prototype.hasOwnProperty,
    hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
    dontEnums = [
      'toString',
      'toLocaleString',
      'valueOf',
      'hasOwnProperty',
      'isPrototypeOf',
      'propertyIsEnumerable',
      'constructor'
    ],
    dontEnumsLength = dontEnums.length;

return function (obj) {
  if (typeof obj !== 'object' && typeof obj !== 'function' || obj === null) throw new TypeError('Object.keys called on non-object');

  var result = [];

  for (var prop in obj) {
    if (hasOwnProperty.call(obj, prop)) result.push(prop);
  }

  if (hasDontEnumBug) {
    for (var i=0; i < dontEnumsLength; i++) {
      if (hasOwnProperty.call(obj, dontEnums[i])) result.push(dontEnums[i]);
    }
  }
  return result;
}})()};

Firefox (Gecko) 4 (2.0) Chrome 5 Internet Explorer 9 Opera 12 Safari 5 기능

추가 정보 : https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys

그러나 첫 번째 솔루션 만 필요한 경우 다음과 같은 더 짧은 솔루션을 마련 할 수 있습니다.

var data = {"key1":"123","key2":"456"};
var first = {};
for(key in data){
    if(data.hasOwnProperty(key)){
        first.key = key;
        first.content =  data[key];
        break;
    }
}
console.log(first); // {key:"key",content:"123"}

2

객체에서 첫 번째 키 이름을 얻으려면 다음을 사용할 수 있습니다.

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

문자열을 반환하므로 다음과 같은 경우 중첩 된 객체에 액세스 할 수 없습니다.

var obj = { first: { someVal : { id : 1} }; 이 솔루션을 사용하면 id에 액세스 할 수 없습니다.

실제 객체를 얻으려면 가장 좋은 해결책은 다음과 같이 lodash를 사용하는 것입니다.

obj[_.first(_.keys(obj))].id

첫 번째 키의 값을 반환하려면 (첫 번째 키 이름을 정확히 모르는 경우) :

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

키 이름을 알고 있다면 다음을 사용하십시오.

obj.first

또는

obj['first']

0

"객체의 첫 번째 속성"에 액세스해야하는 경우 논리에 문제가 있음을 의미 할 수 있습니다. 객체의 속성 순서는 중요하지 않습니다.


네가 옳아. 첫 번째 것은 필요하지 않지만 foo 속성 중 하나만 있으면 사용할 수 있습니다. 나는 단지 하나만 필요하고 ... in을 사용하지 않고 "첫 번째"것을 잡을 수있는 방법이 있는지 확실하지 않았습니다.
atogle

0

객체 (대괄호) 대신 배열을 사용하십시오.

var example = [ {/* stuff1 */}, { /* stuff2 */}, { /* stuff3 */}];
var fist = example[0];

'foo'식별자가 손실됩니다. 그러나 포함 된 객체에 이름 속성을 추가 할 수 있습니다.

var example = [ 
  {name: 'foo1', /* stuff1 */},
  {name: 'foo2', /* stuff2 */},
  {name: 'foo3', /* stuff3 */}
];
var whatWasFirst = example[0].name;

우리가 할 수없는 상황이 있습니다. 우리는 그들이 배열에 있지 않다는 사실을 바꿀 수 없다고 가정합니다
1mike12

1
JSON 스키마를 제어 할 수있는 독자에게는 약간의 디자인을 되 돌리는 것이 유용하다고 생각합니다. 본질적으로 Flavius ​​Stef의 답변을 몇 가지 예로 확장하고 있습니다.
steamer25

0

이것을하지 않는 이유는 무엇입니까?

> example.map(x => x.name);

(3) ["foo1", "foo2", "foo3"]

8
내장 된 iterable.map() 에만 존재하기 때문에
kano

0

Object.prototype.keyswhich 를 사용 하면 객체의 모든 키를 동일한 순서로 반환 할 수 있습니다 . 따라서 첫 번째 객체를 원하면 해당 배열을 가져오고 첫 번째 요소를 원하는 키로 사용하십시오.

const o = { "key1": "value1", "key2": "value2"};
const idx = 0; // add the index for which you want value
var key = Object.keys(o)[idx];
value = o[key]
console.log(key,value); // key2 value2

1
이전 질문에 대답 할 때 답변이 어떻게 도움이되는지를 설명하는 컨텍스트, 특히 이미 승인 된 질문이있는 질문에 대한 답변을 포함하면 다른 StackOverflow 사용자에게 훨씬 유용합니다. 좋은 답변을 작성하려면 어떻게합니까?를 참조하십시오 .
David Buck

0

이 접근 방식으로도 할 수 있습니다.

var example = {
  foo1: { /* stuff1 */},
  foo2: { /* stuff2 */},
  foo3: { /* stuff3 */}
}; 
Object.entries(example)[0][1];

0

첫 번째 키를 얻는 더 확실한 방법은 다음과 같습니다.

var example = {
    foo1: { /* stuff1 */},
    foo2: { /* stuff2 */},
    foo3: { /* stuff3 */}
};

var object2 = {
    needThis: 'This is a value of the property',
    foo2: { /* stuff2 */},
    foo3: { /* stuff3 */}
};

let [first] = Object.keys(example)
let [firstProp] = Object.keys(object2)

console.log(first)
//Prop : needThis, Value: This is a value of the property
console.log(`Prop : ${firstProp}, Value: ${object2[firstProp]}`)


그러나 왜 배열 주위에 [first]. 사용자가 배열을 답변으로 요청하지 않았습니다. first = Object.keys(example)[0]답을 배열로 감싸지 않고도 똑같이하는 이유는 무엇입니까? 당신은 왜 더 깨끗합니까?
Michael Durrant

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