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

การตั้งค่า การเปลี่ยนแปลง และการเข้าถึงพร็อพเพอร์ตี้ของออบเจ็กต์ทำได้ 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." }