Owen Little
0 
1241
122
ES6, ECMA Script programlama dilinin 6. versiyonunu ifade eder. ECMA Script, JavaScript için standart bir addır. JavaScript nedir ve İnternet, onsuz da bulunabilir mi? JavaScript Nedir, İnternet İnternet Olmadan Var Olabilir mi? JavaScript, çoğu kişinin kabul ettiği şeylerden biridir. Herkes kullanır. ve sürüm 6, 2011'de piyasaya sürülen 5. sürümden sonraki sürümdür. JavaScript dilinde büyük bir gelişmedir ve büyük ölçekli yazılım geliştirmeyi kolaylaştırmak için daha birçok özellik ekler..
ECMAScript veya ES6, Haziran 2015'te yayınlandı. Daha sonra ECMAScript 2015 olarak yeniden adlandırıldı. Büyük bölümler desteklense de, tam dil için web tarayıcı desteği henüz tamamlanmadı. Büyük web tarayıcıları ES6'nın bazı özelliklerini destekler. Ancak, olarak bilinen yazılımı kullanmak mümkündür. transpiler Çoğu tarayıcıda daha iyi desteklenen ES6 kodunu ES5'e dönüştürme.
Şimdi ES6'nın JavaScript'e getirdiği bazı önemli değişikliklere bakalım..
1. Sabitler
Sonunda sabitler kavramı JavaScript'i yaptı! Sabitler, yalnızca bir kez tanımlanabilen değerlerdir (kapsam başına, aşağıda açıklanan kapsam). Aynı kapsamdaki bir yeniden tanım, bir hatayı tetikler.
const JOE = 4.0 JOE = 3.5 // sonuçlanır: Yakalanmamış TypeError: Sabit değişkene atama. Bir değişkeni kullanabileceğiniz her yerde sabiti kullanabilirsiniz (var).
console.log ("Değer:" + joe * 2) // basım sayısı: 8 2. Blok Kapsamlı Değişkenler ve İşlevler
21. yüzyıla hoşgeldiniz, JavaScript! ES6 ile değişkenler kullanılarak bildirildi let (ve yukarıda açıklanan sabitler) tıpkı Java, C ++, vb..
Bu güncellemeden önce, JavaScript'teki değişkenler işlev kapsamına alındı. Diğer bir deyişle, bir değişken için yeni bir kapsama ihtiyacınız olduğunda, onu bir işlev içinde bildirmeniz gerekiyordu..
Değişkenler bloğun sonuna kadar değeri korur. Bloktan sonra, dış bloktaki değer (varsa) geri yüklenir.
let x = "merhaba"; let x = "dünya"; console.log ("iç blok, x =" + x); console.log ("dış blok, x =" + x); // iç bloğu yazdırır, x = dünya dış bloğu, x = merhaba Bu bloklarda sabitleri de yeniden tanımlayabilirsiniz..
let x = "merhaba"; const x = 4.0; console.log ("iç blok, x =" + x); deneyin x = 3.5 catch (err) console.error ("inner block:" + err); x = "dünya"; console.log ("dış blok, x =" + x); // iç bloğu yazdırır, x = 4 iç bloğu: TypeError: Sabit değişkene atama. dış blok, x = dünya 3. Ok İşlevleri
ES6, bir ok kullanarak işlevleri tanımlamak için yeni bir sözdizimi getiriyor. Aşağıdaki örnekte, x bir parametreyi kabul eden bir işlevdir. bir, ve artışını döndürür:
var x = a => a + 1; x (4) // 5 döndürür Bu sözdizimini kullanarak, fonksiyonlardaki değişkenleri kolaylıkla tanımlayabilir ve aktarabilirsiniz..
İle kullanma her biri için():
[1, 2, 3, 4] .Each (a => console.log (a + "=>" + a * a)) // basar 1 => 1 2 => 4 3 => 9 4 => 16 Birden fazla argümanı kabul eden işlevleri parantez içine alarak tanımlayın:
[22, 98, 3, 44, 67] .sort ((a, b) => a - b) // döndürür [3, 22, 44, 67, 98] 4. Varsayılan İşlev Parametreleri
İşlev parametreleri şimdi varsayılan değerlerle bildirilebilir. Aşağıda, x iki parametreli bir fonksiyondur bir ve b. İkinci parametre b varsayılan bir değer verilir 1.
var x = (a, b = 1) => a * b x (2) // 2 döndürür x (2, 2) // döndürür 4 C ++ veya python gibi diğer dillerden farklı olarak, varsayılan değerlere sahip parametreler, varsayılan olmayanlara göre görünebilir. Bu işlevin, bloklu bir blok olarak tanımlandığını unutmayın. dönüş gösterim yoluyla değer.
var x = (a = 2, b) => dönüş a * b Ancak argümanlar soldan sağa eşleştirilir. Aşağıdaki ilk başvuruda, b bir Tanımsız olsa değer bir varsayılan bir değerle ilan edildi. Geçilen argüman ile eşleştirilir bir ziyade b. İşlev döndürür NaN.
x (2) // NaN döndürür x (1, 3) // 3 döndürür Açıkça girdiğinde Tanımsız Bir argüman olarak, eğer varsa bir varsayılan değer kullanılır..
x (tanımsız, 3) // 6 döndürür 5. Dinlenme Fonksiyonu Parametreleri
Bir işlevi çağırırken, bazen rasgele sayıda argüman iletme ve işlev içindeki bu argümanları işleme koyma ihtiyacı ortaya çıkar. Bu ihtiyaç kalan fonksiyon parametreleri sözdizimi. Aşağıda gösterilen sözdizimini kullanarak tanımlanmış bağımsız değişkenlerden sonra kalan bağımsız değişkenleri yakalamanın bir yolunu sağlar. Bu ekstra argümanlar bir dizide yakalanır.
var x = function (a, b,… args) console.log ("a =" + a + ", b =" + b + "," + args.length + "kalanlar"); x (2, 3) // bir a = 2, b = 3, 0 sola yazdırır x (2, 3, 4, 5) // bir a = 2, b = 3, 2 arj bıraktı 6. Dize şablonu
Dize şablonlaması, değişkenleri ve ifadeleri, perl veya kabuk gibi bir sözdizimi kullanarak dizgilere enterpolasyon anlamına gelir. Dize şablonu, geri tiklama karakterlerine eklenmiştir ('). Buna karşılık, tek tırnak (') veya çift tırnak (“) normal dizeleri gösterir. Şablonun içindeki ifadeler arasında $ ve . İşte bir örnek:
var name = "joe"; var x = 'hello $ name' // "merhaba joe" döndürür Tabii ki, değerlendirme için keyfi bir ifade kullanabilirsiniz.
// bir ok işlevini tanımlayın var f = a => a * 4 // bir parametre değeri var v = 5 // olarak ayarlayın ve işlevi dize şablonu içinde değerlendirin: x = 'hello $ f (v)' // "merhaba 20" döndürür Dizeleri tanımlamak için kullanılan bu sözdizimi, çok satırlı dizeleri tanımlamak için de kullanılabilir..
var x = 'merhaba dünya sonraki satırı' // merhaba dünya sonraki satırı döndürür 7. Nesne Özellikleri
ES6 basitleştirilmiş bir nesne oluşturma sözdizimi getiriyor. Aşağıdaki örneğe bir göz atın:
var x = "merhaba dünya", y = 25 var a = x, y //, ES5'e eşittir: x: x, y: y Hesaplanan mülk adları da oldukça şık. ES5 ve önceki sürümlerinde, hesaplanmış bir adla bir nesne özelliği ayarlamak için bunu yapmanız gerekiyordu:
var x = "merhaba dünya", y = 25 var a = x: x, y: y a ["joe" + y] = 4 // a şimdi: x: "merhaba dünya", y: 25 , joe25: 4 Şimdi hepsini tek bir tanımda yapabilirsiniz:
var a = x, y, ["joe" + y]: 4 // döndürür x: "merhaba dünya", y: 25, joe25: 4 Ve tabii ki, yöntemleri tanımlamak için, sadece ismiyle tanımlayabilirsiniz:
var a = x, y, ["joe" + y]: 4, foo (v) return v + 4 a.foo (2) // döner 6 8. Örgün Sınıf Tanımı Sözdizimi
Sınıf tanımı
Ve son olarak, JavaScript resmi bir sınıf tanımı sözdizimi alır. Mevcut olan prototip bazlı sınıflar üzerinde yalnızca sözdizimsel şeker olmasına rağmen, kod netliğini arttırmaya yarar. Bu demek oluyor ki değil yeni bir nesne modeli veya bunun gibi bir şey eklemek.
class Circle constructor (radius) this.radius = radius // onu kullan var c = new Circle (4) // döner: Circle radius: 4 İlan yöntemleri
Bir yöntem tanımlamak da oldukça basittir. Orada sürpriz yok.
class Circle constructor (radius) this.radius = radius computeArea () return Math.PI * this.radius * this.radius var c = new Circle (4) c.computeArea () // döner: 50.26548245743669 Alıcılar ve Düzenleyiciler
Şimdi de sözdiziminde basit bir güncelleme ile alıcılarımız ve ayarlayıcılarımız var. Yeniden tanımlayalım Daire bir sınıf alan özellik.
class Circle constructor (radius) this.radius = radius get area () return Math.PI * this.radius * this.radius var c = new Circle (4) // döner: Circle radius: 4 c.area // döner: 50.26548245743669 Şimdi bir ayarlayıcı ekleyelim. Tanımlayabilmek yarıçap ayarlanabilir bir özellik olarak, asıl alanı şu şekilde yeniden tanımlamalıyız: _radius ya da setter ile çatışmayacak bir şey. Aksi halde bir yığın taşması hatasıyla karşılaşırız.
İşte yeniden tanımlanmış sınıf:
class Circle constructor (radius) this._radius = radius get area () return Math.PI * this._radius * this._radius ayarlanan radius (r) this._radius = r var c = new Circle (4) // döner: Circle _radius: 4 c.area // döner: 50.26548245743669 c.radius = 6 c.area // döner: 113.09733552923255 Sonuçta, bu nesne odaklı JavaScript için güzel bir ektir.
miras
Kullanarak sınıfları tanımlamaya ek olarak sınıf anahtar kelimeyi kullanabilirsiniz. uzanır süper sınıflardan miras almak için anahtar kelime. Bunun bir örnekle nasıl çalıştığını görelim.
sınıf Elips constructor (width, height) this._width = width; this._height = yükseklik; alan al () return Math.PI * this._width * this._height; genişliği ayarla (w) this._width = w; yükseklik ayarı (h) this._height = h; sınıf Çember uzanıyor Ellipse constructor (radius) super (radius, radius); ayar yarıçapı (r) super.width = r; Süper Yükseklik = r; // bir daire oluşturun var c = new Circle (4) // döner: Circle _width: 4, _height: 4 c.radius = 2 // c şimdi: Circle _width: 2, _height: 2 c.area // döner: 12.566370614359172 c.radius = 5 c.area // döner: 78.53981633974483 Ve bu, JavaScript ES6'nın bazı özelliklerine kısa bir girişti..
Sıradaki: Ses duyarlı robot animasyonu komut dosyası oluşturma p5.js'de Ses Duyarlı Robot Animasyonu Nasıl Kodlanır p5.js'de Ses Hassas Robot Animasyonu Nasıl Kodlanır? Onlara sesli reaktif bir animasyonlu robot kafası oluşturmak için bu kılavuzu gösterin. !
Resim Kredisi: micrologia / Depositphotos