ECMAScript 6 - 10 Müthiş Yeni Özellikler

JavaScript'in (JScript ve ActionScript ile birlikte) ECMAScript adlı genel amaçlı bir istemci tarafı komut dosyası dili belirtiminin bir uygulaması olduğunu biliyor muydunuz? Bu kötü tanımı biraz daha çekici hale getirmek için ECMAScript’in (veya resmen ECMA-262’nin) olduğunu söyleyebiliriz. JavaScript'i nasıl kullandığımızı ve neler başarabileceğimizi tanımlayan standart Bununla birlikte.

Dilin en son 6. basımı olan ECMAScript 2015 (veya ES6), 1997’deki ilk sürümden bu yana muhtemelen en önemli güncellemedir. En son sürümün asıl amacı daha büyük uygulamalar ve kütüphaneler oluşturmak için daha iyi bir destek sağlamaktı. Bu, daha olgun bir sözdizimi, kodlamayı kolaylaştırmak için yeni kısayollar ve ayrıca yeni yöntemler, anahtar kelimeler, veri türleri ve diğer birçok geliştirme anlamına gelir..

ES6 dokümantasyonu kapsamlıdır, çok okumak isterseniz, tüm bilgileri ECMA International web sitesinden indirebilirsiniz. Bu yazıda, ES6'nın sunabileceği daha fazla şey olmasına rağmen, seçilen 10 özelliğe göz atacağız. Denemek istiyorsanız, ES6 Fiddle bunu yapmak için harika bir yer ve ayrıca bazı örnek kod parçacıklarını burada bulabilirsiniz..

ECMAScript 6 desteği

Tarayıcı satıcıları ECMAScript 6'nın özelliklerine aşamalı olarak destek ekliyorlar. Burada yeni özellikler için tarayıcı ve derleyici desteği hakkında harika bir uyumluluk tablosu bulabilirsiniz..

Node.js'de ES6 desteği ile ilgileniyorsanız, buradaki belgeleri inceleyin..

Tüm özellikler şu anda desteklenmese de, ES6 kodumuzu ES5'e aktarmak için Babel gibi transpilleri kullanabiliriz. Babel için havalı bir Grunt eklentisi, Grunt için harika ES6 eklentileri ve inanılmaz bir Gulp-Babel eklentisi var. Neyse ki bolca seçeneğimiz var..

Bu şekilde, gelişmişlik sözdizimi ve yeteneklerini kullanmaya başlayabiliriz, ancak uyumluluk sorunları hakkında endişelenmemize gerek yok. Şimdi özellikleri görelim.

1. Yeni let Kelimeler

ES6 yeni tanıttı let deyim, ifade veya bir (n iç) işlevi gibi bir bloğu kapsamındaki yerel değişkenleri bildirmemize izin veren anahtar kelimedir. Mesela bir ilan edebiliriz. için aşağıdaki şekilde döngü yapın, ardından aynı değişken adını tekrar kullanın (kapsamı sınırlı için döngü) sonraki Eğer Beyan:

 için (let i = 0; i < myArray.length; i++)  // Do something inside the block  if (x > 0 && x! = Y) // "i" 'yi tekrar kullanıyoruz. İ = x * y

Kullanmak let anahtar kelime daha temiz ve daha kullanışlı bir koda yol açar. Arasındaki fark let ve var Kapsamda, örneğin tanımlayan bir yerel değişken var Anahtar kelime tüm çevreleme işlevinde kullanılabilirken, değişkenler let sadece kendi (alt) blokta çalış. let küresel olarak da kullanılabilir, bu durumda aynı şekilde davranır var. Tabii ki, ES6'da hala kullanabiliriz var Eğer istersek.

2. Yeni const Kelimeler

Yeni const anahtar kelime, daha sonra yeni içerik atamadığımız değişkenler olarak da bilinen sabitleri bildirmeyi mümkün kılar.

 const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Sessiz hata, çünkü yeni bir değeri sabit olarak atayamıyoruz

Değişken değişkenler ECMAScript 6'da her zaman tamamen değişken değildir, ancak bir sabit bir nesneyi tutuyormuş gibi, daha sonra özelliklerinin ve yöntemlerinin değerini değiştirebiliriz. Aynısı bir dizinin elemanları için de geçerlidir..

 const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22

Yukarıdaki kod snippet'indeki MY_CONSTANT nesnesine doğrudan yeni bir değer atayamıyoruz, bu da özelliklerin ve yöntemlerin adlarını değiştiremeyeceğimiz anlamına gelir, ayrıca yeni bir şey ekleyemez veya varolan bir değeri silemeyiz, bu yüzden yapamayız. aşağıdaki şey:

 MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // hata

3. Ok işlevleri

