Javascript object literal: {a, b, c} คืออะไร?


88

คำถามที่ฉันมีดีที่สุดได้รับจากjsfiddle นี้รหัสที่อยู่ด้านล่าง:

var a = 1, b = 'x', c = true;

var d = {a: a, b: b, c: c}; // <--- object literal
var e = [a, b, c];          // <--- array
var f = {a, b, c};          // <--- what exactly is this??

// these all give the same output:
alert(d.a  + ', ' + d.b +  ', ' + d.c );
alert(e[0] + ', ' + e[1] + ', ' + e[2]);
alert(f.a  + ', ' + f.b +  ', ' + f.c );

โครงสร้างข้อมูลคือfอะไร? เป็นเพียงชวเลขเพื่อd?


25
อันแรกไม่ใช่ JSON
GolezTrol


1
ตกลง @GolezTrol ไม่ใช่ JSON อย่างเคร่งครัดเพราะคีย์ไม่ได้อยู่ในเครื่องหมายคำพูดคู่ แล้วคุณจะเรียกdโครงสร้างข้อมูลในโพสต์ของฉันว่าอะไร?
drmrbrewer

6
สิ่งสำคัญคือต้องเข้าใจว่าไม่มีเวอร์ชันใดที่เป็น JSON ที่ถูกต้อง วิธีแสดงข้อมูลเป็นสตริง JSON จะเป็น{"a" : 1, "b" : "x", "c" : true }
Benjamin Gruenbaum

14
@drmrbrewer มันเป็นตัวอักษรวัตถุ ไม่ใช่ JSON เนื่องจากเป็นโค้ดจาวาสคริปต์ในขณะที่ JSON เป็นรูปแบบอนุกรม ยกตัวอย่างเช่นvar a = '{ "a" : "value"}'-> aถือสตริงที่สามารถ deserialised JSON.parseไปยังวัตถุที่ผ่านการ
moonwave99

คำตอบ:


71

เป็น Object Initializer Property Shorthandใน ES6

var f = {a, b, c, d:1}; // Will be equal to {a:a, b:b, c:c, d:1}

ใช้งานได้เนื่องจากค่าคุณสมบัติมีชื่อเดียวกับตัวระบุคุณสมบัติ นี่เป็นส่วนเพิ่มเติมใหม่ของไวยากรณ์ของObject Initialiser ( ส่วนที่ 11.1.5 ) ในECMAScript 6 ฉบับล่าสุดRev 1313 และแน่นอนเช่นเดียวกับข้อ จำกัด ที่กำหนดจาก ECMAScript 3 คุณไม่สามารถใช้คำสงวนเป็นชื่อคุณสมบัติของคุณได้

การจดชวเลขดังกล่าวจะไม่เปลี่ยนรหัสของคุณอย่างมากมันทำให้ทุกอย่างหวานขึ้นเล็กน้อยเท่านั้น!

function createCar(name, brand, speed) {
  return { type: 'Car', name: name, brand: brand, speed: speed };
}

// With the new shorthand form
function createSweetCar(name, brand, speed) {
  return { type: 'Car', name, brand, speed }; // Yes it looks sweet.
}

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

สัญกรณ์ชวเลขนี้นำเสนอการจับคู่วัตถุอย่างสวยงาม:

ในECMAScript5สิ่งที่เราเคยทำ:

var tmp = getData();
var op  = tmp.op;
var lhs = tmp.lhs;
var rhs = tmp.rhs;

สามารถทำได้ในECMAScript6ด้วยโค้ดบรรทัดเดียว:

var { op, lhs, rhs } = getData();

10
เหตุใดสิ่งนี้จึงมีประโยชน์มากจนกลายเป็นคุณลักษณะของภาษา ดูเหมือนว่าคนทั่วไปจะเริ่มต้นวัตถุโดยตรงด้วยตัวอักษรโดยตรงค่าส่งคืนและสิ่งอื่น ๆ หรือสร้างวัตถุก่อนจากนั้นจึงตั้งค่าคุณสมบัติโดยตรง การสร้างตัวแปรที่มีชื่อเดียวกันสร้างอินสแตนซ์จากนั้นในที่สุดก็เริ่มต้นอ็อบเจ็กต์เช่นนี้ดูเหมือนจะผิดปกติ ... หรือไม่?
Panzercrisis

