[ad_1]
ECMAScript 2022 (ES13), JavaScript için en son yeni özellikler grubunu kodlayarak 22 Haziran’da yayınlandı. Her teknoloji özelliği, gerçek dünya kullanımıyla devam eden bir dansta bir kilometre taşıdır. Geliştiriciler JavaScript’i kullandıkça, sürekli olarak fırsatları keşfediyor ve dili yeni alanlara itiyoruz. ECMAScript belirtimi, yeni özellikleri resmileştirerek yanıt verir. Bunlar da JavaScript’in devam eden evrimi için yeni bir temel oluşturur.
ES13 spesifikasyonu şunları getiriyor: JavaScript için sekiz yeni özellik. Bugün kullanabileceğiniz bu yeni özelliklerle başlayalım.
sınıf alanları
sınıf alanları JavaScript sınıflarında üyeleri işlemek için çeşitli iyileştirmeleri kapsayan bir şemsiye öneridir: Sınıf genel ve özel örnek alanları, özel örnek yöntemleri ve erişimcilerve statik sınıf özellikleri.
Genel ve özel örnek alanları
Önceden, içinde bir üye alanı bildirirken standart yaklaşım class anahtar kelime, onu yapıcıya tanıtmaktı. En yeni ECMAScript belirtimi, sınıf gövdesinin bir parçası olarak üye alanını satır içi tanımlamamıza izin verir. Liste 1’de gösterildiği gibi, özel bir alanı belirtmek için bir hashtag kullanabiliriz.
Liste 1. Satır içi genel ve özel sınıf alanları
class Song {
title = "";
#artist = "";
constructor(title, artist){
this.title = title;
this.#artist = artist;
}
}
let song1 = new Song("Only a Song", "Van Morrison");
console.log(song1.title);
// outputs “Only a Song”
console.log(song1.artist);
// outputs undefined
Liste 1’de bir sınıf tanımlıyoruz, Songkullanmak class anahtar kelime. Bu sınıfın iki üyesi vardır, title ve artist. bu artist üyenin önüne bir kare (#) sembolü eklenir, bu nedenle özeldir. Bu alanların yapıcıda ayarlanmasına izin veriyoruz. Yapıcının erişmesi gerektiğine dikkat edin this.#artist hash öneki ile tekrar; aksi takdirde, genel bir üye ile alanın üzerine yazar.
Ardından, örneğin bir örneğini tanımlarız. Song sınıf, her iki alanı da yapıcı aracılığıyla ayarlar. Daha sonra alanları konsola çıkarıyoruz. mesele şu ki song1.artist dış dünya tarafından görülmez ve tanımsız çıktılar.
Şuna da dikkat edin, hatta song1.hasOwnProperty("artist") false döndürür. Ek olarak, daha sonra ödev kullanarak sınıf üzerinde özel alanlar oluşturamayız.
Genel olarak, bu daha temiz kod için güzel bir ektir. Çoğu tarayıcı bir süredir genel ve özel örnek alanlarını desteklemektedir ve bunların resmi olarak dahil edildiğini görmek güzel.
Özel örnek yöntemleri ve erişimciler
Karma sembolü, yöntemler ve erişimciler üzerinde bir önek olarak da çalışır. Görünürlük üzerindeki etki, özel örnek alanları ile tamamen aynıdır. Böylece, bir özel ayarlayıcı ve bir genel alıcı ekleyebilirsiniz. Song.artist Alan, Liste 2’de gösterildiği gibi.
Liste 2. Özel örnek yöntemleri ve erişimciler
class Song {
title = "";
#artist = "";
constructor(title, artist){
this.title = title;
this.#artist = artist;
}
get getArtist() {
return this.#artist;
}
set #setArtist(artist) {
this.#artist = artist;
}
}
Statik üyeler
Sınıf alanları önerisi ayrıca statik üyeler de tanıtır. Bunlar Java’dakine benzer şekilde görünür ve çalışır: eğer bir üyenin static anahtar kelime değiştirici, nesne örnekleri yerine sınıfta bulunur. Statik bir üye ekleyebilirsiniz. Song Liste 3’te gösterildiği gibi sınıf.
Liste 3. Bir sınıfa statik bir üye ekleyin
class Song {
static label = "Exile";
}
Alana daha sonra yalnızca sınıf adı aracılığıyla erişilebilir, Song.label. Java’dan farklı olarak, JavaScript örnekleri, paylaşılan statik değişkene bir referans tutmaz. Statik ile statik bir özel alana sahip olmanın mümkün olduğunu unutmayın. #label; yani, özel bir statik alan.
RegExp eşleşme endeksleri
normal ifade match sahip olmak yükseltildi eşleşen gruplar hakkında daha fazla bilgi eklemek için. Performans nedenleriyle, bu bilgiler yalnızca aşağıdaki durumlarda dahil edilir: /d normal ifadeye flag eklenir. (bkz. ECMAScript için RegExp Eşleşme Endeksleri anlamı üzerine derin bir dalış önerisi /d normal ifade.)
Temel olarak, kullanarak /d flag, normal ifade motorunun eşleşen tüm alt dizelerin başlangıcını ve sonunu içermesine neden olur. Bayrak mevcut olduğunda, indices üzerindeki mülk exec sonuçlar, ilk boyutun eşleşmeyi temsil ettiği ve ikinci boyutun eşleşmenin başlangıcını ve sonunu temsil ettiği iki boyutlu bir dizi içerecektir.
Adlandırılmış gruplar söz konusu olduğunda, endekslerde adı geçen bir üye olacaktır. groups, ilk boyutu grubun adını içerir. alınan Liste 4’ü düşünün tekliften.
Liste 4. Regex grup indeksleri
const re1 = /a+(?<Z>z)?/d;
// block 1
const s1 = "xaaaz";
const m1 = re1.exec(s1);
m1.indices[0][0] === 1;
m1.indices[0][1] === 5;
s1.slice(...m1.indices[0]) === "aaaz";
// block 2
m1.indices[1][0] === 4;
m1.indices[1][1] === 5;
s1.slice(...m1.indices[1]) === "z";
// block 3
m1.indices.groups["Z"][0] === 4;
m1.indices.groups["Z"][1] === 5;
s1.slice(...m1.indices.groups["Z"]) === "z";
// block 4
const m2 = re1.exec("xaaay");
m2.indices[1] === undefined;
m2.indices.groups["Z"] === undefined;
Liste 4’te, aşağıdakilerle eşleşen düzenli bir ifade oluşturuyoruz: a bir veya daha fazla kez char, ardından adlandırılmış bir eşleşen grup (adlandırılmış Z) eşleşen z sıfır veya daha fazla kez char.
Kod bloğu 1 şunu gösterir: m1.indices[0][0] ve m1.indices[0][1] sırasıyla 1 ve 5 içerir. Bunun nedeni, regex için ilk eşleşmenin ilkinden gelen dize olmasıdır. a ile biten dizeye z. Blok 2 için aynı şeyi gösterir z karakter.
Blok 3, adlandırılmış grupla ilk boyuta şu şekilde erişmeyi gösterir: m1.indices.groups. Eşleşen bir grup var, final z karakter ve 4’ün başı ve 5’in sonu var.
Son olarak, blok 4, eşleşmeyen dizinlerin ve grupların tanımsız olarak döneceğini gösterir.
Sonuç olarak, bir dize içinde grupların nerede eşleştiğinin ayrıntılarına erişmeniz gerekiyorsa, bunu elde etmek için artık regex eşleşme indeksleri özelliğini kullanabilirsiniz.
Üst düzey bekliyor
ECMAScript spesifikasyonu artık asenkron modülleri paketleme yeteneğini içermektedir. Sarılmış bir modülü içe aktardığınızda awaitdahil etme modülü, tüm awaits yerine getirilir. Bu, birbirine bağlı asenkron modül çağrılarıyla uğraşırken olası yarış koşullarını önler. Bkz. üst düzey teklif bekliyor detaylar için.
Liste 5, aşağıdakilerden ödünç alınan bir örneği içerir: teklif.
Liste 5. Üst düzey bekliyor
// awaiting.mjs
import { process } from "./some-module.mjs";
const dynamic = import(computedModuleSpecifier);
const data = fetch(url);
export const output = process((await dynamic).default, await data);
// usage.mjs
import { output } from "./awaiting.mjs";
export function outputPlusValue(value) { return output + value }
console.log(outputPlusValue(100));
setTimeout(() => console.log(outputPlusValue(100), 1000);
bildirim awaiting.mjs en await bağımlı modüllerin kullanımının önündeki anahtar kelime dynamic ve data. Bunun anlamı, ne zaman usage.mjs ithalat awaiting.mjs, usage.mjs kadar idam edilmeyecek awaiting.mjs bağımlılıklar yüklemeyi bitirdi.
Özel alanlar için ergonomik marka kontrolleri
Geliştiriciler olarak rahat bir kod istiyoruz; yani ergonomik özel alanlar. Bu yeni özellik, istisna işlemeye başvurmadan bir sınıfta özel bir alanın varlığını kontrol etmemizi sağlar.
Liste 6, aşağıdakileri kullanarak bir sınıf içinden özel bir alanı kontrol etmenin bu yeni, ergonomik yolunu göstermektedir. in anahtar kelime.
Liste 6. Özel bir alanın varlığını kontrol edin
class Song {
#artist;
checkField(){
return #artist in this;
}
}
let foo = new Song();
foo.checkField(); // true
Liste 6 yapmacık, ancak fikir açık. Özel bir alan için bir sınıfı kontrol etmeniz gerektiğini fark ettiğinizde, şu biçimi kullanabilirsiniz: #fieldName in object.
.at() ile negatif indeksleme
günler geçti arr[arr.length -2]. bu .at yöntemi Yerleşik indekslenebilirlerde artık Liste 7’de gösterildiği gibi negatif endeksleri desteklemektedir.
Liste 7. .at() ile negatif indeks
let foo = [1,2,3,4,5];
foo.at(3); // == 3
hasOwn
Kendi
Object.Own geliştirilmiş bir versiyonudur Object.hasOwnProperty. İle bir nesne oluşturulduğunda olduğu gibi, bazı uç durumlar için çalışır. Object.create(null). Dikkat hasOwn statik bir yöntemdir—örneklerde bulunmaz.
Liste 8. hasOwn() iş başında
let foo = Object.create(null);
foo.hasOwnProperty = function(){};
Object.hasOwnProperty(foo, 'hasOwnProperty'); // Error: Cannot convert object to primitive value
Object.hasOwn(foo, 'hasOwnProperty'); // true
Liste 8, kullanabileceğinizi gösterir Object.hasOwn üzerinde foo ile oluşturulan örnek Object.create(null).
Sınıf statik blok
İşte Java geliştiricilerinin şunu söylemesi için bir şans: Oh, bunu 90’lardan beri yaşıyoruz. ES 2022 tanıtıyor statik başlatma blokları JavaScript’e. Esasen, kullanabilirsiniz static sınıf yüklendiğinde çalıştırılan bir kod bloğundaki anahtar kelimedir ve statik üyelere erişimi olacaktır.
Liste 9, statik bir değeri başlatmak için statik bir blok kullanmanın basit bir örneğine sahiptir.
Liste 9. Statik blok
class Foo {
static bar;
static {
this.bar = “test”;
}
}
Hata nedeni
Son fakat en az değil, Error şimdi sınıf neden desteği içerir. Bu, hata zincirlerinde Java benzeri yığın izlerine izin verir. Hata oluşturucu artık bir seçenekler içeren bir nesneye izin verir. cause Alan, Liste 10’da gösterildiği gibi.
Liste 10. Hata nedeni
throw new Error('Error message', { cause: errorCause });
Telif Hakkı © 2022 IDG Communications, Inc.
[ad_2]
Kaynak : https://www.infoworld.com/article/3665748/8-new-javascript-features-to-start-using-today.html#tk.rss_all