การเรียกและเข้าถึงดัชนีแบบเลือกได้
ใช้การต่อเชนแบบเลือกได้กับการเรียกและวงเล็บดัชนี
การเรียกและเข้าถึงดัชนีแบบเลือกได้ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
นอกเหนือจากการอ่านคุณสมบัติ
การเชื่อมโยงแบบเลือกใช้ยังมีรูปแบบสำหรับเรียกฟังก์ชันและเข้าถึงสมาชิกอาร์เรย์หรือสมาชิกด้วยคีย์แบบไดนามิกอย่างปลอดภัย
const obj = { greet: () => "hi" };
console.log(obj.greet?.()); // "hi"การเรียกเมธอดแบบเลือกใช้
รูปแบบ ?.() จะเรียกฟังก์ชันเฉพาะเมื่อฟังก์ชันนั้นมีอยู่ หากเมธอดเป็นค่าว่างชนิด null หรือ undefined รูปแบบนี้จะคืนค่า undefined แทนที่จะทำให้เกิดข้อผิดพลาด
const obj = {};
console.log(obj.greet?.()); // undefined, no errorเหตุใดจึงสำคัญ
หากไม่มีรูปแบบนี้ การเรียกเมธอดที่ไม่มีอยู่จะทำให้เกิดข้อผิดพลาด รูปแบบการเรียกแบบเลือกใช้จึงช่วยป้องกันปัญหากับฟังก์ชันเรียกกลับที่อาจมีหรือไม่มีก็ได้อย่างเรียบร้อย
function run(onDone) {
onDone?.(); // safe whether or not onDone is provided
}
run();
run(() => console.log("done"));จะข้ามการเรียกเฉพาะเมื่อเป็นค่าว่างชนิด null หรือ undefined
?.() จะข้ามการเรียกเฉพาะเมื่อค่าเป็น null หรือ undefined เท่านั้น หากค่าเป็นค่าที่ไม่ใช่ฟังก์ชัน คุณจะยังได้รับ TypeError เมื่อเรียกค่าเหล่านั้น
const obj = { greet: 42 };
try {
obj.greet?.();
} catch (e) {
console.log("not a function");
}การเข้าถึงดัชนีแบบเลือกใช้
รูปแบบ ?.[ ] จะอ่านสมาชิกก็ต่อเมื่อค่าฐานไม่ใช่ค่าว่างชนิด null หรือ undefined จึงมีประโยชน์กับอาร์เรย์และคีย์ที่คำนวณขึ้น
const arr = ["a", "b"];
console.log(arr?.[1]); // "b"
const none = null;
console.log(none?.[0]); // undefinedคีย์แบบไดนามิก
การเข้าถึงด้วยวงเล็บเหลี่ยมร่วมกับ ?. ช่วยจัดการชื่อคุณสมบัติแบบไดนามิกได้อย่างปลอดภัย
const data = { user: { name: "Mia" } };
const key = "name";
console.log(data.user?.[key]); // "Mia"อาร์เรย์ซ้อนกัน
คุณสามารถเชื่อมการเข้าถึงดัชนีแบบเลือกใช้ผ่านอาร์เรย์หรือออบเจ็กต์ที่ซ้อนกันหลายชั้นได้
const grid = [[1, 2], [3, 4]];
console.log(grid?.[1]?.[0]); // 3
console.log(grid?.[5]?.[0]); // undefinedการเรียกแบบเลือกใช้กับค่าที่ส่งคืน
คุณสามารถผสมรูปแบบต่าง ๆ ได้ โดยอ่านค่าแบบเลือกใช้ก่อน แล้วจึงเรียกค่านั้นแบบเลือกใช้อีกที
const handlers = { click: () => "clicked" };
console.log(handlers.click?.()); // "clicked"
console.log(handlers.hover?.()); // undefinedใช้ร่วมกับค่าเริ่มต้น
จับคู่รูปแบบเหล่านี้กับ ?? เพื่อกำหนดค่าทดแทนให้ผลลัพธ์
const config = {};
const port = config.get?.() ?? 3000;
console.log(port); // 3000เรียกเมธอดของอาร์เรย์อย่างปลอดภัย
การเชื่อมโยงแบบเลือกใช้ช่วยให้คุณเรียกเมธอดกับอาร์เรย์ที่อาจไม่มีอยู่ได้ โดยไม่ต้องตรวจสอบการมีอยู่แยกต่างหาก
const state = { tags: null };
console.log(state.tags?.join(", ") ?? "none"); // "none"ใช้เมื่อค่ามีโอกาสไม่มีอยู่จริง
รูปแบบเหล่านี้เหมาะอย่างยิ่งกับฟังก์ชันเรียกกลับที่เลือกใช้และโครงสร้างข้อมูลที่ไม่แน่นอน หลีกเลี่ยงการใช้ในกรณีที่ค่าควรมีอยู่เสมอ เพื่อให้ข้อผิดพลาดที่แท้จริงยังปรากฏขึ้น
const events = { onSave: null };
events.onSave?.("payload"); // silently does nothing
console.log("continued");ตรวจสอบอย่างรวดเร็ว
เลือกรูปแบบการเรียกที่ปลอดภัย
ทบทวน
การเชื่อมโยงแบบเลือกใช้ประกอบด้วย ?.() สำหรับการเรียกเมธอดอย่างปลอดภัย และ ?.[ ] สำหรับการเข้าถึงดัชนีหรือคีย์แบบไดนามิกอย่างปลอดภัย ทั้งสองรูปแบบจะคืนค่า undefined เมื่อค่าฐานเป็นค่าว่างชนิด null หรือ undefined แต่ยังคงทำให้เกิดข้อผิดพลาดหากพยายามเรียกค่าที่ไม่ใช่ฟังก์ชัน คุณสามารถใช้ร่วมกับ ?? เพื่อกำหนดค่าเริ่มต้น และควรใช้เฉพาะกับค่าที่อาจไม่มีอยู่จริงเท่านั้น
คำถามที่พบบ่อย
บทเรียน “การเรียกและเข้าถึงดัชนีแบบเลือกได้” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเรียกและเข้าถึงดัชนีแบบเลือกได้” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเรียกและเข้าถึงดัชนีแบบเลือกได้”
ใช้การต่อเชนแบบเลือกได้กับการเรียกและวงเล็บดัชนี คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การเรียกและเข้าถึงดัชนีแบบเลือกได้” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การต่อเชนแบบเลือกได้ด้วยตัวดำเนินการ ?.
- การรวมค่า nullish ด้วย ??
- การใช้ ?. และ ?? ร่วมกัน
- การเรียกและเข้าถึงดัชนีแบบเลือกได้