Yıkıcı Atamaya Yeniden Giriş

JavaScript yazıyorsanız, muhtemelen ES2015'e ve tanıtılan tüm yeni dil standartlarına aşinasınızdır. İnanılmaz popülerlik gören böyle bir standart, atamayı yok etmektir. Bir diziye veya nesneye "dalma" ve içindeki bir şeye daha doğrudan referans verme yeteneği. Genelde böyle bir şey olur.

 const response = { status: 200, data: {} } // instead of response.data we get... const {data} = response //now data references the data object directly const objectList = [ { key: 'value' }, { key: 'value' }, { key: 'value' } ] // instead of objectList[0], objectList[1], etc we get... const [obj, obj1, obj2] = objectList // now each object can be referenced directly

Ancak, yok etme ataması o kadar güçlü bir sözdizimi parçasıdır ki, birçok geliştirici, hatta ilk yayınlandığından beri onu kullananlar bile, yapabileceği bazı şeyleri unutur. Bu gönderide, hem nesne hem de dizi yıkımı için, bazen her ikisi için de beş gerçek dünya örneğini inceleyeceğiz! Ve sadece eğlence olsun diye, geçen gün rastladığım tuhaf bir örneği ekleyeceğim.

1. İç İçe Yıkım

Bir nesnenin içindeki üst düzey bir anahtara veya bir dizinin ilk öğesine erişebilmek güçlüdür, ancak aynı zamanda biraz sınırlayıcıdır. Yalnızca bir karmaşıklık düzeyini ortadan kaldırır ve gerçekten peşinde olduğumuz şeye erişmek için hala bir dizi nokta veya [0] referansla sonuçlanırız.

Görünen o ki, yıkım en üst seviyenin ötesinde işe yarayabilir. Ve bunu yapmak için geçerli sebepler olabilir. Bir HTTP isteğinden alınan bu nesne yanıtı örneğini alın. Veri nesnesinin ötesine geçmek ve yalnızca kullanıcıya erişmek istiyoruz. Aradığımız anahtarları bildiğimiz sürece bu bir sorun değil.

 const response = { status: 200, data: { user: { name: 'Rachel', title: 'Editor in Chief' }, account: {}, company: 'Smashing Magazine' } } const {data: {user}} = response // user is { name: 'Rachel', title: 'Editor in Chief'}

Aynısı iç içe diziler için de yapılabilir. Bu durumda, anahtarı olmadığı için anahtarı bilmenize gerek yoktur. Bilmeniz gereken şey, aradığınız şeyin konumudur. Aradığınız öğeye kadar her öğe için bir referans değişkeni (veya virgül yer tutucusu) sağlamanız gerekir (buna daha sonra geleceğiz). Değişken, dizi içindeki bir değeri eşleştirmeye çalışmadığı için herhangi bir şekilde adlandırılabilir.

 const smashingContributors = [['rachel', ['writer', 'editor', 'reader']], ['laurie', ['writer', 'reader']]] const [[rachel, roles]] = smashingContributors // rachel is 'rachel' // roles is [ 'writer', 'editor', 'reader' ]

Bu özelliklerin herhangi bir araçta olduğu gibi akıllıca kullanılması gerektiğini unutmayın. Kullanım durumunuzu ve kod tabanınızın hedef kitlesini tanıyın. Okunabilirliği ve yolda değişiklik kolaylığını düşünün. Örneğin, yalnızca bir alt diziye erişmek istiyorsanız, belki bir harita daha uygun olabilir.

2. Nesne ve Dizi Yıkımı

Nesneler ve diziler ortak veri yapılarıdır. Aslında o kadar yaygın ki, çoğu zaman diğerinin içinde ortaya çıkıyor. Yuvalanmış yıkımın ötesinde, eriştiğimiz harici yapıdan farklı türde bir veri yapısında olsalar bile yuvalanmış özelliklere erişebiliriz.

Bir nesnenin içindeki bu dizi örneğini alın.

 const organization = { users: ['rachel', 'laurie', 'eric', 'suzanne'], name: 'Smashing Magazine', site: 'https://www.smashingmagazine.com/' } const {users:[rachel]} = organization // rachel is 'rachel'

Bunun tersi kullanım durumu da geçerlidir. Bir dizi nesne.

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name}] = users // name is 'rachel'

Görünüşe göre, bu örnekte biraz sorunumuz var. Yalnızca ilk kullanıcının adına erişebiliriz; aksi takdirde, geçersiz olan iki farklı dizgeye başvuruda bulunmak için 'name'yi kullanmayı deneyeceğiz. Bir sonraki yıkım senaryomuz bunu çözmeli.

3. Takma adlar

Yukarıdaki örnekte gördüğümüz gibi (çıkartmak istediğimiz farklı nesnelerin içinde yinelenen anahtarlar olduğunda), bunu “tipik” şekilde yapamayız. Değişken adları aynı kapsamda tekrarlanamaz (bunu açıklamanın en basit yolu budur, açıkçası bundan daha karmaşıktır).

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name: rachel}, {name: laurie}] = users // rachel is 'rachel' and laurie is 'laurie'

