Yazar | Thomas Guibert

Çevirmen | Sun Wei, sorumlu editör | Wu Xingling

Üretildi | CSDN (ID: CSDNnews)

ES6'nın 2015'te piyasaya sürülmesinden bu yana, Ecma International (Avrupa Bilgisayar Üreticileri Birliği, Avrupa Bilgisayar Üreticileri Birliği) 39. Teknik Komite'nin (TC39) ECMAScript'in yeni bir sürümünü yayınlayacağını ve ECMAScript 2020'nin ECMAScript dil belirtiminin ilk sürümü olduğunu herkes bilir. Sürüm 11. Aşağıda öğrenelim.

"GlobalThis"

JavaScript dili günümüzde çok popülerdir ve çeşitli ortamlarda yaygın olarak kullanılmaktadır - tabii ki web tarayıcılarında, ancak sunucularda, akıllı telefonlarda ve robotlarda da çalışabilir.

Global nesnelere erişirken her ortamın kendi nesne modeli ve sözdizimi vardır. Bu nedenle, birden çok ortamda çalışabilen JavaScript kodu yazmak zor olabilir:

// tarayıcı ortamı console.log (pencere); // node.js ortamı console.log (genel); // Hizmet çalışanı ortamı console.log (kendi); // ..

Elbette, mevcut ortamı kontrol eden ve platformlar arası standartlaştırılmış kodu özelleştiren bir işlev yazabilirsiniz, ancak artık bunu yapmanız gerekmiyor.

Günümüzde globalThis özniteliği, ortamlar arasında tutarlı bir şekilde global nesnelere erişmenin standart yoludur.

"Promise.allSettled"

Promise.allSettled yöntemi, verilen tüm sözler çözüldükten veya reddedildikten sonra çözmekten sorumlu olmayı vaat eden bir söz döndürecektir.Bu yönteme, her bir sözün sonuçlarını status özniteliğiyle açıklayan ve daha kolay filtrelenebilen bir dizi nesne eşlik eder. dışarı gel.

const p1 = yeni Söz ((res) = > res ("")); const p2 = new Promise ((res, rej) = > rej ("")); const p3 = yeni Söz ((res) = > res ("")); Promise.allSettled (). sonra (data = > console.log (veri)); //

Boş birleştirme operatörü

Öznitelik erişimi gerçekleştirilirken varsayılan değerler sağlamaya çalışırken, yeni yöntem boş değer birleştirme işlecini kullanmaktır. Veya operatöründen farklı olarak, || operatörünü iki işlenen arasında ?? ile değiştiririz.

Bu iki operatörü karşılaştırın:

const test = { :, sayı: 0, dize: '', boolean: false }; const undefinedValue = test.dog || "Kedi"; // "Kedi" const undefinedValue = test.dog ?? "Kedi"; // "Kedi" sabit Değer = test. || "Varsayılan"; // "Varsayılan" const Value2 = test. ?? "Varsayılan"; // "Varsayılan" sabit sayıValue = test.number || 1; // 1 const numberValue2 = test.number ?? 1; // 0const stringValue = test.string || "Merhaba"; // "Merhaba" const stringValue2 = test.string ?? "Merhaba"; // "" const booleanValue = test.boolean || true; // true const booleanValue2 = test.boolean ?? true; // false

Yukarıda gösterildiği gibi, boş birleştirme operatörü sadece sağdaki işleneni, ?? nın solundaki işlenen olduğunda veya tanımsız olduğunda döndürür.

Sınıf özel alanı

Varsayılan olarak, JS'de tüm içeriğe sınıfın dışından erişilebilir. Bu öneri, özel alana dışarıdan erişilememesini sağlamak için sınıftaki özellikleri bildirmek için yeni bir yöntem önerir.

Öznitelik adına # önekinin eklenmesi, bu alanın özel olduğu ve herkese açık olmadığı anlamına gelir. Lütfen aşağıdaki örneğe bakın:

class Counter { #x = 0; artış { bu. # x ++; } getNum { bunu iade edin. # x; } } const counter = new Counter; console.log (sayaç. # x); // Yakalanmamış SyntaxError: '# x' özel alanı çevreleyen bir sınıfta bildirilmelidir counter.increment; // Çalışır console.log (counter.getNum); // 1

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

Şu andan itibaren, bir nesne içinde derinlemesine yuvalanmış özellik değerleri ararken veya nesneleri veya / tanımlanmamış döndüren API'leri kullanırken, ara değeri kontrol etmek için genellikle aşağıdaki yöntemler kullanılır:

// Ara düğümler kontrol ediliyor: const deeplyNestedValue = obj obj.prop1 obj.prop1.prop2; // Düğümün DOM'da mevcut olup olmadığını kontrol ediyoruz: const fooInputEl = document.querySelector ('input'); const fooValue = fooInputEl fooInputEl.value;

Opsiyonel zincir operatörü, birçok durumu daha basit bir şekilde ele almamızı sağlar. Yukarıdaki örneği yeniden yazmak aşağıdaki kodla sonuçlanacaktır:

// Ara düğümler kontrol ediliyor: const deeplyNestedValue = obj? .prop1? .prop2; // Düğümün DOM'da mevcut olup olmadığını kontrol ediyoruz: const fooValue = document.querySelector ('input') ?. değer;

İsteğe bağlı zincir operatörü bir kısa devre hesaplama işlemidir, yani sol taraf işaretlendiğinde veya tanımlanmadığında, ifadenin yürütülmesini durduracaktır:

// x artırılır ancak ve ancak if'a 'değildir veya tanımsızdır a ?.

İsteğe bağlı zincir, şu işlevle birlikte kullanılabilir:

func?. (... args) // isteğe bağlı işlev veya yöntem çağrısı

"BigInt"

JS'deki sayıyı temsil etmek için Sayı'yı kullandık. Sorun, en büyük sayının 2³ olması ve yukarıdaki sayıların güvenilir olmamasıdır.

const x = Number.MAX_SAFE_INTEGER; // 9007199254740991 const y = x + 1; // 9007199254740992 2 ^ 53'e eşittir const z = x + 2; // 9007199254740992 pekala, bozuk

BigInt, 2³'dan büyük sayıları temsil etmenin bir yolunu sağlar. Tamsayının sonuna n eklenerek oluşturulur:

const aBigInteger = 9007199254740993n; // Ayrıca bir kurucu var: const evenBigger = BigInt (9007199254740994); // 9007199254740994n const fromString = BigInt ("9007199254740995"); // 9007199254740995n

BigInt'in olağan işlemleri sayılarla aynıdır, ancak hesaplamalarda birlikte kullanılamazlar:

let toplam = 1n + 2, çarpma = 1n * 2; // TypeError: BigInt ve diğer türler karıştırılamaz, açık dönüştürmeler kullanılır

Yapıcı Numarasını BigInt'i Number'a dönüştürmek için kullanabilirsiniz, ancak bazı durumlarda kesinliği kaybedebilir. Bu nedenle, BigInt'in yalnızca kodda karşılık gelen beklenen değer büyük olduğunda kullanılması önerilir.

Numara (900719925474099267n); // 900719925474099300

Dinamik içe aktarma

Şu anda, modülleri ./module'dan içe aktarma biçimi statiktir, yalnızca dizgi değişmezlerini kabul eder ve yalnızca çalıştırmadan önce bir bağlama işlemi olarak etki eder.

Dinamik içe aktarma (...), geliştiricilerin JS uygulamalarının bir bölümünü çalışma zamanında dinamik olarak yüklemelerine olanak tanır ve bu, geçerli içe aktarma yöntemine göre bir dizi avantaja sahiptir:

• Hepsi yerine kullanıcı dillerini yükleyin

• Performansı artırmak için uygulama yolunun geç yüklenmesi

• Modül bulunamasa bile arızayı halledebilir

Operasyon modu:

// Bir işlev olarak kullanıldığında içe aktarma, 2 genel yöntemle işlenebilen bir söz verir: // Geri aramayı kullanma içe aktar ('/ module.js') .then ((modül) = > { // Modülle bir şeyler yapın. }); // async / await kullanma eşzamansız işlev { let modül = içe aktarmayı bekle ('/ module.js'); }

Olağan ithalat beyanından farklı olan bazı önemli farklılıklar şunlardır:

• içe aktarma komut dosyalarında kullanılabilir, yalnızca modüllerde değil;

• ithalat herhangi bir pozisyonda herhangi bir seviyede çalıştırılabilir ve askıya alınmayacaktır;

• içe aktarma, yalnızca statik dize değişmezlerini değil, herhangi bir dizeyi kabul edebilir (aşağıda gösterildiği gibi, çalışma zamanında belirlenmiş bir şablon dizesine sahip olması gerekir).

"String.protype.matchAll"

MatchAll yöntemi, dizenin verilen normal ifadeyle (RegExp) eşleşip eşleşmediğini alır ve aşağıdaki gibi tüm sonuçların yinelemeli bir programını döndürür:

const regexp = RegExp ('* top', 'g'); const str = 'basketbol hentbol pingpong futbolu'; const eşleşmeleri = str.matchAll (regexp); // Bir yineleyici olduğu için, trend sonuçları şu şekilde döngüye alabilirsiniz: let match = match.next; while (! match.done) { console.log (match.value); match = match.next; } // // // // Tüm sonuçların bir dizisi de elde edilebilir let sonuç =;

Global / g bayrağıyla birlikte kullanıldığında, eşleştirme yöntemi yakalama grubunu döndürmez, lütfen matchAll kullanın.

Yukarıdakiler bu yılki tüm yeni özelliklerdir. Babel, yukarıdaki işlevlerin neredeyse tümünü içeren eklentilere zaten sahiptir. Bunları projenizde kullanmak istiyorsanız, aşağıdakilere başvurabilirsiniz:

@ babel / eklenti-öneri-ish-birleştirme-operatörü

@ babel / eklenti-öneri-özel-yöntemler

@ babel / eklenti-öneri-isteğe bağlı-zincirleme

@ babel / eklenti-sözdizimi-bigint

@ babel / eklenti-sözdizimi-dinamik-içe aktarma

Orijinal bağlantı: https://medium.com/better-programming/8-new-features-shipping-with-es2020-7a2721f710fb

Bu makale bir CSDN çevirisidir, lütfen yeniden basımın kaynağını belirtin.

Bilgi haritası yeterince sıcak, ancak altta yatan teknik bağlantılar hala tutuşmuyor | AI teknolojisi ekoloji teorisi

Derinlik | Perakendede "duygusal bilgi işlemin" uygulama geliştirmesini anlayın

Üç büyük operatör 5G haberlerini başlatacak; Apple ve Google 3 milyar kullanıcıyı takip etmek için ekip oluşturacak; jQuery 3.5.0 yayınlandı | Geek Headlines

Zhou Hongyi tarafından tüm ağdan yasaklanan 360 asil general: tabandan 36 yaşına kadar olan ve net değeri yüz milyonlarca olan bir karşı saldırı!

Şirketinizin sanal makinesi hala boşta mı? Jenkins ve Kubernetes'e dayalı sürekli entegrasyon testi uygulamasına bir göz atın!

Web1.0'dan Web3.0'a: İnternetin son yıllarda gelişimi ve gelecekteki yönünün ayrıntılı analizi

Perakendecilikte "duygusal bilgi işlemin" uygulamasını ve gelişimini anlamak için bir makale

Lütfen bana yığının ne olduğunu sorma

Hâlâ birleşip sıralayamadığını duydum?

PPT, PyeCharts kadar havalı nasıl yapılır?

Kıdemli bir geliştirici gibi nasıl düşünülür?

Bilmediğin LVS sırları

Tek noktadan katil yapay zeka geliştirme platformu burada! Parçalı modelleme araçlarını değiştirmeye elveda deyin

Google Wave'in başarısızlığı, modern gerçek zamanlı ortak çalışma ofisine büyük bir ders veriyor

Üç büyük operatör 5G haberlerini başlatacak; Apple ve Google ekibi 3 milyar kullanıcıyı takip edecek; jQuery 3.5.0 yayınlandı | Geek Headlines

Derinlik | Perakendede "duygusal bilgi işlem" in uygulama geliştirmesini tek bir makalede okuyun

Yeni bir programcı iş ararken nasıl özgeçmiş yazmalıdır?

Zen of Go

10 satırlık Python kodu hangi ileri teknoloji işlemlere sahip olabilir? | Güç Projesi