g u t x .com.tr İpek yolu - Çin'i anlamaya götürürüm

JavaScript'in 7 heyecan verici yeni özelliği

Yazar | Dalgalarda Yelkencilik

Editör | Tu Min

Önsöz

Bir ECMAScript standart üretim süreci, Aşama 0'dan Aşama 4'e kadar beş aşama içerir. Her aşama, TC39 tarafından onaylanmak üzere bir sonraki aşamaya gönderilir. Bu makale, bu yeni özelliklerin Aşama 3 veya Aşama 4'te olduğunu açıklamaktadır; bu, bu özelliklerin tarayıcılarda ve diğer motorlarda yakında destekleneceği anlamına gelir. Daha yüksek kaliteli makaleler https: // github adresinde mevcuttur. .com / ljianshu / Blog.

Sınıf özel değişkenleri

En son tekliflerden biri, sınıflara özel değişkenler eklemektir. Sınıfın özel değişkenlerini temsil etmek için # sembolünü kullanacağız. Bu, dış dünyaya maruz bırakmak istemediğiniz özel değişkenleri gizlemek için kapatma kullanma ihtiyacını ortadan kaldırır.

class Counter { #x = 0; #increment { bu. # x ++; } tıklamada { bu. # artış; } } const c = new Sayaç; c.onClick; // normal c. # artış; // hata

# İle değiştirilen bir üye değişken veya üye işlevi özel bir değişken haline gelir.Eğer ona Sınıfın dışında erişmeye çalışırsanız, bir istisna atılır. Bu özellik artık Chrome ve Node.js'nin son sürümlerinde mevcuttur.

İsteğe bağlı zincir operatörü

Böyle bir durumla karşılaşmış olabilirsiniz: Bir nesnenin içine yerleştirilmiş birkaç özellik katmanına erişmeniz gerektiğinde, kötü şöhretli bir hatayı alırsınız, tanımsız özellik'stop 'okunamaz ve ardından kodunuzu bunu işleyecek şekilde değiştirmeniz gerekir. Özellik zincirindeki olası tüm tanımsız nesneler, örneğin:

let nestedProp = obj obj.first obj.first.second;

Obj.first.second öğesine erişmeden önce, obj ve obj.first değerlerinin değil (ve tanımsız değil) olarak onaylanması gerekir. Amaç hataları önlemektir, obj.first.second'e obj ve obj.first'i kontrol etmeden basit ve doğrudan erişirseniz, hatalar oluşabilir.

İsteğe bağlı zincirleme ile, yazdığınız sürece aynı şeyi yapabilirsiniz:

let nestedProp = obj? .first? .second;

Obj veya obj.first ise / undefined ise, ifade kısa devre yapacak ve doğrudan tanımsız olarak dönecektir.

Boşluk birleştirme operatörü

Geliştirme sürecinde genellikle böyle bir senaryoyla karşılaşırız: Değişken boşsa, varsayılan değer kullanılır.Bunu böyle başardık:

let c = a? a: b // yol 1 let c = a || b // yol 2

Bu iki yöntemin bariz bir dezavantajı vardır, (0, ", false) gibi tüm yanlış değerleri kapsar, bu değerler bazı durumlarda geçerli giriş olabilir.

Bu sorunu çözmek için, birisi ?? ile gösterilen "ish" birleştirme operatörü yaratmayı önerdi. Bununla birlikte, yalnızca ilk öğe olduğunda veya tanımsız olduğunda varsayılan değeri belirleriz.

let c = a ?? b; // c = a! == undefined a! ==? A: b;

Örneğin, aşağıdaki kod:

const x =; sabit y = x ?? 500; console.log (y); // 500 const n = 0 const m = n ?? 9000; console.log (m) // 0

BigInt

JS'nin Math'da kötü olmasının nedenlerinden biri, 2 ^ 53'ten büyük sayıları doğru şekilde temsil edememesidir, bu da oldukça büyük sayılarla uğraşmayı çok zorlaştırır.

1234567890123456789 * 123; // - > 151851850485185200000 // Hesaplama sonucu hassasiyeti kaybediyor

Neyse ki, BigInt (büyük tamsayı) bu sorunu çözmektir. BigInt'te +, -, /, *,%, vb. Gibi normal sayılarla aynı operatörleri kullanabilirsiniz.

BigInt türünde bir değer oluşturmak da çok basittir, sadece numarayı takip etmeniz yeterlidir Artı n iyidir. Örneğin 123, 123n olur. Ayrıca, dönüştürmek için BigInt (değer) genel yöntemini de kullanabilirsiniz ve girdi parametresi değeri bir sayı veya sayı dizisidir.

const aNumber = 111; const aBigInt = BigInt (aNumber); aBigInt === 111n // doğru typeof aBigInt === 'bigint' // doğru typeof 111 // "sayı" typeof 111n // "bigint"

Numaranın hemen sonunda Artı n, büyük sayıları doğru bir şekilde hesaplayabilirsiniz:

1234567890123456789n * 123n; // - > 151851850485185185047n

Ancak bir sorun var Çoğu işlemde, BigInt ve Number karıştırılamaz. Number ve BigInt'i karşılaştırmak mümkündür, ancak bunları birlikte ekleyemezsiniz.

1n < 2 // doğru 1n + 2 // Yakalanmamış TypeError: BigInt ve diğer türleri karıştırılamaz, açık dönüştürmeler kullanın

Bu özellik artık Chrome ve Node.js'nin son sürümlerinde mevcuttur.

statik alan

Çoğu OOP diline benzer şekilde sınıfların statik alanlara sahip olmasına izin verir. Numaralandırma veya özel alanlar yerine statik alanlar kullanılabilir.

class Colors { // genel statik alan statik kırmızı = '# ff0000'; statik yeşil = '# 00ff00'; // özel statik alan static #secretColor = '# f0f0f0'; } font.color = Colors.red; font.color = Renkler. # secretColor; // hata

Bu özellik artık Chrome ve Node.js'nin son sürümlerinde mevcuttur.

Üst düzey bekliyor

ES2017'deki (ES8) async / await özelliği, await anahtar sözcüğünün eşzamansız işlevlerde kullanılmasına izin verir. Yeni teklif, await anahtar sözcüğünün üst düzey içerikte kullanımına izin vermeyi amaçlamaktadır, örneğin, dinamik modül yükleme sürecini basitleştirmek için:

const dizeleri = içe aktarmayı bekliyor (`/ i18n / $ {navigator.language}`);

Bu özellik, tarayıcı konsolundaki eşzamansız içeriğin (getirme gibi), eşzamansız bir işleve sarmaya gerek kalmadan hata ayıklaması için çok kullanışlıdır.

Diğer bir kullanım durumu, eşzamansız olarak başlatılan bir ES modülünün en üst seviyesinde kullanılabilmesidir (bir veritabanı bağlantısı kurmak gibi). Böyle bir "eşzamansız modülü" içe aktarırken, modül sistemi çözülmesini bekleyecek ve sonra ona bağlı modülleri çalıştıracaktır. Eşzamansız başlatmanın bu şekilde ele alınması, şu anda bir başlatma vaadini döndürmekten ve çözülmesini beklemekten daha kolaydır. Bir modül, bağımlılıklarının asenkron olup olmadığını bilmez.

// db.mjs ihracat const bağlantısı = createConnection'ı bekleyin; // server.mjs './ db.mjs'den {bağlantı} dosyasını içe aktarın; server.start;

Bu örnekte, server.mjs db.mjs'de bağlantı tamamlanana kadar hiçbir şey yapılmayacaktır.

Bu özellik artık Chrome'un en son sürümünde mevcuttur.

WeakRef

Genel olarak konuşursak, JavaScript'te nesne referansı büyük ölçüde ayrılmıştır, yani nesne referansı tutulduğu sürece çöp olarak toplanmayacaktır.

sabit başvuru = {x: 42, y: 51}; // ref nesnesine (veya ona yapılan başka herhangi bir referansa) eriştiğimiz sürece, bu nesne çöp olarak toplanmayacaktır

Şu anda Javascript'te, WeakMap ve WeakSet, nesnelere zayıf bir şekilde başvurmanın tek yoludur: WeakMap veya WeakSet'e anahtar olarak bir nesne eklemek, çöpün toplanmasını engellemez.

const wm = new WeakMap; { const ref = {}; const metaData = 'foo'; wm.set (ref, metaData); wm.get (ref); // metaData döndür } // Bu blok kapsamında artık ref nesnesine bir referansımız yok. // Bu nedenle, wm'de bir anahtar olmasına rağmen, yine de erişebiliriz, ancak çöp toplanabilir. const ws = new WeakSet; ws.add (ref); ws.has (ref); // true değerini döndürür

JavaScript'in WeakMap'i gerçek anlamda zayıf bir referans değildir: Aslında, anahtar hala hayatta olduğu sürece, içeriğine güçlü bir şekilde atıfta bulunur. WeakMap, anahtar çöp toplandıktan sonra içeriğine yalnızca zayıf bir şekilde başvurur.

WeakRef, gerçek zayıf referanslar sağlayan daha gelişmiş bir API'dir. Weakref örnekleri, referans alınan orijinal nesneyi döndüren bir deref yöntemine sahiptir. Orijinal nesne toplanmışsa, tanımlanmamış nesneyi döndürür.

const önbellek = yeni Harita; const setValue = (anahtar, obj) = > { cache.set (anahtar, yeni WeakRef (obj)); }; const getValue = (anahtar) = > { const ref = cache.get (anahtar); eğer (ref) { ref.deref dönüşü; } }; // bu, önbellekteki değeri arayacaktır // ve eksikse yeniden hesapla const fibonacciCached = (sayı) = > { const önbelleğe alındı = getValue (sayı); eğer (önbelleğe alınmış) önbelleğe alınmış döndürülür; const toplam = hesaplaFibonacci (sayı); setValue (sayı, toplam); getiri toplamı; };

Sonuç olarak, JavaScript'teki nesne referansları güçlü referanslardır.WeakMap ve WeakSet bazı zayıf referanslar sağlayabilir.Javascript'te gerçek zayıf referanslar uygulamak istiyorsanız WeakRef ve Finalizer'ı birlikte kullanabilirsiniz.

Bu özellik artık Chrome ve Node.js'nin son sürümlerinde mevcuttur.

Referans makale