Array.prototype.with ile sabit dizi güncellemeleri

Jad Joubran

Tarayıcılar kısa süre önce Diziler'de çağırabileceğiniz yeni bir birlikte çalışabilirlik yöntemi kazandı: Array.prototype.with().

Bu makalede, bu yöntemin işleyiş şekli ve bir diziyi güncellemek için nasıl kullanılacağı açıklanmaktadır. değiştirilmeden çalışır.

Array.prototype.with(index, value) tanıtımı

Array.prototype.with(index, value) yöntemi, bulunduğu dizinin bir kopyasını döndürür sağladığınız yeni value olarak ayarlanmış index ile çağrıldı.

Aşağıdaki örnekte bir yaş dizisi gösterilmektedir. Şunun yeni bir kopyasını oluşturmak istiyorsunuz: diziyi seçerseniz ikinci yaşı 15'ten 16'ya değiştirebilirsiniz:

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)

Kodun dökümü: ages.with(...), ages değişkeninin bir kopyasını döndürür. orijinal diziyi değiştirmeden kullanabilirsiniz. ages.with(1, …) ikinci öğenin yerini alır (index = 1). ages.with(1, 16), ikinci öğeyi 16 öğesine atar.

Bu şekilde, değişiklik yaparak dizinin yeni bir kopyasını oluşturdunuz.

Bu, orijinal dizinin kaldığından emin olmak istediğinizde oldukça yararlıdır. değişmemiştir. Bu makale, bununla ilgili bazı kullanım alanlarını kapsamaktadır. Ama şimdilik ayraç notasyonunu kullansaydınız ne olacağına bakalım:

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 🙁)

Gördüğünüz gibi, ages değişkeni bu örnekte de değiştirilmiş. İşte bu kadar çünkü ages = newAges atadığınızda JavaScript diziyi kopyalamaz diğer diziye bir başvuru oluşturur. Yani birdeki herhangi bir değişiklik her ikisi de aynı diziye işaret ettiğinden diğerini etkiler.

Array.prototype.with() ve sabitlik

Değişmezlik, birçok ön uç kitaplığının ve çerçevesinin merkezinde yer alır. React (ve redux) ve Vue

Ayrıca, diğer kitaplıklar ve çerçeveler her zaman değişkenlik gerektirmez, daha iyi performans için teşvik edin: Angular ve Lit

Bu nedenle geliştiriciler genellikle dizilerin kopyalarını döndüren başka yöntemler kullanmak ve kod okunabilirliğinden ödün verdi:

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)

.with() ürününün React'te birlikte nasıl kullanılabileceğine dair bir örnek Codepen'i aşağıda bulabilirsiniz useState ile bir öğe dizisini sabit olarak güncelleyin:

.with() yöntemi dizinin bir kopyasını döndürdüğünden, birden fazla dizeyi .with() çağrıları ve hatta diğer dizi yöntemleri. Aşağıdaki örnekte, dizideki ikinci ve üçüncü yaş sayıları artırılır:

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)

Diğer yeni sabit yöntemler

Üç yöntem daha yakın zamanda birlikte çalışabilir hale geldi:

• Array.prototype.toReversed() Bu da orijinal diziyi seçin.
• Array.prototype.toSorted() olmadan diziyi orijinal dizi değişiyor.
• Array.prototype.toSpliced() Bu örnekte olduğu gibi .splice(), ancak orijinal dizide değişiklik yapılmadı.

MDN'ye göre bu üç yöntem, referans işlemlerinin kopyalanması temsil eder. Bu yöntemler, sabitliğin beklendiği durumlarda da tercih edilir.

Sonuç olarak, değiştirilemez güncellemeler Bu makalede sunulan dört yöntemden birini içeren JavaScript. Özellikle, .with() yöntemi, dizinin tek bir öğesini güncellemeyi kolaylaştırır değiştirilmeden çalışır.