Modern JavaScript, basit ve yapılandırılmış bir şekilde kod yazmayı kolaylaştıran birçok yeni özelliğe sahiptir. ES6+'da bulunan kullanışlı modern özelliklerden biri, dizi ve nesne yapılarının bozulmasıdır.
React.js ve Angular gibi JavaScript çerçeveleri, bu tekniğin kullanılmasını teşvik eder. Bu nedenle, yıkımın neyle ilgili olduğunu ve kod yazarken nasıl kullanılacağını anlamak çok önemlidir.
JavaScript'te Nesne ve Dizi Yıkımı Nedir?
JavaScript'te yok etme, bir diziden veya nesneden değerlerin paketten çıkarılması sürecini ifade eder. Tek tek dizi öğeleriyle veya bir nesnedeki değerlerle ilgileniyorsanız, ağır kaldırmadan dizilerden veya nesnelerden değer almanın daha özlü bir yolunu sağlar.
Karmaşık bir işlev veya ifadeden dönen değerleri işlerken de yararlıdır. Bu konseptlerden biri React kodunu yazarken izlemeniz gereken en iyi uygulamalar.
Diziler Nasıl Yıkılır
Dizi yapısını bozma konusunda bir fikir edinmek için işte bir örnek kod:
sabit dizi = [1, 2];
sabit [a, b] = dizi;
konsol.log (bir) // konsolda 1 yazdırır
konsol.log (b) // konsolda 2 yazdırır
Bu kod, değerleri atamak için yıkımı kullanır. varış—1 ve 2— değişkenlere A Ve B, sırasıyla. Bu, yıkımın arkasındaki temel kavramdır. Sağ tarafta bir diziniz veya nesneniz var ve öğeleri paketten çıkarıp sol taraftaki değişkenlere ayrı ayrı atayın.
Başlık altında, JavaScript değerleri şuradan kopyalar: varış ve bunları sol taraftaki değişkenlere şu şekilde atar:
sabit dizi = [1,2];
sabit bir = dizi[0];
sabit b = dizi[1];
Gördüğünüz gibi, nesne veya köşeli parantez notasyonunu kullanmaktan farklı olarak, yapıyı bozmak bunu yapmanın daha özlü bir yoludur. Bununla birlikte, bu sözdizimi, karmaşık dizilerle veya dizileri veya dizeleri döndüren işlevlerle çalışırken büyük olasılıkla faydalı olacaktır.
Aşağıdaki örnek kodu kontrol edin:
sabit [gün, ay, tarih, yıl, saat, saat dilimi] = Tarih().bölmek(' ')
// Çağırma Tarihi(), geçerli tarihi şu biçimde döndürür:
// Pzt 20 Şubat 2023 13:07:29 GMT+0000
konsol.log (gün) // Pzt'yi yazdırır
konsol.log (ay) // Şubat'ı yazdırır
konsol.log (tarih) // 20 yazdırır
Bu kod örneğinde, çağırarak geçerli tarihle yeni bir dize oluşturuyoruz. Tarih(). Sonra, kullanırız bölmek(), A JavaScript dize yöntemi, ayırıcı olarak boşluk kullanarak dizedeki öğeleri ayırmak için. bölmek(' ') bir dizi döndürür ve değerleri bireysel değişkenlere atamak için yapıyı bozarız.
Diziniz paketi açtığınızdan daha fazla öğe içeriyorsa, JavaScript'in fazladan öğeleri yok sayacağını unutmayın.
sabit dizi = [1, 2, 3, 4];
sabit [a, b] = dizi;
konsol.log (bir) // 1 yazdırır
konsol.log (b) // 2 yazdırır
// 3 ve 4 değerleri herhangi bir değişkene atanmaz; görmezden gelinirler
Bu durumda, kalan öğeleri bir değişkende depolamak istiyorsanız aşağıdaki gibi bir rest parametresi kullanın:
sabit dizi = [1, 2, 3, 4];
sabit [a, b, ...dinlenme] = arr;
konsol.log (dinlenme) // [3,4] yazdırır
Bazen, belirli bir öğeyi umursamayabilirsiniz. JavaScript'in yok etme modeli, boş bir virgül kullanarak belirli öğeleri atlamanıza da olanak tanır.
sabit dizi = [1, 2, 3, 4];
sabit [a,, c] = dizi;
konsol.log (c) // 3 yazdırır
Yukarıdaki kod, değeri yoksaymak için boş alanı kullanır 2 dizide varış. Değer vermek yerine 2 değişkene C, dizideki bir sonraki öğeye atlar. Ayrıca, içinde saklanacak bir değişken belirtmediği için dördüncü değeri de yok sayar.
Aksine, paketi açtığınızdan daha az öğeye ihtiyacınız varsa, süreç Tanımsız bu ekstra değişkenlere değer.
sabit dizi = [1];
sabit [a, b] = dizi;
konsol.log (bir) // 1 yazdırır
konsol.log (b) // tanımsız yazdırır
Değişkenlerin tanımsız olmasını önlemek için, dizi uzunluğundan emin değilseniz varsayılan değerleri aşağıdaki gibi ayarlayabilirsiniz (varsayılan değerleri atamak bir gereklilik değildir):
sabit dizi = [1];
sabit [bir = '10', b = 'sağlanmadı'] = dizi;
konsol.log (bir) // 1 yazdırır
konsol.log (b) // "sağlanmadı" yazdırır
Bu yıkım, değeri atar 1 değişkene A, varsayılan değerinin üzerine yazılır. Değişken B bir değer sağlanmadığı için varsayılan değerini korur.
Nesneler Nasıl İmha Edilir
Nesneleri yok etmek, dizilerden çok farklı değildir. Tek fark, dizilerin yinelenebilir olması ve nesnelerin olmamasıdır, bu da işleri yapmanın biraz farklı bir yolu ile sonuçlanır.
Nesnelerle çalışırken, atama operatörünün sol tarafındaki değişkenler de nesneler gibi başlatılır:
sabit kişi = {isim: 'Alvin', yaş: 10, yükseklik: 1};
sabit {isim, yaş, boy} = kişi;
konsol.log (isim) // 'Alvin'i yazdırır
konsol.log (yükseklik) // 1 yazdırır
Koddan özellik adlarını kullanıyoruz. kişi nesne. Ancak, nesnede tam özellik adlarını kullanmak zorunda değilsiniz. Farklı değişken adlarındaki değerleri aşağıdaki gibi bozabilir ve saklayabilirsiniz:
sabit kişi = {isim: 'Alvin', yaş: 10, yükseklik: 1};
sabit {isim: ilk adı, yaş: yıl, yükseklik: currentHeight} = kişi;
konsol.log (ad) // 'Alvin'i yazdırır
konsol.log (geçerli Yükseklik) // 1 yazdırır
Yapısını bozmak istediğiniz özellik değerini belirleyerek başlayın, ardından iki noktadan sonra değeri depolamak için kullanacağınız değişken adını belirtin. Ve tıpkı diziler gibi, var olmayan bir özellik adının yapısını bozmak, Tanımsız.
Bunu halletmek için, bir değişkene atamak istediğiniz özellik adının mevcut olmaması durumunda benzer şekilde varsayılan değerleri belirleyebilirsiniz:
sabit kişi = {isim: 'Alvin', yaş: 10, yükseklik: 1};
sabit {isim, yaş, boy, konum='Dünya çapında'} = kişi;
konsol.log (isim) // 'Alvin'i yazdırır
konsol.log (konum) // 'Dünya çapında' yazdırır
Nesneler değerleri anahtar/değer çiftlerinde sakladıklarından, sol taraftaki değişkenlerin sırası bir nesne için önemli değildir. Bu nedenle, aşağıdaki kod aynı sonuçları verecektir:
sabit kişi = {isim: 'Alvin', yaş: 10, yükseklik: 1};
sabit {yaş, boy, isim} = kişi;
konsol.log (isim) // 'Alvin'i yazdırır
konsol.log (yükseklik) // 1 yazdırır
Son olarak, dizilere benzer şekilde, rest parametresini aşağıdaki gibi bir değişkendeki birkaç değeri bozmak için de kullanabilirsiniz:
sabit kişi = {isim: 'Alvin', yaş: 10, yükseklik: 1};
sabit {isim, ...rest} = kişi;
konsol.log (isim) // 'Alvin'i yazdırır
konsol.log (dinlenme) // { yaş: 10, boy: 1 } yazdırır
Sadece dinlenme parametresinin her zaman en sonda olması gerektiğini unutmayın. Aksi takdirde, JavaScript bir istisna atar.
JavaScript'in Yıkımı İle Kod Kalitenizi Artırın
Javascript'in yok etme gibi modern özellikleri, yüksek düzeyde okunabilir kodlar yazmanıza olanak tanır. Yıkımı kullanarak, dizilerden ve nesnelerden değerleri hızlı bir şekilde açabilirsiniz. Yıkım, iki değişkenin değerlerini değiştirmek gibi diğer durumlarda da kullanışlı olabilir. Umarız, JavaScript'te yok etmenin ne anlama geldiğini artık anlamışsınızdır ve kod yazarken bunu kullanabilirsiniz.
