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.