Làm thế nào để truy cập thuộc tính đầu tiên của một đối tượng Javascript?

Có cách nào thanh lịch để truy cập vào tài sản đầu tiên của một đối tượng ...

1. nơi bạn không biết tên tài sản của bạn
2. không sử dụng vòng lặp như for .. inhoặc jQuery$.each

Ví dụ, tôi cần truy cập vào foo1đối tượng mà không biết tên của foo1:

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

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

Sử dụng điều này bạn có thể truy cập các thuộc tính khác bằng chỉ mục. Hãy nhận biết tho! Object.keysthứ tự trả lại không được đảm bảo theo ECMAScript tuy nhiên không chính thức bởi tất cả các cài đặt trình duyệt chính, vui lòng đọc https://stackoverflow.com/a/23202095 để biết chi tiết về điều này.

Hãy thử for … invòng lặp và ngắt sau lần lặp đầu tiên:

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

Bạn cũng có thể làm Object.values(example)[0].

Sử dụng Object.keysđể có được một mảng các thuộc tính trên một đối tượng. Thí dụ:

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

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

Tài liệu và shim trình duyệt chéo được cung cấp ở đây . Một ví dụ về việc sử dụng nó có thể được tìm thấy trong một câu trả lời khác của tôi ở đây .

Chỉnh sửa : để rõ ràng, tôi chỉ muốn lặp lại những gì đã được nêu chính xác trong các câu trả lời khác: thứ tự chính trong các đối tượng javascript không được xác định.

Phiên bản một quy tắc:

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

Không có tài sản "đầu tiên". Các phím đối tượng không có thứ tự.

Nếu bạn lặp lại chúng với (var foo in bar)bạn, bạn sẽ nhận được chúng theo một số thứ tự, nhưng nó có thể thay đổi trong tương lai (đặc biệt là nếu bạn thêm hoặc xóa các khóa khác).

Giải pháp với thư viện lodash :

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

nhưng không có gì đảm bảo về thứ tự lưu trữ nội bộ thuộc tính đối tượng vì nó phụ thuộc vào việc triển khai VM javascript.

Không. Một đối tượng theo nghĩa đen, như được định nghĩa bởi MDC là:

một danh sách gồm 0 hoặc nhiều cặp tên thuộc tính và các giá trị liên quan của một đối tượng, được đặt trong dấu ngoặc nhọn ({}).

Do đó, một đối tượng bằng chữ không phải là một mảng và bạn chỉ có thể truy cập các thuộc tính bằng tên rõ ràng của chúng hoặc một forvòng lặp sử dụng intừ khóa.

Câu trả lời hàng đầu có thể tạo ra toàn bộ mảng và sau đó chụp từ danh sách. Đây là một phím tắt hiệu quả khác

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

Điều này đã được đề cập ở đây trước đây.

Khái niệm đầu tiên không áp dụng cho các thuộc tính đối tượng và thứ tự của một vòng lặp for ... không được đảm bảo bởi các thông số kỹ thuật, tuy nhiên trong thực tế, nó đáng tin cậy là FIFO ngoại trừ phê bình cho chrome ( báo cáo lỗi ). Đưa ra quyết định của bạn cho phù hợp.

Tôi không khuyên bạn nên sử dụng Object.keys vì nó không được hỗ trợ trong các phiên bản IE cũ. Nhưng nếu bạn thực sự cần điều đó, bạn có thể sử dụng mã ở trên để đảm bảo khả năng tương thích trở lại:

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;
}})()};

Tính năng Firefox (Tắc kè) 4 (2.0) Chrome 5 Internet Explorer 9 Opera 12 Safari 5

Thông tin thêm: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys

Nhưng nếu bạn chỉ cần cái đầu tiên, chúng tôi có thể sắp xếp một giải pháp ngắn hơn như:

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"}

Để có được tên khóa đầu tiên trong đối tượng bạn có thể sử dụng:

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

Trả về một chuỗi, vì vậy bạn không thể truy cập các đối tượng lồng nhau nếu có, như:

var obj = { first: { someVal : { id : 1} }; Ở đây với giải pháp đó bạn không thể truy cập id.

Giải pháp tốt nhất nếu bạn muốn có được đối tượng thực tế là sử dụng lodash như:

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

Để trả về giá trị của khóa đầu tiên, (nếu bạn không biết chính xác tên khóa đầu tiên):

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

nếu bạn biết tên khóa chỉ cần sử dụng:

obj.first

hoặc là

obj['first']

Nếu bạn cần truy cập vào "thuộc tính đầu tiên của một đối tượng", điều đó có thể có nghĩa là có gì đó không đúng với logic của bạn. Thứ tự của các thuộc tính không phải là vấn đề.

Sử dụng một mảng thay vì một đối tượng (dấu ngoặc vuông).

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

Lưu ý rằng bạn mất các định danh 'foo'. Nhưng bạn có thể thêm một thuộc tính tên cho các đối tượng được chứa:

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

Bất kỳ lý do không làm điều này?

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

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

Bạn có thể sử dụng Object.prototype.keystrả về tất cả các khóa của một đối tượng theo cùng một thứ tự. Vì vậy, nếu bạn muốn đối tượng đầu tiên chỉ cần lấy mảng đó và sử dụng phần tử đầu tiên làm khóa mong muốn.

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

chúng ta cũng có thể làm với sự chấp thuận này.

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

Đây là một cách sạch hơn để có được khóa đầu tiên:

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]}`)