Home-theater-designers
ES6, ECMA Komut Dosyası programlama dilinin 6. sürümüne atıfta bulunur. ECMA Komut Dosyası, JavaScript'in standartlaştırılmış adıdır ve sürüm 6, 2011'de yayınlanan sürüm 5'ten sonraki sürümdür. JavaScript dilinde önemli bir geliştirmedir ve büyük ölçekli yazılım geliştirmeyi kolaylaştırmayı amaçlayan 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ısı desteği henüz tamamlanmadı. Başlıca web tarayıcıları ES6'nın bazı özelliklerini destekler. Ancak, bir olarak bilinen yazılımı kullanmak mümkündür. oyuncu ES6 kodunu çoğu tarayıcıda daha iyi desteklenen ES5'e dönüştürmek için.
Şimdi ES6'nın JavaScript'e getirdiği bazı önemli değişikliklere bakalım.
1. Sabitler
Sonunda sabit kavramı JavaScript'e dönüştü! Sabitler, yalnızca bir kez tanımlanabilen değerlerdir (kapsam başına, aşağıda açıklanan kapsam). Aynı kapsamda yeniden tanımlama bir hatayı tetikler.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Bir değişkeni kullanabileceğiniz her yerde sabiti kullanabilirsiniz ( nerede ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Blok Kapsamlı Değişkenler ve Fonksiyonlar
21. yüzyıla hoş geldiniz, JavaScript! ES6 ile, kullanılarak bildirilen değişkenler İzin Vermek (ve yukarıda açıklanan sabitler) tıpkı Java, C++, vb.'de olduğu gibi blok kapsamı kurallarını takip edin. (Daha fazla bilgi edinmek için JavaScript'te değişkenlerin nasıl bildirileceğini görün.)
Bu güncellemeden önce, JavaScript'teki değişkenler işlev kapsamına alındı. Yani, bir değişken için yeni bir kapsama ihtiyaç duyduğunuzda, onu bir fonksiyon içinde bildirmeniz gerekiyordu.
Değişkenler, değeri bloğun sonuna kadar korur. Bloktan sonra dış bloktaki (varsa) değer geri yüklenir.
Lorem ipsum dolor sit amet, consectetur
{
let x = 'hello';
{
let x = 'world';
console.log('inner block, x = ' + x);
}
console.log('outer block, x = ' + x);
}
// prints
inner block, x = world
outer block, x = hello
Bu tür bloklar içinde sabitleri de yeniden tanımlayabilirsiniz.
{
let x = 'hello';
{
const x = 4.0;
console.log('inner block, x = ' + x);
try {
x = 3.5
} catch(err) {
console.error('inner block: ' + err);
}
}
x = 'world';
console.log('outer block, x = ' + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world
3. Ok İşlevleri
ES6 tanıtıyor ok fonksiyonları JavaScript'e. (Bunlar geleneksel işlevlere benzer, ancak daha basit bir sözdizimine sahiptir.) Aşağıdaki örnekte, x adlı bir parametreyi kabul eden bir işlevdir. ile , ve artışını döndürür:
var x = a => a + 1;
x(4) // returns 5
Bu söz dizimini kullanarak, işlevlerdeki argümanları kolaylıkla tanımlayabilir ve iletebilirsiniz.
ile kullanma her biri için() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Birden çok argümanı kabul eden işlevleri parantez içine alarak tanımlayın:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. Varsayılan İşlev Parametreleri
Fonksiyon parametreleri artık varsayılan değerlerle bildirilebilir. Aşağıda, x iki parametreli bir fonksiyondur ile ve B . ikinci parametre B varsayılan bir değer verilir 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
C++ veya python gibi diğer dillerin aksine, varsayılan değerlere sahip parametreler, varsayılanları olmayanlardan önce görünebilir. Bu fonksiyonun bir blok olarak tanımlandığını unutmayın. dönüş örnekleme yoluyla değer.
var x = (a = 2, b) => { return a * b }
Ancak argümanlar soldan sağa eşleştirilir. Aşağıdaki ilk çağrıda, B sahip Tanımsız değer olsa bile ile varsayılan bir değerle bildirildi. geçirilen argüman ile eşleştirilir ile ziyade B . işlev döner NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Açıkça geçtiğinde Tanımsız argüman olarak, varsa varsayılan değer kullanılır.
x(undefined, 3)
// returns 6
5. Dinlenme Fonksiyonu Parametreleri
Bir işlevi çağırırken, bazen isteğe bağlı sayıda argüman iletebilmek ve bu argümanları fonksiyon içinde işlemek için bir ihtiyaç ortaya çıkar. Bu ihtiyacın karşılanması dinlenme fonksiyonu parametreleri sözdizimi. Aşağıda gösterilen sözdizimini kullanarak tanımlanan argümanlardan sonra kalan argümanları 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 + ' args left'); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left
6. Dize Şablonu
Dize şablonlama, değişkenleri ve ifadeleri, perl veya kabuk gibi bir sözdizimi kullanarak dizelere enterpolasyon yapmak anlamına gelir. Bir dize şablonu, ters tik karakterlerinin içine alınır ( `` ). Buna karşılık tek tırnak ( ' ) veya çift tırnak ( ' ) normal dizeleri gösterir. Şablonun içindeki ifadeler arasında işaretlenmiştir. $ { ve } . İşte bir örnek:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
Tabii ki, değerlendirme için keyfi bir ifade kullanabilirsiniz.
// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns 'hello 20'
Dizeleri tanımlamaya yönelik bu sözdizimi, çok satırlı dizeleri tanımlamak için de kullanılabilir.
var x = `hello world
next line`
// returns
hello world
next line
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 = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Hesaplanan özellik adları da oldukça şık. ES5 ve önceki sürümlerde, hesaplanmış bir ada sahip bir nesne özelliği ayarlamak için şunu yapmanız gerekiyordu:
var x = 'hello world', y = 25
var a = {x: x, y: y}
a['joe' + y] = 4
// a is now:
{x: 'hello world', y: 25, joe25: 4}
Şimdi hepsini tek bir tanımda yapabilirsiniz:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
Ve elbette, metotları tanımlamak için sadece şu adla tanımlayabilirsiniz:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Resmi 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. Halihazırda mevcut prototip tabanlı sınıflar üzerinde yalnızca sözdizimsel şeker olsa da, kod netliğini artırmaya hizmet eder. Demek ki bu yapıyor Olumsuz yeni bir nesne modeli veya buna benzer süslü bir şey ekleyin.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Bildirme Yöntemleri
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()
// returns: 50.26548245743669
Alıcılar ve Ayarlayıcılar
Artık sözdiziminde basit bir güncelleme ile alıcılar ve ayarlayıcılar da var. yeniden tanımlayalım Daire ile sınıf alan Emlak.
class Circle {
constructor(radius) {
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669
Şimdi bir setter ekleyelim. Tanımlayabilmek için yarıçap ayarlanabilir bir özellik olarak, asıl alanı şu şekilde yeniden tanımlamalıyız: _yarıçap ya da pasörle çakışmayacak bir şey. Aksi halde stack overflow hatası ile 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 }
set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255
Sonuç olarak, bu nesne yönelimli JavaScript'e güzel bir ektir.
Miras
kullanarak sınıfları tanımlamanın yanı sıra sınıf anahtar kelimesini de kullanabilirsiniz. uzanır süper sınıflardan miras alınacak anahtar kelime. Bunun nasıl çalıştığını bir örnekle görelim.
class Ellipse {
constructor(width, height) {
this._width = width;
this._height = height;
}
get area() { return Math.PI * this._width * this._height; }
set width(w) { this._width = w; }
set height(h) { this._height = h; }
}
class Circle extends Ellipse {
constructor(radius) {
super(radius, radius);
}
set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483
Ve bu, JavaScript ES6'nın bazı özelliklerine kısa bir girişti.
Sıradaki: aşina olmak birkaç önemli JavaScript dizi yöntemi ve sese duyarlı bir robot animasyonu yazmak! Ayrıca, Vue adlı harika bir ön uç çerçevesi hakkında bilgi edinin.
İmaj Kredisi: mikroloji/ Depositphotos
Paylaş Paylaş Cıvıldamak E-posta Canon vs. Nikon: Hangi Fotoğraf Makinesi Markası Daha İyi?Canon ve Nikon, kamera endüstrisindeki en büyük iki isim. Ancak hangi marka daha iyi kamera ve lens yelpazesi sunuyor?
e-postaya bağlı hesapları ücretsiz bulunSonrakini Oku İlgili konular
- Programlama
- JavaScript
Haber bültenimize abone ol
Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!
Abone olmak için buraya tıklayın