ECMAScript 6 yazmamızı kolaylaştırıyor adsız işlevler, tamamen ihmal edebileceğimiz gibi fonksiyon Anahtar kelime. Sadece yeni sözdizimini kullanmamız gerekiyor. ok işlevleri, => ok işaretinden sonra gelen (şişman ok), bu bize harika bir kısayol sağlar.

 // 1. ES6'daki bir parametre let = = a, b) => a + b; // ES5'te var sum = function (a, b) return a + b; ; // 2. ES6'daki parametreler olmadan let randomNum = () => Math.random (); // ES5'te var randomNum = function () return Math.random (); ; // 3. ES6'ya dönmeden let let = = (name) => alert ("Merhaba" + isim + "!"); // ES5'te var message = function (adınız) alert ("Merhaba" + adınız + "!"); ;

Normal ve ok işlevleri arasında önemli bir fark vardır, yani ok işlevleri alamaz. bu ile tanımlanan işlevler gibi otomatik olarak değer fonksiyon Anahtar kelime yapmak Ok fonksiyonları sözcüksel olarak bağlanma bu geçerli kapsamın değeri. Bu, kolayca yeniden kullanabileceğimiz anlamına gelir. bu iç işlevdeki anahtar sözcük. ES5'te yalnızca aşağıdaki kesmelerle mümkündür:

 // "this" anahtar sözcüğünü bir iç işlevde kullanmak için ES5 Hack … addAll: function addAll (pieces) var self = this; _.each (parçalar, işlev (parça) self.add (parça);); ,… // ES6 aynı iç işlev artık kendi "this" … addAll: function addAll (pieces) _.each (pieces, piece => this.add (piece)); ,…

Yukarıdaki kod Mozilla Hacks'ten alınmıştır.

4. Yeni YAYILMIŞ Şebeke

Yeni YAYILMIŞ operatör 3 nokta (…) ile işaretlenmiştir ve beklenen birden fazla öğenin yerini işaretlemek için kullanabiliriz. Spread operatörünün en yaygın kullanım durumlarından biri, bir dizinin öğelerini başka bir diziye eklemek:

 myArray = [1, 2, 3]; let newArray = [… myArray, 4, 5, 6]; console.log (yenidizi); // 1, 2, 3, 4, 5, 6 

Ayrıca kaldıraçtan yararlanabiliriz. YAYILMIŞ Bir dizideki argümanlara geçmek istediğimiz fonksiyon çağrılarında operatör:

 myArray = [1, 2, 3]; toplamı (a, b, c) dönüş a + b + c;  console.log (sum (… myArray)); // 6

YAYILMIŞ operatör, aynı dizi veya işlev çağrısında birçok kez kullanılabildiğinden oldukça esnektir..

5. Parametreler ve Yeni Dinlenme Parametreleri için Varsayılan Değerler

Müjde, ECMAScript 6'da bir fonksiyonun parametrelerine varsayılan değerler ekleyebiliriz. Bunun anlamı, işlev çağrısında daha sonra değişkenleri iletmezsek, varsayılan parametrelerin kullanılacağı anlamına gelir. ES5'te parametrelerin varsayılan değerleri her zaman Tanımsız, bu yüzden onları istediğimiz şekilde ayarlayabilmek için yeni bir dil kesinlikle kesinlikle.

 toplamı (a = 2, b = 4) return a + b;  console.log (sum ()); // 6 console.log (toplam (3, 6)); // 9

ES6 ayrıca yeni bir parametre türü sunar. dinlenme parametreleri. Operatörleri yaymak için benzer şekilde çalışır ve çalışırlar. İşlev çağrısında daha sonra kaç tane argüman iletileceğini bilmiyorsak kullanışlı olurlar. Array nesnesinin özelliklerini ve yöntemlerini rest parametrelerinde kullanabiliriz:

 işlevi putInAlphabet (… args) let Sort = args.sort (); sıralanan dönüş;  console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, ben, m, p, r, s, t

6. Yeni ... için Beyan

Yeni yardımı ile ... için döngü dizileri veya diğer yinelenebilir nesneler üzerinde kolayca yineleyebiliriz. Yeni ile birlikte ... için "ECMAScript 6" da iki yeni yinelenebilir nesne tanıttı: Anahtar / değer haritaları için harita ve aynı zamanda ilkel değerler ve nesne referansları olabilen benzersiz değerlerin koleksiyonları için. Ne zaman kullanıyoruz ... için deyimiyle, blok içindeki kod, yinelenebilir nesnenin her elemanı için yürütülür..

 myArray = [1, 2, 3, 4, 5]; toplamı = 0; (izin myArray) sum + = i;  console.log (toplamı); // 15 (= 1 + 2 + 3 + 4 + 5)

7. Şablon Hazırları

