0Pricing
TypeScript Academy · บทเรียน

การกระจายค่าในอาร์เรย์และออบเจ็กต์

กระจายค่าโดยยังคงชนิดข้อมูลที่ถูกต้องแม่นยำ

การกระจายค่าในอาร์เรย์และออบเจ็กต์ เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

การกระจายค่า

ตัวดำเนินการกระจายค่า ... จะคัดลอกสมาชิกของอาร์เรย์หรือคุณสมบัติของออบเจ็กต์ไปไว้ในออบเจ็กต์หรืออาร์เรย์ใหม่ TypeScript จะติดตามชนิดของผลลัพธ์อย่างแม่นยำ ซึ่งเป็นหัวใจสำคัญของการอัปเดตแบบไม่เปลี่ยนแปลงค่าเดิม

การกระจายอาร์เรย์

กระจายอาร์เรย์สองชุดลงในอาร์เรย์ใหม่เพื่อเชื่อมอาร์เรย์เข้าด้วยกัน ชนิดสมาชิกของผลลัพธ์จะเป็นยูเนียนของชนิดสมาชิกจากแหล่งข้อมูลทั้งสอง

const a = [1, 2]
const b = [3, 4]
const all = [...a, ...b]
console.log(all) // [1, 2, 3, 4]

การผสมการกระจายกับค่าโดยตรง

คุณสามารถสลับสมาชิกที่กระจายกับค่าแต่ละค่าได้ ลำดับจะคงไว้ตรงตามที่เขียนทุกประการ

const middle = [2, 3]
const nums = [1, ...middle, 4]
console.log(nums) // [1, 2, 3, 4]

ชนิดของสมาชิกที่กระจาย

เมื่อแหล่งข้อมูลที่กระจายมีชนิดสมาชิกต่างกัน ผลลัพธ์จะเป็นอาร์เรย์ที่มีชนิดสมาชิกเป็นยูเนียนของชนิดเหล่านั้น คุณจะระบุชนิดเองหรือปล่อยให้การอนุมานจัดการก็ได้

const ns: number[] = [1, 2]
const ss: string[] = ["a"]
const mixed = [...ns, ...ss] // (number | string)[]
console.log(mixed)

การกระจายออบเจ็กต์

การกระจายออบเจ็กต์จะคัดลอกคุณสมบัติของออบเจ็กต์นั้นเองที่แจกแจงได้ไปไว้ในออบเจ็กต์ใหม่ ชนิดของผลลัพธ์จะรวมโครงสร้างของแหล่งข้อมูลเข้าด้วยกัน

const base = { id: 1, name: "Ada" }
const extended = { ...base, active: true }
console.log(extended) // { id: 1, name: 'Ada', active: true }

การกระจายเพื่อเขียนทับคุณสมบัติ

เมื่อคีย์ซ้ำกัน คีย์ที่อยู่หลังสุดจะมีผล กระจายออบเจ็กต์ก่อน แล้วเขียนทับฟิลด์ที่ต้องการ ซึ่งเป็นพื้นฐานของการอัปเดตแบบไม่เปลี่ยนแปลงค่าเดิม

const user = { name: "Ada", age: 36 }
const older = { ...user, age: 37 }
console.log(older.age) // 37

ลำดับเป็นตัวกำหนดค่าที่มีผล

ลำดับความสำคัญของคุณสมบัติเป็นไปตามลำดับของแหล่งข้อมูล วางค่าที่ต้องการเขียนทับไว้หลังการกระจายเพื่อให้มีผล หากวางไว้ก่อน การกระจายจะเขียนทับค่าเหล่านั้น

const defaults = { theme: "light", size: "m" }
const result = { theme: "dark", ...defaults }
console.log(result.theme) // light — spread came last

ชนิดของคุณสมบัติที่ถูกเขียนทับ

หากการเขียนทับเปลี่ยนชนิดของคุณสมบัติ ชนิดผลลัพธ์จะแสดงชนิดใหม่ TypeScript จะจำกัดชนิดให้เหลือชนิดจากการปรากฏครั้งล่าสุด

const obj = { value: 1 as number }
const updated = { ...obj, value: "now a string" }
// updated.value is string
console.log(updated.value.toUpperCase())

การกระจายเป็นสำเนาแบบตื้น

การกระจายจะคัดลอกข้อมูลลงไปเพียงหนึ่งระดับ ออบเจ็กต์ที่ซ้อนกันจะถูกใช้ร่วมกันผ่านการอ้างอิง ดังนั้นการเปลี่ยนแปลงช่องข้อมูลที่ซ้อนกันจึงมีผลต่อสำเนาทั้งสองชุด หากต้องการสำเนาที่ลึกกว่านั้น ให้กระจายออบเจ็กต์ที่ซ้อนกันด้วย

const a = { nested: { x: 1 } }
const b = { ...a }
b.nested.x = 99
console.log(a.nested.x) // 99 — shared reference

การกระจายและการอ่านอย่างเดียว

การกระจายอาร์เรย์หรือออบเจ็กต์แบบ readonly จะสร้างสำเนาใหม่ที่เปลี่ยนแปลงได้ ตัวปรับแต่งแบบ readonly จะไม่ถูกส่งต่อผ่านการกระจาย เพราะคุณกำลังสร้างค่าใหม่

const frozen: readonly number[] = [1, 2, 3]
const copy = [...frozen] // number[], mutable
copy.push(4)
console.log(copy.length) // 4

รูปแบบการอัปเดตแบบไม่เปลี่ยนแปลงข้อมูลเดิม

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

interface State { count: number; name: string }
function increment(s: State): State {
  return { ...s, count: s.count + 1 }
}
console.log(increment({ count: 1, name: "x" }))

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับชนิดข้อมูลและลำดับความสำคัญของการกระจาย

ทบทวน

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

คำถามที่พบบ่อย

บทเรียน “การกระจายค่าในอาร์เรย์และออบเจ็กต์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การกระจายค่าในอาร์เรย์และออบเจ็กต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. พารามิเตอร์ rest ในฟังก์ชัน
  2. การกระจายค่าในอาร์เรย์และออบเจ็กต์
  3. สมาชิก rest ของทูเพิล
  4. การกำหนดชนิดข้อมูลให้ฟังก์ชันหลายอาร์กิวเมนต์
← กลับไปที่ TypeScript Academy