Browser baru-baru ini mendapatkan metode interoperabilitas baru yang dapat Anda panggil di Array:
Array.prototype.with()
Artikel ini membahas cara kerja metode ini dan cara menggunakannya untuk memperbarui array tanpa mengubah array asli.
Pengantar Array.prototype.with(index, value)
Metode Array.prototype.with(index, value)
menampilkan salinan array yang
dipanggil dengan index
yang ditetapkan ke value
baru yang Anda berikan.
Contoh berikut menunjukkan array usia. Anda ingin membuat salinan baru dari himpunan (array) saat mengubah usia kedua dari 15 menjadi 16:
const ages = [10, 15, 20, 25];
const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)
Memecah kode:: ages.with(...)
menampilkan salinan variabel ages
tanpa memodifikasi array asli. ages.with(1, …)
menggantikan item kedua
(index = 1
). ages.with(1, 16)
menetapkan item kedua ke 16
.
Ini adalah cara Anda dapat membuat salinan baru array dengan modifikasi.
Fungsi ini cukup berguna ketika Anda ingin memastikan bahwa {i>array <i}asli tetap ada tidak berubah, dan artikel ini membahas beberapa kasus penggunaan untuk hal tersebut. Tapi, untuk saat ini, lihat apa yang akan terjadi jika Anda menggunakan notasi tanda kurung:
const ages = [10, 15, 20, 25];
const newAges = ages;
newAges[1] = 16;
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)
Seperti yang dapat Anda lihat, variabel ages
juga diubah dalam contoh ini. Hal itu
karena saat Anda menetapkan ages = newAges
, JavaScript tidak menyalin array, tetapi
melainkan membuat referensi
ke {i>array<i} lainnya. Jadi, setiap perubahan pada
satu juga akan
mempengaruhi yang lain karena keduanya
mengarah ke {i>array<i} yang sama.
Array.prototype.with() dan ketetapan
Ketetapan adalah inti dari banyak library dan framework frontend, beberapa: React (dan redux), dan Vue
Selain itu, library dan framework lain tidak selalu memerlukan ketetapan tetapi mendorongnya untuk performa yang lebih baik: Angular dan Lit
Jadi, developer sering kali harus menggunakan metode lain yang menampilkan salinan array yang mengorbankan keterbacaan kode:
const ages = [10, 15, 20, 25];
const newAges = ages.map((age, index) => {
if (index === 1) {
return 16;
}
return age;
});
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (Remains unchanged)
Berikut contoh Codepen tentang cara .with()
dapat digunakan dalam kombinasi React
dengan useState untuk memperbarui array item secara permanen:
Karena metode .with()
menampilkan salinan array, Anda dapat membuat rantai beberapa
Panggilan .with()
atau bahkan metode array lainnya. Contoh berikut menunjukkan
menambah usia kedua dan ketiga dari {i>array:<i}
const ages = [10, 15, 20, 25];
const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1)
console.log(newAges); // [10, 16, 21, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)
Metode baru lainnya yang tidak dapat diubah
Tiga metode lain baru-baru ini memiliki kemampuan interoperabilitas:
Array.prototype.toReversed()
yang membalikkan {i>array<i} tanpa memutasikan array asli.Array.prototype.toSorted()
yang mengurutkan {i>array<i} tanpa mengubah {i>array<i} asli.Array.prototype.toSpliced()
yang berfungsi seperti.splice()
tetapi tanpa mengubah array asli.
Ketiga metode ini, menurut MDN, adalah versi penyalinan rekan-rekan. Metode ini juga dapat digunakan ketika ketetapan yang diharapkan atau lebih disukai.
Kesimpulannya, pembaruan yang tidak dapat diubah
dapat dicapai lebih mudah di
JavaScript dengan salah satu dari empat metode yang ditampilkan dalam artikel ini. Secara khusus, Anda bisa
metode .with()
memudahkan update satu elemen array
tanpa mengubah array asli.