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

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

คัดลอกออบเจ็กต์ด้วยการกระจาย

const user = { name: 'Ada', age: 36 };
const older = { ...user, age: 37 };

console.log(user.age);
console.log(older.age);

ออบเจ็กต์เหล่านี้แตกต่างกัน

const original = { x: 1 };
const copy = { ...original };

console.log(original === copy);
console.log(original.x === copy.x);

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

const point = { x: 1, y: 2 };
const point3d = { ...point, z: 3 };

console.log(point);
console.log(point3d);

ลบพร็อพเพอร์ตีโดยไม่เปลี่ยนแปลงข้อมูลเดิม

const user = { id: 1, name: 'Ada', secret: 'x' };
const { secret, ...safe } = user;

console.log(safe);
console.log(user.secret);

คัดลอกอาร์เรย์ด้วยการกระจาย

const nums = [1, 2, 3];
const copy = [...nums];
const doubled = nums.map(n => n * 2);

console.log(nums);
console.log(doubled);

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

const list = ['a', 'b'];
const added = [...list, 'c'];
const prepended = ['z', ...list];

console.log(list);
console.log(added);
console.log(prepended);

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

const nums = [1, 2, 3, 4];
const withoutThree = nums.filter(n => n !== 3);

console.log(nums);
console.log(withoutThree);

อัปเดตออบเจ็กต์ที่ซ้อนอยู่

const state = { user: { name: 'Ada', age: 36 }, theme: 'dark' };
const updated = {
  ...state,
  user: { ...state.user, age: 37 }
};

console.log(state.user.age);
console.log(updated.user.age);
console.log(state.theme === updated.theme);

อัปเดตรายการในอาร์เรย์

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

console.log(todos[1].done);
console.log(updated[1].done);

เหตุใดการอัปเดตแบบไม่เปลี่ยนแปลงจึงสำคัญ

function setName(state, name) {
  return { ...state, name };
}
const s1 = { name: 'old', count: 0 };
const s2 = setName(s1, 'new');
console.log(s1.name, s2.name);

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทบทวน: รูปแบบการอัปเดตแบบไม่เปลี่ยนแปลง