ข้อผิดพลาดในการเข้าถึงคุณสมบัติของอ็อบเจ็กต์ใน JavaScript

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

javascriptlet obj = {a: 1, b: 2, c: 3};

ให้ในตัวแปรเก็บชื่อ คุณสมบัติที่เราต้องการ รับค่า:

javascriptlet key = 'a';

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

javascriptconsole.log(obj.key); // undefined

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

javascriptconsole.log(obj['key']);

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

javascriptconsole.log(obj[key]);

javascriptlet obj = {x: 1, y: 2, z: 3};

let prop = 'x';
console.log(obj.prop);

javascriptlet obj = {x: 1, y: 2, z: 3};

let prop = 'x';
console.log(obj['prop']);