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

บทนำ

พื้นฐานอาร์เรย์

// Array destructuring: assign by position
const pair = [10, 20];

const [x, y] = pair;

console.log("x:", x);
console.log("y:", y);

การข้ามค่าและค่าเริ่มต้น

// Skip items with commas and provide defaults
const triple = [5, undefined, 9];

// Skip the middle, provide default for missing/undefined
const [first, , third = 0] = triple;

console.log("first:", first);
console.log("third with default:", third);

เทคนิคสลับค่า

// Swap values with destructuring
let a = "left";
let b = "right";

[a, b] = [b, a];

console.log("a:", a);
console.log("b:", b);

พื้นฐานอ็อบเจ็กต์และการเปลี่ยนชื่อ

// Object destructuring: assign by property name
const user = { name: "Ayla", level: 2, active: true };

// Basic
const { name, active } = user;

// Renaming and default
const { level: userLevel = 0 } = user;

console.log("name:", name);
console.log("active:", active);
console.log("userLevel:", userLevel);

ฟิลด์ซ้อนกัน (ระดับเริ่มต้น)

// Nested destructuring (keep it simple)
const config = {
  theme: { primary: "blue", contrast: "white" },
  flags: { compact: true }
};

const { theme: { primary }, flags: { compact } } = config;

console.log("primary:", primary);
console.log("compact:", compact);

แบบทดสอบไวยากรณ์การสลับค่า

สรุป