ผู้เข้าถึงพร็อพเพอร์ตี้

คุณสามารถตั้งค่า แก้ไข และเข้าถึงคุณสมบัติของวัตถุได้ 2 วิธี ได้แก่ เครื่องหมายจุดและเครื่องหมายวงเล็บ

สัญลักษณ์

ดังที่เห็นในตัวอย่างก่อนหน้านี้ สัญลักษณ์จุดใช้เครื่องหมายจุด (.) ระหว่าง ออบเจ็กต์และคีย์พร็อพเพอร์ตี้ที่กำลังเข้าถึง:

const myObj = {
    "myProp": "String value."
};

myObj.myProp;
> "String value."

คุณสามารถใช้สัญลักษณ์จุดเพื่อเข้าถึง เปลี่ยนแปลง หรือสร้างพร็อพเพอร์ตี้ใหม่โดยใช้ โอเปอเรเตอร์งาน

const myObj = {};

myObj.myProp = "String value.";

myObj;
> Object { myProp: "String value." }

คีย์พร็อพเพอร์ตี้แบบห่วงโซ่โดยใช้สัญลักษณ์จุดช่วยให้คุณเข้าถึงคุณสมบัติของ วัตถุที่เป็นคุณสมบัติของวัตถุเอง:

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

myObj.myProp.childProp;
> true;

อย่างไรก็ตาม การใช้ไวยากรณ์นี้เมื่อคีย์ที่ระบุในเชนอาจไม่ได้ ที่กำหนดไว้อาจทำให้เกิดข้อผิดพลาดได้ ในตัวอย่างต่อไปนี้ myMissingProp ไม่ใช่ค่า ของออบเจ็กต์ myObj ดังนั้นการพยายามเข้าถึง myObj.myMissingProp ผลลัพธ์ใน undefined พยายามเข้าถึงพร็อพเพอร์ตี้ใน undefined ราวกับว่า เป็นออบเจ็กต์ จึงทำให้เกิดข้อผิดพลาด

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

> myObj.myMissingProp
> undefined

myObj.myMissingProp.childProp;
> Uncaught TypeError: myObj.myMissingProp is undefined

ES2020 เพื่อแก้ไขปัญหาดังกล่าวโดยได้แนะนำ "โอเปอเรเตอร์แบบเชนที่ไม่บังคับ" (?.) เพื่อเข้าถึงคุณสมบัติที่ฝังของออบเจ็กต์ได้อย่างปลอดภัย

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

myObj.myMissingProp?.childProp;
> undefined

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

const myObj = {
    "1": true,
    "key with spaces": true
};

myObj.1;
> Uncaught SyntaxError: unexpected token: numeric literal

myObj.key with spaces;
> Uncaught SyntaxError: unexpected token: keyword 'with'

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

สัญลักษณ์วงเล็บ

รูปแบบวงเล็บใช้ชุดของวงเล็บเหลี่ยม ([]) ซึ่งมีค่าที่ประเมิน สตริง (หรือสัญลักษณ์) ที่แสดงถึง คีย์พร็อพเพอร์ตี้

const myObj = {
    "myProp": "String value."
};

myObj["myProp"];
> "String value."

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

const myObj = {
    "false": 25,
    "10" : true,
    "key with spaces": true
};

myObj[false];
> 25

myObj[10];
> true

myObj["key with spaces"];
> true

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

const colors = {
    "color1" : "red",
    "color2" : "blue",
    "color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );

colors[ "color" + randomNumber ];
> "blue"

เช่นเดียวกับเครื่องหมายจุด คุณสามารถใช้เครื่องหมายวงเล็บเหลี่ยมเพื่อทั้งการเข้าถึงและสร้าง พร็อพเพอร์ตี้ โดยใช้โอเปอเรเตอร์การมอบหมาย ดังนี้

const myObj = {};

myObj[ "myProp" ] = "String value.";

myObj;
> Object { myProp: "String value." }