Destructuring และ spread/rest

แยกข้อมูลออกจากออบเจกต์และอาร์เรย์อย่างสะอาดตา แล้วคัดลอกและรวมโครงสร้างด้วยตัวดำเนินการ spread

8 นาที · 3 คำถาม

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

const user = {
  id: 42,
  name: "Lea",
  address: { city: "Lyon", zip: "69001" }
};

const { name, address: { city } } = user;
const { role = "guest" } = user;

console.log(name, city, role); // "Lea" "Lyon" "guest"

Destructuring ยังใช้ได้กับอาร์เรย์ด้วย โดยครั้งนี้อ้างอิงตามตำแหน่ง การใช้งานที่เป็นมืออาชีพที่สุดยังคงเป็นการใช้กับพารามิเตอร์ของฟังก์ชัน: แทนที่จะรับออบเจกต์ที่มองไม่เห็นเนื้อใน ลายเซ็นของฟังก์ชันจะประกาศอย่างชัดเจนว่าคาดหวังคุณสมบัติใดบ้าง โค้ดจึงกลายเป็นเอกสารในตัวเอง

const podium = ["gold", "silver", "bronze"];
const [first, , third] = podium;
console.log(first, third); // "gold" "bronze"

function formatUser({ name, role = "guest" }) {
  return `${name} (${role})`;
}

console.log(formatUser({ name: "Sam" }));
// "Sam (guest)"

ตัวดำเนินการ ... ตัวเดียวกันมีสองบทบาท ในฐานะ spread มันจะกระจายอาร์เรย์หรือออบเจกต์ออกเพื่อคัดลอกหรือรวมเข้าด้วยกัน: ใช้กันอย่างแพร่หลายในการกำหนดค่าตั้งต้นเริ่มต้นแล้วเขียนทับ ส่วนในฐานะ rest มันจะรวบรวม "ทุกอย่างที่เหลืออยู่" เข้าไว้ในอาร์เรย์ เช่น เพื่อรับอาร์กิวเมนต์จำนวนไม่คงที่

const baseConfig = { theme: "dark", lang: "fr" };
const overrides = { lang: "en" };
const config = { ...baseConfig, ...overrides };
// { theme: "dark", lang: "en" }

const scores = [12, 18, 9];
const allScores = [...scores, 20]; // [12, 18, 9, 20]

function sumAll(...numbers) {
  return numbers.reduce((sum, n) => sum + n, 0);
}
console.log(sumAll(1, 2, 3)); // 6

แบบฝึกหัดทางความคิดก่อนไปทำแบบทดสอบ: ใน { ...baseConfig, ...overrides } จะเกิดอะไรขึ้นหากออบเจกต์ทั้งสองต่างก็นิยาม lang? ตัวที่เขียนหลังสุดจะชนะ รายละเอียดเรื่องลำดับนี้เองที่ทำให้รูปแบบ "ค่าเริ่มต้นแล้วเขียนทับ" เป็นไปได้

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. บรรทัด const { city } = user; ทำอะไร?
   • สร้างตัวแปร city ที่มีค่าเป็น user.city
   • เปลี่ยนชื่อออบเจกต์ user เป็น city
   • สร้างออบเจกต์ว่างใหม่ชื่อ city
2. ใน function log(...args) ค่า args ภายในฟังก์ชันคืออะไร?
   • ออบเจกต์แบบคีย์-ค่า
   • อาร์เรย์จริงที่มีอาร์กิวเมนต์ทั้งหมดที่ได้รับ
   • สตริง
   • อาร์กิวเมนต์ตัวแรกเท่านั้น
3. หลังจาก const copy = { ...original }; ออบเจกต์ที่ซ้อนอยู่ภายในถูกทำสำเนาซ้ำหรือไม่?
   • ใช่ สำเนาเป็นอิสระอย่างสมบูรณ์
   • ไม่ มันยังคงถูกใช้ร่วมกัน: สำเนาเป็นแบบตื้น
   • มันถูกลบออกจากสำเนา