การแยกโครงสร้างอาร์เรย์และทูเพิล
แยกโครงสร้างอาร์เรย์และทูเพิลด้วยชนิดข้อมูลของสมาชิกที่ถูกต้อง
การแยกโครงสร้างอาร์เรย์และทูเพิล เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
การแยกโครงสร้างตามตำแหน่ง
การแยกโครงสร้างอาร์เรย์จะผูกตัวแปรตามตำแหน่งแทนชื่อ เมื่อใช้ทูเพิล แต่ละตำแหน่งจะมีชนิดเฉพาะ ทำให้ดึงข้อมูลตามลำดับได้อย่างแม่นยำ
การแยกโครงสร้างอาร์เรย์พื้นฐาน
วงเล็บเหลี่ยมทางด้านซ้ายจะดึงสมาชิกออกมาตามลำดับดัชนี สำหรับอาร์เรย์ทั่วไป การผูกตัวแปรทุกตัวจะใช้ชนิดสมาชิกของอาร์เรย์ร่วมกัน
const nums = [10, 20, 30]
const [first, second] = nums
console.log(first + second) // 30การระบุชนิดให้รูปแบบทูเพิล
ระบุชนิดโดยกำหนดชนิดทูเพิลให้กับการผูกตัวแปรหลังรูปแบบ แต่ละตำแหน่งจะมีชนิดของตัวเอง ซึ่งในที่นี้คือ number แล้วตามด้วย string
const [a, b]: [number, string] = [1, "two"]
console.log(a, b) // 1 twoชนิดจะเป็นไปตามตำแหน่ง
ในทูเพิล ชนิดของแต่ละดัชนีจะถูกกำหนดตายตัว การผูกตัวแปรตัวแรกเป็น number ส่วนตัวที่สองเป็น string หากสลับค่าเหล่านี้จะเกิดข้อผิดพลาดด้านชนิด
const pair: [string, number] = ["age", 30]
const [label, value] = pair
console.log(label.toUpperCase(), value + 1)การข้ามสมาชิกด้วยโคลอน
เว้นช่องด้วยตำแหน่งโคลอนที่ว่างเปล่าเพื่อข้ามตำแหน่งที่ไม่ต้องการ ชนิดของสมาชิกที่ข้ามไปจะถูกละไว้โดยไม่มีผล
const rgb: [number, number, number] = [255, 128, 0]
const [red, , blue] = rgb
console.log(red, blue) // 255 0การแยกโครงสร้างด้วย rest
สมาชิก rest จะรวบรวมรายการที่เหลือเข้าไว้ในอาร์เรย์ สำหรับทูเพิล ชนิดของสมาชิกนี้จะสะท้อนตำแหน่งที่เหลือ
const [head, ...tail] = [1, 2, 3, 4]
console.log(head) // 1
console.log(tail.length) // 3ชนิด rest จากทูเพิล
เมื่อแยกโครงสร้างทูเพิลด้วย rest TypeScript จะอนุมานชนิดของตัวแปร rest เป็นทูเพิลของสมาชิกที่เหลือ โดยยังคงรักษาชนิดของสมาชิกเหล่านั้นไว้
const data: [string, number, boolean] = ["x", 1, true]
const [name, ...rest] = data
// rest is [number, boolean]
console.log(rest[0], rest[1])การสลับตัวแปร
นี่คือเทคนิคที่น่าสนใจซึ่งการแยกโครงสร้างอาร์เรย์ช่วยให้ทำได้ นั่นคือการสลับค่าสองค่าโดยไม่ต้องใช้ตัวแปรชั่วคราว ชนิดของค่าต้องเข้ากันได้จึงจะตรวจสอบชนิดของการสลับได้สำเร็จ
let x = 1, y = 2
;[x, y] = [y, x]
console.log(x, y) // 2 1การแยกโครงสร้างในค่าที่ฟังก์ชันส่งคืน
ฟังก์ชันที่ส่งคืนทูเพิลเหมาะอย่างยิ่งกับการแยกโครงสร้าง รูปแบบของ React useState ก็เป็นเช่นนี้โดยตรง
function useCounter(): [number, () => number] {
let n = 0
return [n, () => ++n]
}
const [count, inc] = useCounter()
console.log(count, inc())ค่าเริ่มต้นในรูปแบบอาร์เรย์
กำหนดค่าเริ่มต้นให้ตำแหน่งที่อาจเป็น undefined ได้ ค่าเริ่มต้นจะถูกใช้เฉพาะเมื่อสมาชิกไม่มีอยู่หรือเป็น undefined เท่านั้น
const [a = 0, b = 0] = [5]
console.log(a, b) // 5 0การแยกโครงสร้างอาร์เรย์ซ้อนกัน
คุณสามารถแยกโครงสร้างอาร์เรย์ภายในอาร์เรย์ได้ในคำสั่งเดียว ชนิดจะซ้อนกันตามลำดับ แต่ควรคำนึงถึงความอ่านง่ายเมื่อโครงสร้างซ้อนกันลึก
const grid: [[number, number], [number, number]] = [[1, 2], [3, 4]]
const [[a, b], [c, d]] = grid
console.log(a, b, c, d) // 1 2 3 4ตรวจสอบความเข้าใจสั้น ๆ
ทดสอบความเข้าใจเกี่ยวกับการแยกโครงสร้างอาร์เรย์และทูเพิล
สรุปทบทวน
การแยกโครงสร้างอาร์เรย์จะผูกตัวแปรตามตำแหน่ง ให้ระบุชนิดด้วยชนิดทูเพิลหลังรูปแบบ เพื่อให้แต่ละดัชนีมีชนิดของตัวเอง ข้ามสมาชิกด้วยตำแหน่งโคลอนที่ว่างเปล่า รวบรวมส่วนที่เหลือด้วยสมาชิก rest ซึ่งยังคงเป็นทูเพิลของตำแหน่งที่เหลือ และกำหนดค่าเริ่มต้นให้ตำแหน่งที่อาจไม่มีค่า การส่งคืนทูเพิลร่วมกับการแยกโครงสร้างช่วยให้รูปแบบอย่าง useState มีพลังมากยิ่งขึ้น
คำถามที่พบบ่อย
บทเรียน “การแยกโครงสร้างอาร์เรย์และทูเพิล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การแยกโครงสร้างอาร์เรย์และทูเพิล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การแยกโครงสร้างอาร์เรย์และทูเพิล”
แยกโครงสร้างอาร์เรย์และทูเพิลด้วยชนิดข้อมูลของสมาชิกที่ถูกต้อง คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การแยกโครงสร้างอาร์เรย์และทูเพิล” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ชนิดข้อมูลของการแยกโครงสร้างออบเจ็กต์
- การแยกโครงสร้างอาร์เรย์และทูเพิล
- ค่าเริ่มต้นในการแยกโครงสร้าง
- รูปแบบการแยกโครงสร้างที่ซ้อนกัน