JavaScript Academy · บทเรียน

การหลีกเลี่ยงการกลายสภาพ

ทำงานกับสำเนาแทนการเปลี่ยนแปลงข้อมูลโดยตรง

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

เหตุผลที่ควรหลีกเลี่ยงการเปลี่ยนแปลงข้อมูล

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

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

ใช้การกระจายเพื่อคัดลอกอาร์เรย์

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

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

ใช้การกระจายเพื่อคัดลอกออบเจ็กต์

การกระจายใช้กับออบเจ็กต์ได้เช่นกัน โดยสร้างออบเจ็กต์ใหม่ที่มีคุณสมบัติเดิม รวมถึงค่าที่นำมาแทนที่

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

วิธีการของอาร์เรย์ที่ไม่เปลี่ยนแปลงข้อมูลเดิม

ควรเลือกใช้วิธีการที่คืนอาร์เรย์ใหม่ เช่น map, filter, concat และ slice หลีกเลี่ยงวิธีการที่เปลี่ยนข้อมูลเดิม เช่น push, splice และ sort ที่ทำงานกับอาร์เรย์เดิม

const a = [3, 1, 2];
const sorted = [...a].sort((x, y) => x - y);
console.log(sorted); // [1, 2, 3]
console.log(a);      // [3, 1, 2]

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

แทนที่จะใช้ push ให้สร้างอาร์เรย์ใหม่ด้วยการกระจายหรือ concat

const list = [1, 2];
const added = [...list, 3]; // not list.push(3)
console.log(added); // [1, 2, 3]

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

ใช้ filter เพื่อสร้างอาร์เรย์ใหม่ที่ไม่มีสมาชิกนั้น แทนการใช้ splice

const list = [1, 2, 3, 4];
const without3 = list.filter((n) => n !== 3);
console.log(without3); // [1, 2, 4]

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

หากต้องการเปลี่ยนสมาชิกหนึ่งตัว ให้ใช้ map กับอาร์เรย์ แล้วคืนค่าใหม่สำหรับสมาชิกที่ตรงกัน

const todos = [{ id: 1, done: false }, { id: 2, done: false }];
const updated = todos.map((t) =>
  t.id === 1 ? { ...t, done: true } : t
);
console.log(updated[0].done); // true

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

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

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

การแช่แข็งเพื่อความปลอดภัย

Object.freeze ป้องกันการเปลี่ยนแปลงออบเจ็กต์โดยไม่ตั้งใจขณะโปรแกรมทำงาน ทำให้ความไม่เปลี่ยนแปลงชัดเจนขึ้น (แต่มีผลเพียงหนึ่งระดับ)

const config = Object.freeze({ env: "prod" });
config.env = "dev";       // ignored in non-strict mode
console.log(config.env);  // "prod"

ค่าคงที่ไม่ได้หมายถึงความไม่เปลี่ยนแปลง

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

const arr = [1, 2];
arr.push(3);          // allowed - value mutated
console.log(arr);     // [1, 2, 3]
// arr = [] would throw

สรุปประโยชน์

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

const prev = { count: 0 };
const next = { ...prev, count: 1 };
console.log(prev === next); // false - easy to detect change

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

การหลีกเลี่ยงการเปลี่ยนแปลงข้อมูล

สรุป

ความไม่เปลี่ยนแปลงหมายถึงการสร้างค่าใหม่แทนการเปลี่ยนแปลงค่าเดิม ใช้การกระจายเพื่อคัดลอกอาร์เรย์และออบเจ็กต์ เลือกใช้วิธีการที่ไม่เปลี่ยนแปลงข้อมูลเดิม (map, filter, concat) และใช้การกระจายในแต่ละระดับเมื่ออัปเดตข้อมูลที่ซ้อนกัน โปรดจำไว้ว่า const ป้องกันการกำหนดค่าใหม่ ไม่ได้ป้องกันการเปลี่ยนแปลงข้อมูล ส่วน Object.freeze จะเพิ่มการป้องกันขณะโปรแกรมทำงาน การอัปเดตโดยไม่เปลี่ยนแปลงข้อมูลเดิมช่วยให้ตรวจจับการเปลี่ยนแปลงและเขียนโค้ดบริสุทธิ์ได้ง่าย

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

บทเรียน “การหลีกเลี่ยงการกลายสภาพ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การหลีกเลี่ยงการกลายสภาพ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การหลีกเลี่ยงการกลายสภาพ”

ทำงานกับสำเนาแทนการเปลี่ยนแปลงข้อมูลโดยตรง คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การหลีกเลี่ยงการกลายสภาพ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

← กลับไปที่ JavaScript Academy