Spesifikasi ES2023 kini menyertakan empat kaedah array—toSorted, toReversed, toSpliced dan with—yang mengembalikan array baharu dan bukannya mengubah suai array yang asal. Dalam React dan perpustakaan UI lain yang bergantung pada immutable state, pembantu ini membolehkan pembangun menggantikan helah spread-operator yang sekian lama menjadi punca pepijat dan kod lewah (boilerplate).

Mengapa perubahan ini penting

React memutuskan sama ada untuk melakukan re-render pada komponen dengan membandingkan rujukan keadaan (state reference) sebelumnya dengan yang baharu. Jika rujukan tidak berubah, React menganggap tiada apa yang berubah. Kaedah klasik Array.prototype.sort menyusun array secara in-place dan mengembalikan rujukan yang sama, jadi panggilan seperti setTasks(prev => prev.sort(fn)) menyebabkan React tidak menyedari kemas kini tersebut. UI akan kekal dengan data lapuk, satu pepijat yang sering berlaku dalam projek sebenar.

Pembangun telah mengatasi masalah ini dengan menyalin array terlebih dahulu—biasanya dengan spread operator—supaya langkah penyusunan menghasilkan rujukan yang baharu:

setTasks(prev => [...prev].sort((a, b) => b.priority - a.priority));

Corak tersebut berfungsi, tetapi ia menambah kekusutan dan mudah dilupakan. Kaedah ES2023 baharu memberikan cara yang terus dan mudah dibaca untuk menghasilkan array baharu sambil mengekalkan yang asal tanpa perubahan.

Empat kaedah tanpa mutasi (non-mutating methods)

  • toSorted(compareFn?) – berfungsi seperti sort tetapi mengembalikan salinan yang telah disusun. Tiada perubahan pada array sumber.
  • toReversed() – menggantikan reverse. Ia menghasilkan salinan yang diterbalikkan, mengekalkan susunan asal.
  • toSpliced(start, deleteCount, ...items) – menyerupai splice tanpa kesan sampingan (side effects). Array yang dikembalikan mencerminkan penyisipan atau pembuangan, manakala sumber kekal sama.
  • with(index, value) – menggantikan elemen pada index dengan value dan mengembalikan array baharu. Ia menggantikan corak biasa menggunakan map atau penggantian elemen melalui spread-operator.

Kesemua empat kaedah ini adalah sebahagian daripada standard ECMAScript dan tersedia dalam versi terkini pelayar utama serta Node.js 20.

Bagaimana rupa kod sekarang

Menyusun senarai

// Before
setTasks(prev => [...prev].sort((a, b) => b.priority - a.priority));

// After
setTasks(prev => prev.toSorted((a, b) => b.priority - a.priority));

Mengemas kini item tunggal

// Before
setItems(prev =>
  prev.map((item, i) => (i === idx ? newItem : item))
);

// After
setItems(prev => prev.with(idx, newItem));

Menerbalikkan array

setLogs(prev => prev.toReversed());

Membuang elemen

setTags(prev => prev.toSpliced(removeIdx, 1));

Sintaks baharu ini menghapuskan keperluan untuk spread operator tambahan atau gelung pemetaan (mapping loops), menjadikan kemas kini keadaan lebih mudah dibaca dan kurang berisiko ralat.

Siapa yang mendapat manfaat dan siapa yang mungkin teragak-agak

Pembangun yang menggunakan React, Vue, Redux, Zustand, atau mana-mana rangka kerja yang memerlukan struktur data immutable akan mendapat model mental yang lebih jelas: panggil kaedah, dapatkan array baharu, dan berikan ia kembali kepada setter. Pengurangan kod lewah (boilerplate) juga boleh menjimatkan beberapa milisaat dalam kitaran render, kerana enjin mengelakkan penciptaan salinan perantara sebelum penyusunan.

Pasukan dengan pelayar lama mungkin perlu menyertakan polyfills. Kaedah ini tidak terdapat dalam versi Safari atau Internet Explorer yang lebih lama, jadi binaan produksi yang menyasarkan platform tersebut mesti menyertakan fallback. Ini menambah sedikit beban saiz bungkusan (bundle size), tetapi pertukaran tersebut selalunya berbaloi dengan peningkatan kebolehbacaan.

Penulis perpustakaan mungkin perlu mengemas kini definisi jenis (contohnya, TypeScript) untuk mendedahkan tandatangan (signatures) baharu. Sehingga definisi tersebut tersedia dalam pakej @types rasmi, pembembang mungkin akan melihat ralat jenis buat sementara waktu.

Apa yang perlu diperhatikan seterusnya

  • Metrik penggunaan – alatan seperti ESLint mungkin akan menambah peraturan yang menandakan panggilan array yang boleh diubah (mutable) dalam state setter, mendorong pembangun ke arah kaedah baharu.
  • Kajian prestasi – penanda aras awal menunjukkan kaedah non-mutating asli adalah lebih pantas daripada salinan spread-operator yang diikuti oleh operasi mutable, tetapi data dunia sebenar akan mengesahkan impaknya.
  • Cadangan lanjut – jawatankuasa ECMAScript terus meneroka API immutable-by-default; memerhatikan peringkat akan datang boleh mendedahkan lebih banyak pembantu yang mengikut corak yang sama.

Kesimpulan

Spesifikasi ECMAScript terkini memberikan pembangun UI cara terbina dalam dan ringkas untuk mengekalkan keadaan immutable tanpa gimnastik spread-operator yang telah menyebabkan pepijat yang tidak terkira banyaknya. Dengan menukar sort, reverse, splice dan penggantian berasaskan indeks kepada toSorted, toReversed, toSpliced dan with, anda membolehkan pengesanan perubahan React berfungsi seperti yang dimaksudkan dan menjadikan kod anda lebih mudah dibaca. Jika pelayar sasaran anda menyokong kaedah baharu ini—atau anda bersedia untuk menggunakan polyfill—sudah tiba masanya untuk meninggalkan corak lama dan membiarkan bahasa pengaturcaraan melakukan kerja berat tersebut.