วิธีเข้าถึงคุณสมบัติแรกของวัตถุ Javascript

มีวิธีหรูหราในการเข้าถึงคุณสมบัติแรกของวัตถุ ...

1. ที่ซึ่งคุณไม่รู้จักชื่อคุณสมบัติของคุณ
2. โดยไม่ต้องใช้ลูปfor .. inLike หรือ jQuery$.each

ตัวอย่างเช่นฉันต้องการเข้าถึงfoo1วัตถุโดยไม่ทราบชื่อ foo1:

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

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

การใช้สิ่งนี้คุณสามารถเข้าถึงคุณสมบัติอื่น ๆ ด้วยดัชนี ระวังสรรพสิ่ง! Object.keysไม่รับประกันใบสั่งส่งคืนสินค้าตาม ECMAScript แต่เป็นทางการโดยการใช้งานเบราว์เซอร์ที่สำคัญทั้งหมดโปรดอ่านhttps://stackoverflow.com/a/23202095สำหรับรายละเอียดเกี่ยวกับเรื่องนี้

ลองfor … inวนซ้ำแล้วซ้ำอีกหลังจากการทำซ้ำครั้งแรก:

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

Object.values(example)[0]นอกจากนี้คุณยังสามารถทำ

ใช้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)

เอกสารและเบราว์เซอร์ชิมให้ไว้ที่นี่ ตัวอย่างของการใช้ที่สามารถพบได้ในหนึ่งในคำตอบของฉันอีกที่นี่

แก้ไข : เพื่อความชัดเจนฉันแค่ต้องการสะท้อนสิ่งที่ระบุไว้อย่างถูกต้องในคำตอบอื่น ๆ : ลำดับสำคัญในวัตถุจาวาสคริปต์ไม่ได้กำหนด

รุ่นหนึ่งกฎ:

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

ไม่มีคุณสมบัติ "แรก" ปุ่มวัตถุไม่ได้เรียงลำดับ

หากคุณวนรอบพวกเขาด้วยสำหรับ(var foo in bar)คุณจะได้รับพวกเขาในบางคำสั่ง แต่มันอาจมีการเปลี่ยนแปลงในอนาคต (โดยเฉพาะถ้าคุณเพิ่มหรือลบคีย์อื่น ๆ )

วิธีการแก้ปัญหาด้วยlodash library:

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

แต่ไม่มีการรับประกันของคำสั่งจัดเก็บข้อมูลภายในคุณสมบัติของวัตถุเพราะมันขึ้นอยู่กับการใช้งานจาวาสคริปต์ VM

ไม่วัตถุตามตัวอักษรตามที่กำหนดโดยMDCคือ:

รายการชื่อคุณสมบัติศูนย์หรือมากกว่าหนึ่งคู่และค่าที่เกี่ยวข้องของวัตถุที่อยู่ในเครื่องหมายปีกกา ({})

ดังนั้นวัตถุตามตัวอักษรไม่ใช่อาร์เรย์และคุณสามารถเข้าถึงคุณสมบัติได้โดยใช้ชื่อที่ชัดเจนหรือforลูปโดยใช้inคำสำคัญ

คำตอบยอดนิยมสามารถสร้างอาร์เรย์ทั้งหมดแล้วจับภาพจากรายการ นี่เป็นอีกหนึ่งทางลัดที่มีประสิทธิภาพ

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

สิ่งนี้ได้ถูกกล่าวถึงก่อนหน้านี้

แนวคิดเรื่องแรกไม่ได้ใช้กับคุณสมบัติของวัตถุและลำดับของ a สำหรับ ... ในลูปไม่ได้รับการรับรองโดยสเป็คอย่างไรก็ตามในทางปฏิบัติมันเป็นที่เชื่อถือได้ FIFO ยกเว้นช่วงวิกฤตสำหรับโครเมียม ( รายงานบั๊ก ) ตัดสินใจตามความเหมาะสม

ฉันไม่แนะนำให้คุณใช้ Object.keys เนื่องจากไม่รองรับใน IE เวอร์ชันเก่า แต่ถ้าคุณต้องการสิ่งนั้นจริงๆคุณสามารถใช้รหัสด้านบนเพื่อรับประกันความเข้ากันได้ด้านหลัง:

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

ในการรับชื่อคีย์ในวัตถุคุณสามารถใช้:

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']

หากคุณต้องการเข้าถึง "คุณสมบัติแรกของวัตถุ" อาจหมายถึงว่ามีบางอย่างผิดปกติกับตรรกะของคุณ ลำดับของคุณสมบัติของวัตถุไม่ควรสำคัญ

ใช้อาร์เรย์แทนวัตถุ (วงเล็บเหลี่ยม)

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;

เหตุผลใดที่จะไม่ทำเช่นนี้?

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

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

คุณสามารถใช้Object.prototype.keysซึ่งส่งคืนคีย์ทั้งหมดของวัตถุในลำดับเดียวกัน ดังนั้นถ้าคุณต้องการวัตถุแรกแค่รับอาร์เรย์นั้นและใช้องค์ประกอบแรกเป็นคีย์ที่ต้องการ

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

เราสามารถทำอย่างไรกับ approch นี้

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

นี่เป็นวิธีที่สะอาดกว่าในการรับคีย์แรก:

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