การต่อเชนแบบเลือกได้ด้วยตัวดำเนินการ ?.
เข้าถึงคุณสมบัติที่ซ้อนกันหลายระดับอย่างปลอดภัย
การต่อเชนแบบเลือกได้ด้วยตัวดำเนินการ ?. เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
ปัญหา
การอ่านพร็อพเพอร์ตีของสิ่งที่เป็น undefined หรือ null จะทำให้เกิด TypeError การต่อสายแบบเลือกได้ช่วยให้คุณอ่านค่าที่ซ้อนกันได้อย่างปลอดภัย
const user = {};
console.log(user.profile && user.profile.name);ตัวดำเนินการ ?.
ตัวดำเนินการต่อสายแบบเลือกได้ ?. จะหยุดและส่งคืนค่า undefined หากค่าทางซ้ายเป็น null หรือ undefined แทนที่จะทำให้เกิดข้อผิดพลาด
const user = {};
console.log(user.profile?.name); // undefined, no errorการอ่านพร็อพเพอร์ตีที่ซ้อนกันลึก
คุณสามารถต่อ ?. หลายขั้นเพื่อเจาะเข้าไปในโครงสร้างที่ซ้อนกันลึก โดยไม่ต้องเขียนตัวป้องกันด้วยตนเองในแต่ละระดับ
const data = { user: { address: { city: "Paris" } } };
console.log(data.user?.address?.city); // "Paris"การหยุดประเมินแบบลัดวงจร
หากส่วนใดส่วนหนึ่งของสายเป็นค่าว่างหรือไม่ได้กำหนด นิพจน์ทั้งหมดจะหยุดประเมินแบบลัดวงจรและส่งคืนค่า undefined โดยไม่ประเมินส่วนที่เหลือ
const data = { user: null };
console.log(data.user?.address?.city); // undefinedทำงานเฉพาะกับค่าว่างหรือไม่ได้กำหนด
?. จะหยุดประเมินเฉพาะเมื่อพบ null หรือ undefined ค่าเท็จอื่น ๆ เช่น 0 หรือ "" เป็นค่าจริงและจะถูกเข้าถึงตามปกติ
const obj = { count: 0 };
console.log(obj.count?.toString()); // "0"เปรียบเทียบกับ &&
ก่อนมี ?. ผู้คนมักต่อเงื่อนไขป้องกันด้วย && การต่อสายแบบเลือกได้สั้นกว่าและชัดเจนกว่าสำหรับเจตนาเดียวกัน
const u = { profile: { name: "Ada" } };
const a = u && u.profile && u.profile.name;
const b = u?.profile?.name;
console.log(a, b);การต่อสายหลังการเรียกใช้
คุณสามารถต่อสายต่อหลังการเรียกใช้เมธอด เพื่อเข้าถึงพร็อพเพอร์ตีของค่าที่ส่งคืนมาได้อย่างปลอดภัย
const config = { get: () => ({ port: 8080 }) };
console.log(config.get()?.port); // 8080การหยุดประเมินกลางสาย
หากส่วนกลางของสายเป็นค่าว่างหรือไม่ได้กำหนด การประเมินจะหยุดลงทันที แม้ว่าส่วนหลังจะสามารถเรียกใช้ฟังก์ชันได้ตามปกติก็ตาม
const obj = { a: null };
console.log(obj.a?.b.c.d); // undefined, never touches b/c/dไม่ใช้สำหรับการกำหนดค่า
การต่อสายแบบเลือกได้ใช้สำหรับการอ่านเท่านั้น คุณไม่สามารถกำหนดค่าให้กับสายแบบเลือกได้ เพราะจะเป็นข้อผิดพลาดทางไวยากรณ์ทางด้านซ้ายของ =
const o = { x: 1 };
// o?.x = 5; // SyntaxError
o.x = 5;
console.log(o.x);การใช้ร่วมกับอาร์เรย์
การต่อสายแบบเลือกได้ยังทำงานร่วมกับการเข้าถึงด้วยวงเล็บเหลี่ยม ซึ่งจะกล่าวถึงเพิ่มเติมในภายหลัง โดยยังคงใช้ความปลอดภัยจากค่าว่างแบบเดียวกัน
const state = { items: ["a", "b"] };
console.log(state.items?.[0]); // "a"หลีกเลี่ยงการใช้มากเกินไป
ใช้ ?. เฉพาะในกรณีที่ค่าอาจไม่มีอยู่ได้อย่างถูกต้องตามตรรกะ การใช้มากเกินไปอาจซ่อนข้อบกพร่องด้วยการกลบข้อผิดพลาดที่จริง ๆ แล้วควรเห็น
const order = { total: 42 };
console.log(order.total?.toFixed(2)); // "42.00"ตรวจสอบอย่างรวดเร็ว
คาดการณ์ผลลัพธ์
สรุปทบทวน
ตัวดำเนินการ ?. ช่วยอ่านพร็อพเพอร์ตีอย่างปลอดภัย หากด้านซ้ายเป็น null หรือ undefined จะส่งคืนค่า undefined แทนที่จะทำให้เกิดข้อผิดพลาด และจะหยุดประเมินส่วนที่เหลือของสาย เฉพาะค่าว่างหรือไม่ได้กำหนดเท่านั้นที่ทำให้เกิดการทำงานนี้ ไม่ใช่ 0 หรือ "" และไม่สามารถใช้เป็นเป้าหมายของการกำหนดค่าได้
คำถามที่พบบ่อย
บทเรียน “การต่อเชนแบบเลือกได้ด้วยตัวดำเนินการ ?.” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การต่อเชนแบบเลือกได้ด้วยตัวดำเนินการ ?.” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การต่อเชนแบบเลือกได้ด้วยตัวดำเนินการ ?.”
เข้าถึงคุณสมบัติที่ซ้อนกันหลายระดับอย่างปลอดภัย คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การต่อเชนแบบเลือกได้ด้วยตัวดำเนินการ ?.” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การต่อเชนแบบเลือกได้ด้วยตัวดำเนินการ ?.
- การรวมค่า nullish ด้วย ??
- การใช้ ?. และ ?? ร่วมกัน
- การเรียกและเข้าถึงดัชนีแบบเลือกได้