การแยกโครงสร้างออบเจ็กต์และ Spread

การแยกโครงสร้างคืออะไร

พื้นฐานการแยกโครงสร้างออบเจ็กต์

const user = { name: 'Alice', age: 30, role: 'admin' };

// Without destructuring:
const name = user.name;
const age = user.age;

// With destructuring:
const { name, age, role } = user;
console.log(name); // 'Alice'
console.log(age);  // 30

การเปลี่ยนชื่อตัวแปรที่แยกโครงสร้างแล้ว

const { name: userName, age: userAge } = user;
console.log(userName); // 'Alice'

ค่าเริ่มต้นในการแยกโครงสร้าง

const { name, role = 'viewer', theme = 'light' } = user;
// role is 'admin' (from object)
// theme is 'light' (default — not in object)

การแยกโครงสร้างออบเจ็กต์แบบซ้อนกัน

const order = {
  id: 42,
  customer: { name: 'Bob', email: 'bob@example.com' },
  total: 99.99
};
const { id, customer: { name, email }, total } = order;
console.log(name); // 'Bob'

การแยกโครงสร้างอาร์เรย์

const [first, second, , fourth] = [10, 20, 30, 40];
console.log(first);  // 10
console.log(second); // 20
console.log(fourth); // 40

// Swap variables:
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1

การแยกโครงสร้างพารามิเตอร์ของฟังก์ชัน

function greet({ name, greeting = 'Hello' }) {
  return `${greeting}, ${name}!`;
}
greet({ name: 'Alice' });          // 'Hello, Alice!'
greet({ name: 'Bob', greeting: 'Hi' }); // 'Hi, Bob!'

ตัวดำเนินการกระจายกับออบเจ็กต์

const defaults = { theme: 'light', lang: 'en', debug: false };
const userPrefs = { theme: 'dark', lang: 'fr' };
const settings = { ...defaults, ...userPrefs };
// { theme: 'dark', lang: 'fr', debug: false }

ตัวดำเนินการกระจายกับอาร์เรย์

const base = [1, 2, 3];
const extended = [...base, 4, 5]; // [1, 2, 3, 4, 5]
const prepended = [0, ...base];   // [0, 1, 2, 3]
const combined = [...base, ...extended]; // [1, 2, 3, 1, 2, 3, 4, 5]

ไวยากรณ์สำหรับรวบรวมส่วนที่เหลือในการแยกโครงสร้าง

const { name, ...rest } = { name: 'Alice', age: 30, role: 'admin' };
console.log(name); // 'Alice'
console.log(rest); // { age: 30, role: 'admin' }

const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]

สำเนาแบบตื้นเทียบกับสำเนาแบบลึก

const a = { x: 1, nested: { y: 2 } };
const b = { ...a };
b.x = 99;           // a.x is still 1 (shallow copy OK)
b.nested.y = 99;    // a.nested.y is now 99! (reference shared)

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

ทบทวน: การแยกโครงสร้างและ Spread