ECMAScript 6 bize string bitiştirme için yeni bir alternatif sunar. Şablon değişmezleri İstediğimiz herhangi bir noktaya farklı değerler yerleştirebileceğimiz şablonları kolayca oluşturmamıza izin verin. Bunu yapmak için kullanmamız gerekiyor. $ … Değişkenlerden, dizilerden veya nesnelerden iletebileceğimiz verileri aşağıdaki şekilde eklemek istediğimiz her yerde sözdizimi:

 let müşteri = title: 'Ms', ad: 'Jane', soyadı: 'Doe', yaş: '34'; let template = 'Sevgili $ customer.title $ customer.firstname $ customer.surname! $ $ Customer.age inci yaş günün kutlu olsun! '; console.log (şablon); // Sevgili Bayan Jane Doe! 34. yaş günün kutlu olsun!

8. Sınıflar

ES6, mevcut prototip tabanlı kalıtım üzerine kurulu JavaScript sınıflarını sunar. Yeni sözdizimi, nesneler yaratmayı, mirastan kaldıraç almayı ve kodu yeniden kullanmayı daha kolay hale getirir. Ayrıca, JavaScript’in nasıl çalıştığını anlamak için diğer programlama dillerinden gelen yeni başlayanlar için daha kolay hale getirecek.

ES6 sınıflarında yeni ilan edilmiştir. sınıf anahtar kelimeyi ve Yapıcı () kullanarak yeni bir nesne başlatıldığında çağrılan yöntem yeni myClass () sözdizimi. Yeni sınıfları genişletmek de mümkündür. sınıf Çocuk Veli uzanıyor PHP gibi diğer nesne yönelimli dillerden aşina olabilen sözdizimi. İşlev ve değişken bildirimlerinin aksine, sınıf bildirimlerinin ECMAScript 6'da yer almadığını bilmek de önemlidir..

 class Polygon constructor (height, width) // class yapıcı this.name = 'Polygon'; this.height = yükseklik; this.width = genişlik;  sayName () // class method console.log ('Merhaba, ben bir', this.name + '.');  let myPolygon = yeni Poligon (5, 6); console.log (myPolygon.sayName ()); // Merhaba, ben çokgenim.

ES6 Fiddle Örneklerinden yukarıdaki kod, .

9. Modüller

JavaScript modüler olsaydı ne kadar havalı olacağını hiç merak ettiniz mi? Tabii ki, daha önce bunu yapmak için CommonJS (Node.js'de kullanılan) veya AMD (Asenkron Modül Tanımı) (RequireJS'de kullanılan) gibi geçici çözümler vardır, ancak ES6 modülleri yerel bir özellik olarak tanıtır..

Her bir modülü kendi dosyasında tanımlamamız, sonra ihracat değişkenleri ve fonksiyonları dışa aktaran anahtar kelime için diğer dosyalar ve ithalat onları almak için anahtar kelime itibaren aşağıdaki sözdizimine göre diğer dosyalar:

 // functions.js function küp (a) return a * a * a;  fonksiyon cubeRoot (a) return Math.cbrt (a);  export cube, cubeRoot // veya: export cb olarak cube, cubeRoot olarak cr // app.js import cube, cubeRoot 'işlevlerinden'; console.log (küp (4)); // 64 console.log (cubeRoot (125)); // 5

Bir modülde depolanan kod dışardan görünmez olduğu için bu çözüm mükemmeldir ve yalnızca diğer dosyalardan erişmek istediğimiz kısmı dışa aktarmamız gerekir. ES6 Modülleri ile çok daha şaşırtıcı şeyler yapabiliriz, burada onlar hakkında harika ve ayrıntılı bir açıklama bulabilirsiniz..

10. Yeni Yöntemlerin Yükü

ECMAScript 6, mevcut Dize Prototipi, Dizi Nesnesi, Dizi Prototipi ve Matematik Nesnesi için birçok yeni yöntem sunar. Yeni yöntemler, bu varlıkları nasıl yönetebileceğimizi önemli ölçüde iyileştirebilir. Mozilla Dev'in yeni ilavelerin harika kod örnekleri var, zaman ayırıp bunları iyice incelemeye değer.

Sadece ne kadar havalı olduklarını göstermek için en sevdiğim şey: Dizi prototipinin bulma yöntemi, her bir öğede geri çağırma işlevini yürüterek, ardından ilk öğeyi döndürerek, bir dizinin öğelerinde belirli bir ölçütü test etmemizi sağlar döner doğru.

 isPrime işlevi (element, index, array) var start = 2; süre <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1 'dir;  console.log ([4, 6, 8, 12] .find (isPrime)); // undefined, bulunamadı found.log ([4, 5, 8, 12] .find (isPrime)); // 5

Yukarıdaki kod: Mozilla Dev