3
@ Panzercrisis ดูเหมือนว่ามันจะนำไปสู่ข้อบกพร่องมากมายโดยไม่ได้ตั้งใจและหายากโดยส่วนตัว เช่นเดียวกับการอนุญาตให้if(a = 1) {...}ใช้ไวยากรณ์ที่ถูกต้อง
Anthony Grist

1
@ Panzercrisis ฉันคิดว่าอย่างน้อยมันก็สมเหตุสมผลถ้าคุณคิดว่า a, b และ c เป็นโครงสร้างข้อมูลที่ซับซ้อนกว่าและ f ยังมีคุณสมบัติที่ซับซ้อนอื่น ๆ ยังไม่แน่ใจว่าเป็นความคิดที่ดี แต่ฉันเห็นว่ามีประโยชน์
Josh Rumbut

1
@ Panzercrisis มันจะมีประโยชน์มากในการคืนค่าทูเปิลจากฟังก์ชันแลมบ์ดาเช่น(a, b) => {a, b}. อย่างน้อยก็เป็นวิธีที่ฉันใช้คุณลักษณะเดียวกันในC#.
Vincent van der Weele

2
@ อเล็กซ์เป็น "มุมแหลม" หรือ "ซับซ้อน" อย่างไร? สิ่งที่ปกติทั่วไปที่คุณจะพบในโค้ดเบสจำนวนมากคือการเริ่มต้นอ็อบเจ็กต์โดยที่คีย์ตรงกับตัวแปรที่กำหนดเป็นค่า{id: id, data: data, isSelected: isSelected}เป็นต้นจะเกิดขึ้นมากมายเมื่อการแมปอ็อบเจ็กต์เข้ามาในโลคัลแล้วย้อนกลับ ในกรณีส่วนใหญ่คุณไม่ต้องการตั้งชื่อสิ่งที่แตกต่างออกไปเล็กน้อย{identifier: id, viewData: data, isElementSelected: isSelected }นั่นคือ "แปลก" "ซับซ้อน" และ "สับสน" ที่คุณกำลังพูดถึง
VLAZ

77
var f = {a, b, c};

มันมาพร้อมกับ ES6 (ECMAScript 2015) และมีความหมายเหมือนกับ:

var f = {a: a, b: b, c: c};

เรียกว่า Object Literal Property Value Shorthands (หรือเรียกสั้น ๆ ว่ามูลค่าทรัพย์สินชวเลขคุณสมบัติ)

คุณยังสามารถรวม shorthands กับการเริ่มต้นแบบคลาสสิก:

var f = {a: 1, b, c};

สำหรับข้อมูลเพิ่มเติมโปรดดูที่การเริ่มต้นวัตถุ


12
var f = {a, b, c};          // <--- what exactly is this??

กำหนดวัตถุใน JavaScript โดยใช้สัญกรณ์ ECMAScript 2015 ใหม่:

ตามMozilla Developer Network :

"อ็อบเจ็กต์สามารถเริ่มต้นได้โดยใช้ Object (), Object.create () ใหม่หรือใช้สัญกรณ์ตามตัวอักษร (initializer notation) อ็อบเจ็กต์ initializer คือรายการของชื่อคุณสมบัติที่เป็นศูนย์หรือมากกว่าและค่าที่เกี่ยวข้องของอ็อบเจ็กต์ซึ่งอยู่ใน วงเล็บปีกกา ({}) "

var a = "foo", 
    b = 42, 
    c = {};

// Shorthand property names (ES6)
var o = { a, b, c }; 

เทียบเท่ากับ:

var a = "foo", 
    b = 42,
    c = {};

var o = { 
  a: a,
  b: b,
  c: c
};
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.