Akademi JavaScript · Pelajaran

Mengelakkan Mutasi

Gunakan salinan tanpa mengubah data asal.

Pelajaran 3 daripada 413 langkah

Mengelakkan Mutasi ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Sebab perlu mengelakkan perubahan

Mengubah data yang dikongsi menyebabkan pepijat yang sukar dikesan: perubahan di satu tempat mengejutkan kod di tempat lain. Gaya fungsian mengutamakan penciptaan nilai baharu berbanding pengubahsuaian nilai sedia ada (ketidakbolehubahan).

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

Spread untuk menyalin tatasusunan

Operator spread ... menghasilkan salinan cetek bagi tatasusunan, membolehkan anda menambah elemen tanpa menyentuh sumber.

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

Spread untuk menyalin objek

Spread juga berfungsi untuk objek, dengan menghasilkan objek baharu yang mempunyai sifat sama serta apa-apa penggantian.

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

Kaedah tatasusunan yang tidak mengubah

Utamakan kaedah yang mengembalikan tatasusunan baharu: map, filter, concat dan slice. Elakkan kaedah yang mengubah nilai seperti push, splice dan sort di tempat asal.

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]

Menambah tanpa mengubah

Daripada menggunakan push, bina tatasusunan baharu dengan spread atau concat.

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

Membuang tanpa mengubah

Gunakan filter untuk menghasilkan tatasusunan baharu tanpa sesuatu elemen, bukannya splice.

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

Mengemas kini item tanpa mengubah

Untuk mengubah satu elemen, gunakan map pada tatasusunan dan kembalikan nilai baharu bagi item yang sepadan.

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

Cetek berbanding mendalam

Spread menyalin satu aras ke dalam. Objek bersarang masih merupakan rujukan yang dikongsi. Untuk mengemas kini data bersarang tanpa mengubahnya, gunakan spread pada setiap aras yang ingin anda ubah.

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

Membekukan demi keselamatan

Object.freeze menghalang perubahan tidak sengaja pada objek semasa masa jalan, lalu menjadikan ketidakbolehubahan lebih jelas (sedalam satu aras).

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

Const bukan ketidakbolehubahan

Kekeliruan yang biasa berlaku: const hanya menghalang penetapan semula pemboleh ubah, bukan perubahan pada nilai yang dipegangnya. Tatasusunan yang diisytiharkan dengan const masih boleh ditambah elemen.

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

Ringkasan manfaat

Kemas kini yang tidak mengubah menjadikan penjejakan perubahan mudah (bandingkan rujukan), membolehkan buat asal/ulangi, menghalang kesan misteri dari jauh dan serasi secara semula jadi dengan fungsi tulen.

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

Semakan pantas

Mengelakkan perubahan.

Jawab dalam pelajaran interaktif

Ringkasan

Ketidakbolehubahan bermaksud mencipta nilai baharu, bukannya mengubah nilai sedia ada. Gunakan spread untuk menyalin tatasusunan dan objek, utamakan kaedah yang tidak mengubah (map, filter, concat) dan gunakan spread pada setiap aras untuk kemas kini bersarang. Ingat bahawa const menghalang penetapan semula, bukan perubahan; Object.freeze menambah perlindungan semasa masa jalan. Kemas kini yang tidak mengubah memudahkan pengesanan perubahan dan penulisan kod tulen.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 59
Pelajaran: 200

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mengelakkan Mutasi” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Mengelakkan Mutasi”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mengelakkan Mutasi”?

Gunakan salinan tanpa mengubah data asal. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Mengelakkan Mutasi” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Akademi JavaScript