Bilmeniz gereken 6 JavaScript özellikleri

Bir yıldan biraz daha uzun bir süre önce, Gutenberg’de rahatça geliştirilmeyi bilmeniz gereken 5 “yeni” JavaScript özelliklerinden bahsettik. Orada hangi nesnelerin yıkım ve diziler olduğunu, ok işlevlerinin nasıl yapılacağını, yayılmış operatörün ve dinlenmeyi vb. Öğrendik. Şanslısınız, JavaScript hala alıştıktan sonra, anlaşılması ve özlü kod yazmanıza yardımcı olacak birçok özelliğe sahip. Bugün size altı çok harika JavaScript özelliği göstereceğim. Operatörler, değişkenlerin kapsamı, vaatler, eşzamansız işlevler … Her şeyi öğrenmeye hazır mısınız?
#1 JavaScript’te operatörlerle isteğe bağlı zincirleme? İsteğe bağlı zincir operatörleri, tanımsız veya boş olmaması olasılığı olduğunda bir nesnenin özelliklerine basitleştirilmiş erişim sağlar. Örneğin, aşağıdakiler gibi bir nesneniz var: const toni = {name: ‘antonio’, detaylar: {yaş: 35,},}; Toni’nin yaşına erişmek için önce ayrıntılar özelliklerine erişmelisiniz ve sonra yaş: işlev getage (kişi) {return person.Details.AGE; } Önceki işlevde sahip olduğumuz sorun ve eminim sizin için yeni değil, kişiden beklediğimiz mülkün her zaman orada olmamasıdır. Yani kişi veya kişi. Tanımsız ayrıntılar, yukarıdaki işlev tür hatasını tetikler:
Kans (Toni); // 35 getage ({}); // KONUM TYERROR: Kişi.Details genellikle tanımsızdır, bazı güvenlik görevlileri ekleyerek bu sorunun üstesinden geliriz: Function Getge (kişi) {if (! Kişi) {return; } if (! Person.Details) {return; } return Person.Details.AGE; } Getage (Toni); // 35 getage ({}); // açıkça düzeltir. Ne yazık ki, üretilen işlev daha karmaşıktır ve bizi gerçekten önemli olan şeylerden uzaklaştıran birçok gürültülü kodlara sahiptir. Yolu geri dönmek ve çözümü daha basit bir şekilde geliştirmek için, yapmamız gereken isteğe bağlı zincir operatörlerini kullanmaktır? : işlev getage (kişi) {dönüş kişi? } Getage (Toni); // 35 getage ({}); // Temel olarak tanımsız, bu operatör tanımsız veya boş olmadığı sürece her özelliğe erişmemize izin verir. Tespit ettikten hemen sonra, var olmayan nesneden mülke erişmeye çalıştık, tanımsız olanı iade etti. #2 Nululish ( , Peki? Yanlış! Hepimiz bunu yaptık, ancak dikkatli değilseniz beklenmedik yan etkilere neden olabilir …
Misalnya, kita memiliki pemilih di toko Redux kita yang memungkinkan kita untuk mengambil nilai yang ditetapkan oleh pengguna. Jika pengguna belum menentukan nilai (yaitu, nilainya tidak undefined ), kami mengembalikan nilai default menggunakan || : function getValue( state ) { return state.value || 5; } Sekarang, mari kita lihat beberapa contoh dari apa yang akan kita dapatkan dengan fungsi sebelumnya setelah pengguna menetapkan satu nilai atau lainnya: // No setValue( x )… getValue(); // 5 setValue( 2 ); getValue(); // 2 setValue( 1 ); getValue(); // 1 setValue( 0 ); getValue(); // 5 Ups! Semuanya bekerja dengan baik sampai kami mencapai kasus terakhir! Ternyata, jika pengguna menyetel nilainya menjadi 0 , hasil dari fungsi tersebut menjadi 5 . Neden? Niye? Yah, alasannya cukup jelas: x||y mengembalikan y jika, dan hanya jika, x adalah nilai “palsu”. Ini biasanya berfungsi dengan baik, karena undefined adalah nilai falsey. Tapi begitu juga false atau 0 , misalnya.Pada kenyataannya, kami hanya ingin menetapkan nilai default ketika tidak ada. Jadi kita bisa menambahkan penjaga aman untuk memeriksa apakah ada nilai atau tidak: function getValue( state ) { if ( undefined === state.value ) return 5; return state.value; } dan kita bahkan dapat menulisnya menggunakan operator ternary jika kita ingin: function getValue( state ) { return undefined === state.value ? 5 : state.value; } tetapi, sekali lagi, kedua solusi tidak perlu memperumit kode. Untuk menetapkan nilai default ke variabel, kita harus menggunakan operator penggabungan nullish ?? , yang mengembalikan bagian kanan jika, dan hanya jika, bagian kiri adalah null atau undefined :
Function getVale (durum) {return state.value ?? 5; } ve, sürprizler!, Sonuçlar tam olarak istediğimiz şeydir: // setValue (x) yok … getVale (); // 5 setValue (2); getVale (); // 2 setValue (1); getVale (); // 1 setValue (0); getVale (); // 0 Oh, ve bu arada, bu operatörü görevle birlikte kullanabilirsiniz. Örneğin, bu: değer = değer? 5; Buna eşdeğer: değer ?? = 5; #3 Vaat asenkron vaat ve işlev, JavaScript’te uygulanan ve sonuçları hemen mevcut olmayan işlemler olan eşzamansız işlemlerle çalışırken kaynak kodumuzu basitleştirmemizi sağlayan bir mekanizmadır. Örneğin, sunucumuzdan veri almak istiyorsak, yanıtın anında olmayacağı açıktır, çünkü sunucunun istek almasını beklememiz, işlemeyi ve cevabı bize geri göndermesini beklemeliyiz. Sürümde. ve daha uzun olan JavaScript kütüphanesi (örneğin, jQuery). Bir arka çağrı ile uygulamak için kullanılır. Fikir oldukça basit: İsteğin kendisi ile birlikte, yanıtın kullanılabilir olduktan sonra çağrılması gereken işlevi (geri çağrı) belirleyin. Bu şekilde, eşzamansız işlemler (yani sunucudan veri alarak) tamamlandığında, kütüphane işlevlerimizi arayacak ve mantık devam edecek: {url: ‘https://server.com/wp-json/ WP/ Kullanıcılar/ 1 ‘, Başarı: (kullanıcı) => {console.log (kullanıcı);},}); Sadece izole bir isteği tetiklersek, bu çözüm oldukça zarif ve rahattır. Ancak, daha fazla istek yapmamız gerektiğinde, her şey hızla kirlenir. Örneğin, iki farklı kullanıcı istemek istiyorsak, geri arama puanlamalıyız:
JQuery.Ajax ({url: ‘https://server.com/wp-json/wp/users/1’, başarı: (user1) => {jquery.ajax ({url: ‘https: // sunucu .com /wp-json/wp/v2/kullanıcılar/2 ‘, başarı: (user2) => {console.log (user1, user2);},});},},}); Söz bu soruna bir çözümdür: Belli sonuçları hemen almazsanız (örneğin, sunucudan bir şey aldığımızda), hemen JavaScript Sözünü iade edebiliriz. Bu nesne, gerçek değerin bir ambalajıdır ve değerin gelecekte birkaç noktada mevcut olacağını “vaatler” gösterir. Örneğin, ilk çekimlerimizi randevu kullanarak yeniden yazarsak, şöyle görünecektir: const Promise = wp.apifetch ({url: ‘https://server.com/wp-json/wp/v2/users/1’ ,}); Promise.that ((kullanıcı) => console.log (kullanıcı)); Gördüğünüz gibi, wp.apifetch kullanıcıları 1’i sunucudan almalı, ancak hemen sonuç vermelidir. Ancak sonuç kullanıcının kendisi değil, istek tamamlandıktan sonra kullanıcıya verilecek bir söz. Bu nedenle, tek yapmamız gereken, tamamlandığında vaat yanıtını işleyecek çağrıları geri yazmaktır. Şimdi bunun daha önce olduğu kadar zor olmadığını düşünebilirsiniz, değil mi? Ayrıca, hala geri çağrılar kullanıyoruz … ancak bunun birkaç isteği birleştirmeye başladıktan sonra ne kadar olduğunu görebilirsiniz:
const Prompaster1 = wp.apifetch ({url: ‘https://server.com/wp-json/wp/v2/users/1’,}); const Prompaster2 = wp.apifetch ({url: ‘https://server.com/wp-json/wp/v2/users/2,}); Promise.Lall ([Promise1, Promption2]) .That (([user11, user2]) => console.log (user1, user2);); Bir randevu kullanarak, 1 ve 2 kullanıcı almak için iki paralel istek başlatabilir ve Promise’ı kullanabiliriz. Geri olmayan bir çağrı içeren spagetti kodu yoktur. Sözün en güzel yanı yakında gelecek. JavaScript vaatleri ile çalışmak ve görünür asenkron kod yazmak için sözdizimsel şekeri kullanabiliriz. Tek yapmanız gereken asenkron işlevi Async anahtar kelimesini kullanarak tanımlamaktır ve aniden her şey daha kolay hale gelir: async işlev logtwousers (ID1, ID2) {const user1 = wp.apifetch ({url: ‘…’ + id1}); const user2 = wp.apifetch’i bekleyin ({url: ‘…’ + id2}); console.log (user1, user2); } Asenkron işlevde eşzamansız çalışmayı her çağırdığınızda, anahtar kelimesini kullanarak sonuçları bekleyebilirsiniz. Hatırlamanız gereken tek şey, async işlevini tanımladığınızda, sonuç her zaman bir vaat olacaktır: async işlevi getNumberFive () {return 5; } Const p = getNumberFive (); // bir söz p.then (console.log); // “5” #4 Değişken Kapsamı Yazdırır Let ve Const kullanırken bildiğiniz gibi const, şimdi Let ve Const kelimeleri kullanarak değişkenleri bildirebilirsiniz. Birincisi değişkeni tanımlar ve sonuncusu sabit tanımlar: let x = 1; console.log (x); // 1 x = 2; console.log (x);
// 2 const y = 1; console.log (y); // 1 y = 2; // Kara TypeError: Const ‘y’ konsoluna (y) geçersiz atama; // 1 Let ve Var’ın aynı olduğunu düşünmeye cazip gelebilirsiniz, çünkü iki anahtar kelime, sabit olmayan değişkeni bildirmemize izin verir. Ancak aralarında önemli farklılıklar vardır: kapsamları. Let ve Const ile değişkenin kapsamı tanımlandığı bloktır. Var’da, bu tüm işlevlerdir. fn () {if (true) {var x = 1; Y = 2 olsun; Const z = 3; } // Console.log (x); // 1 Console.log (Y); // Başrahip ReferansError: Y, Console.Log (Z) tanımlanmamıştır; // Konulmamış ReferansError: Z tanımlanmamış} #5 JSON.PARSE JSON.PARSE FONKSİYONU JSON STRING ve BİLİME JAVASCRICT NEBERLERİ kullanırken Veri Dönüşümü. Örneğin: const x = json.parse (‘{“x”: 1, “a”: [1,2,3]}’); // nesne {x: 1, a: [1, 2, 3]} Çoğu insanın bilmediği şey, bir canlandırıcı adı verilen ikinci argümanı desteklemesidir. Bu parametre, ayrışan her öğe için yürütülecek ve değeri istediğiniz gibi manipüle etmenizi sağlayacak bir işlevdir. Örneğin, JSON’un dizesini aşağıdaki gibi hayal edin: const json = ‘{“name”: “David”, “doğum günü”: “1985-12-01t10: 00: 00,000z”}’; JSON.Parse’yi olduğu gibi kullanırsak, iki dize özelliğine sahip nesneler üretir: ad ve doğum günü. Ancak json.parse reviver işlevi sağlarsak, doğum gününün tarih olarak ayrışmasını sağlayabiliriz: const user = json.parse (json, değer) => ‘doğum günü’