Aliasing yalnızca nesneler için geçerlidir. Bunun nedeni, dizilerin, mevcut bir nesne anahtarıyla eşleşmek yerine geliştiricinin seçtiği herhangi bir değişken adını kullanabilmesidir.

4. Varsayılan Değerler

Yıkım genellikle referans aldığı değerin orada olduğunu varsayar, ama ya değilse? Tanımsız değerlerle kod atmak asla hoş değildir. İşte o zaman varsayılan değerler işe yarar.

Nesneler için nasıl çalıştıklarına bakalım.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name='Brian', role='publisher'} = user // name is Luke // role is publisher

Başvurulan anahtarın zaten bir değeri varsa, varsayılan yok sayılır. Anahtar nesnede yoksa, varsayılan kullanılır.

Diziler için benzer bir şey yapabiliriz.

 const roleCounts = [2] const [editors = 1, contributors = 100] = roleCounts // editors is 2 // contributors is 100

Nesne örneğinde olduğu gibi, değer varsa, varsayılan yok sayılır. Yukarıdaki örneğe bakarak, dizide var olandan daha fazla öğeyi yok ettiğimizi fark edebilirsiniz. Daha az öğeyi yok etmeye ne dersiniz?

5. Değerleri Yok Saymak

Yıkmanın en iyi yanlarından biri, daha büyük bir veri yapısının parçası olan değerlere erişmenize izin vermesidir. Bu, bu değerleri izole etmeyi ve isterseniz içeriğin geri kalanını yok saymayı içerir.

Aslında bunun bir örneğini daha önce gördük, ama şimdi bahsettiğimiz kavramı izole edelim.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name} = user // name is Luke

Bu örnekte, organization asla bozmuyoruz ve bu kesinlikle sorun değil. user nesnesi içinde referans için hala kullanılabilir, bunun gibi.

 user.organization

Diziler için, öğeleri "yok saymanın" aslında iki yolu vardır. Nesneler örneğinde, ilişkili anahtar adını kullanarak özellikle dahili değerlere atıfta bulunuyoruz. Diziler bozulduğunda, değişken adı pozisyona göre atanır. Dizinin sonundaki öğeleri yok sayarak başlayalım.

 const roleCounts = [2, 100, 100000] const [editors, contributors] = roleCounts // editors is 2 // contributors is 100

Dizideki birinci ve ikinci öğeleri bozuyoruz ve gerisi alakasız. Peki ya sonraki unsurlar? Konum tabanlıysa, istediğimiz öğeye ulaşana kadar her bir öğeyi yok etmemiz gerekmez mi?

Görünüşe göre, yapmıyoruz. Bunun yerine, bu öğelerin varlığını ima etmek için virgül kullanırız, ancak başvuru değişkenleri olmadan bunlar yok sayılır.

 const roleCounts = [2, 100, 100000] const [, contributors, readers] = roleCounts // contributors is 100 // readers is 100000

Ve ikisini aynı anda yapabiliriz. Virgül yer tutucusunu kullanarak öğeleri istediğimiz yerde atlıyoruz. Ve yine, nesne örneğinde olduğu gibi, "yok sayılan" öğeler roleCounts dizisinde başvuru için hala mevcuttur.

kötü örnek

Yıkımın gücü ve çok yönlülüğü, gerçekten tuhaf şeyler yapabileceğiniz anlamına da gelir. İşe yarayıp yaramayacaklarını söylemek zor ama bunun bir seçenek olduğunu bilmeye değer!

Böyle bir örnek, yüzeysel kopyalar oluşturmak için yıkımı kullanabilmenizdir.

 const obj = {key: 'value', arr: [1,2,3,4]} const {arr, arr: copy} = obj // arr and copy are both [1,2,3,4]

İmha etmenin kullanılabilecek başka bir şey de referans kaldırmadır.

 const obj = {node: {example: 'thing'}} const {node, node: {example}} = obj // node is { example: 'thing' } // example is 'thing'

Her zaman olduğu gibi, okunabilirlik son derece önemlidir ve tüm bu örneklerin yargıda kullanılması gerekir. Ancak tüm seçeneklerinizi bilmek, en iyisini seçmenize yardımcı olur.

Çözüm

JavaScript karmaşık nesneler ve dizilerle doludur. İster bir HTTP isteğinden gelen yanıt isterse statik veri kümeleri olsun, gömülü içeriğe verimli bir şekilde erişebilmek önemlidir. Yıkıcı atamayı kullanmak, bunu yapmanın harika bir yoludur. Yalnızca birden çok yuvalama düzeyini yönetmekle kalmaz, aynı zamanda odaklanmış erişime izin verir ve tanımsız başvurular durumunda varsayılanlar sağlar.

Yıkımı yıllarca kullanmış olsanız bile, spesifikasyonda gizlenmiş çok fazla ayrıntı var. Umarım bu makale, dilin size sağladığı araçları hatırlatmıştır. Bir dahaki sefere kod yazarken, belki bunlardan biri işe yarar!