BabelJS - ES5'e Transpile ES6 özellikleri
Bu bölümde ES6'ya eklenen özellikleri göreceğiz. BabelJS kullanarak özellikleri ES5'e nasıl derleyeceğimizi de öğreneceğiz.
Bu bölümde tartışacağımız çeşitli ES6 özellikleri aşağıdadır -
- Let + Const
- Ok İşlevleri
- Classes
- Promises
- Generators
- Destructuring
- Iterators
- Şablon Literalst
- Geliştirilmiş Nesne
- Varsayılan, Dinlenme ve Yayılma Özellikleri
Let + Const
JavaScript'te bir blok kapsamı yerel değişkeni bildirelim. Let'in kullanımını anlamak için aşağıdaki örneği düşünün.
Misal
let a = 1;
if (a == 1) {
let a = 2;
console.log(a);
}
console.log(a);
Çıktı
2
1
İlk konsolun 2'yi yazdırmasının nedeni a kullanılarak tekrar ilan edildi let ve yalnızca ifblok. Let kullanılarak bildirilen herhangi bir değişken sadece bildirilen blok içinde kullanılabilir. A değişkenini let'i kullanarak iki kez tanımladık, ancak bu, a'nın değerinin üzerine yazmıyor.
Bu, var ve let anahtar sözcükleri arasındaki farktır. Var kullanarak değişkeni bildirdiğinizde, değişken işlev kapsamında kullanılabilir olacak veya bildirilmişse bir küresel değişken gibi davranacaktır.
Let ile bir değişken bildirildiğinde, değişken blok kapsamı içinde kullanılabilir. İf ifadesinin içinde bildirilirse, yalnızca if bloğu içinde kullanılabilir olacaktır. Aynısı geçiş, döngü vb. İçin de geçerlidir.
Şimdi babeljs kullanarak ES5'teki kod dönüşümünü göreceğiz.
Kodu dönüştürmek için aşağıdaki komutu çalıştıralım -
npx babel let.js --out-file let_es5.js
Let anahtar kelimesi için es6'dan es5'e çıktı aşağıdaki gibidir -
ES6 kullanalım
let a = 1;
if (a == 1) {
let a = 2;
console.log(a);
}
console.log(a);
Babel kullanılarak ES5'e aktarıldı
"use strict";
var a = 1;
if (a == 1) {
var _a = 2;
console.log(_a);
}
console.log(a);
ES5 kodunu görürseniz let anahtar kelimesi ile değiştirilir. varanahtar kelime. Ayrıca if bloğunun içindeki değişken olarak yeniden adlandırılır_a ile bildirildiği zamankiyle aynı etkiye sahip olmak let anahtar kelime.
Const
Bu bölümde, const anahtar kelimesinin ES6 ve ES5'te nasıl çalıştığını öğreneceğiz. Const anahtar sözcüğü, kapsam dahilinde de mevcuttur; ve dışarıdaysa, bir hata atar. Sabit beyan edilen değişkenin değeri atandıktan sonra değiştirilemez. Const anahtar kelimesinin nasıl kullanıldığını anlamak için aşağıdaki örneği ele alalım.
Misal
let a =1;
if (a == 1) {
const age = 10;
}
console.log(age);
Çıktı
Uncaught ReferenceError: age is not defined at
:5:13
Yukarıdaki çıktı, sabiti if bloğu içinde tanımlandığı ve if bloğu içinde mevcut olduğu için bir hata atar.
BabelJS kullanarak ES5'e dönüştürmeyi anlayacağız.
ES6
let a =1;
if (a == 1) {
const age = 10;
}
console.log(age);
Komut
npx babel const.js --out-file const_es5.js
BabelJS Kullanılarak ES6'ya Aktarıldı
"use strict";
var a = 1;
if (a == 1) {
var _age = 10;
}
console.log(age);
ES5 durumunda, const anahtar sözcüğü yukarıda gösterildiği gibi var anahtar sözcüğü ile değiştirilir.
Ok İşlevleri
Bir Arrow işlevi, değişken ifadeye kıyasla daha kısa bir sözdizimine sahiptir. yağ ok işlevi veya lambda işlevi olarak da adlandırılır. Fonksiyonun kendine ait bu özelliği yoktur. Bu işlevde, anahtar sözcük işlevi atlanmıştır.
Misal
var add = (x,y) => {
return x+y;
}
var k = add(3,6);
console.log(k);
Çıktı
9
BabelJS'yi kullanarak yukarıdaki kodu ES5'e aktaracağız.
ES6 - Ok işlevi
var add = (x,y) => {
return x+y;
}
var k = add(3,6);
console.log(k);
Komut
npx babel arrowfunction.js --out-file arrowfunction_es5.js
BabelJS - ES5
Babel kullanıldığında, ok işlevi aşağıda gösterildiği gibi değişken ifade işlevine dönüştürülür.
"use strict";
var add = function add(x, y) {
return x + y;
};
var k = add(3, 6);
console.log(k);
Sınıflar
ES6, yeni Sınıflar özelliğiyle birlikte gelir. Sınıflar, ES5'te bulunan prototip tabanlı kalıtıma benzer. Class anahtar sözcüğü, sınıfı tanımlamak için kullanılır. Sınıflar özel işlevler gibidir ve işlev ifadesi gibi benzerliklere sahiptir. Sınıf içinde çağrılan bir kurucuya sahiptir.
Misal
class Person {
constructor(fname, lname, age, address) {
this.fname = fname;
this.lname = lname;
this.age = age;
this.address = address;
}
get fullname() {
return this.fname +"-"+this.lname;
}
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;
Çıktı
Siya-Kapoor
ES6 - Sınıflar
class Person {
constructor(fname, lname, age, address) {
this.fname = fname;
this.lname = lname;
this.age = age;
this.address = address;
}
get fullname() {
return this.fname +"-"+this.lname;
}
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;
Komut
npx babel class.js --out-file class_es5.js
BabelJS - ES5
ES5'te olduğu gibi sınıflar için çalışan işlevselliği elde etmek için babeljs kullanılarak eklenen ekstra kod vardır. BabelJs, işlevselliğin ES6'da olduğu gibi çalışmasını sağlar.
"use strict";
var _createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Person = function () {
function Person(fname, lname, age, address) {
_classCallCheck(this, Person);
this.fname = fname;
this.lname = lname;
this.age = age;
this.address = address;
}
_createClass(Person, [{
key: "fullname",
get: function get() {
return this.fname + "-" + this.lname;
}
}]);
return Person;
}();
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;
Sözler
JavaScript vaatleri, kodunuzdaki eşzamansız istekleri yönetmek için kullanılır.
Bağımlılığı olan eşzamansız isteklerden gelen birden çok geri aramayı yönetirken hayatı kolaylaştırır ve kodu temiz tutar. Sözler, geri arama işlevleriyle çalışmanın daha iyi bir yolunu sağlar. Sözler ES6'nın bir parçasıdır. Varsayılan olarak, bir söz oluşturduğunuzda sözün durumu beklemededir.
Sözler üç eyalette gelir -
- beklemede (başlangıç durumu)
- çözüldü (başarıyla tamamlandı)
- rejected(failed)
new Promise()bir söz oluşturmak için kullanılır. Promise yapıcısının bir geri arama işlevi olan bir bağımsız değişkeni vardır. Geri arama işlevinin iki bağımsız değişkeni vardır - çöz ve reddet;
bunların ikisi de dahili işlevlerdir. Yazdığınız asenkron kod, yani Ajax çağrısı, resim yükleme, zamanlama fonksiyonları geri arama fonksiyonunda yer alacaktır.
Geri arama işlevinde gerçekleştirilen görev başarılıysa, çözümleme işlevi çağrılır; aksi takdirde, reddetme işlevi hata ayrıntılarıyla çağrılır.
Aşağıdaki kod satırı bir taahhüt yapısı çağrısını gösterir -
var _promise = new Promise (function(resolve, reject) {
var success = true;
if (success) {
resolve("success");
} else {
reject("failure");
}
});
_promise.then(function(value) {
//once function resolve gets called it comes over here with the value passed in resolve
console.log(value); //success
}).catch(function(value) {
//once function reject gets called it comes over here with the value passed in reject
console.log(value); // failure.
});
ES6 Söz Örneği
let timingpromise = new Promise((resolve, reject) => {
setTimeout(function() {
resolve("Promise is resolved!");
}, 1000);
});
timingpromise.then((msg) => {
console.log(msg);
});
Çıktı
Promise is resolved!
ES6 - Sözler
let timingpromise = new Promise((resolve, reject) => {
setTimeout(function() {
resolve("Promise is resolved!");
}, 1000);
});
timingpromise.then((msg) => {
console.log(msg);
});
Komut
npx babel promise.js --out-file promise_es5.js
BabelJS - ES5
"use strict";
var timingpromise = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("Promise is resolved!");
}, 1000);
});
timingpromise.then(function (msg) {
console.log(msg);
});
Sözler için, kod aktarıldığında değişmez. Eski tarayıcılarda çalışabilmesi için babel-polyfill kullanmamız gerekiyor. Babel-polyfill ile ilgili detaylar babel - poyfill bölümünde anlatılıyor.
Jeneratörler
Jeneratör işlevi normal gibidir function. Fonksiyon işlev ve * ile özel bir sözdizimi fonksiyon * sahiptir verim işlevi içinde kullanılacak anahtar kelime. Bu, gerektiğinde işlevi duraklatmak veya başlatmak içindir. Yürütme başladığında normal işlevler arasında durdurulamaz. Return ifadesiyle karşılaştığında ya tam işlevi çalıştıracak ya da duracaktır. Generator burada farklı şekilde çalışır, verim anahtar kelimesi ile fonksiyonu durdurabilir ve gerektiğinde jeneratörü tekrar arayarak çalıştırabilirsiniz.
Misal
function* generatorfunction(a) {
yield a;
yield a +1 ;
}
let g = generatorfunction(8);
console.log(g.next());
console.log(g.next());
Çıktı
{value: 8, done: false}
{value: 9, done: false}
ES6 - Jeneratör
function* generatorfunction(a) {
yield a;
yield a +1 ;
}
let g = generatorfunction(8);
console.log(g.next());
console.log(g.next());
Komut
npx babel generator.js --out-file generator_es5.js
BabelJS - ES5
"use strict";
var _marked = /*#__PURE__*/regeneratorRuntime.mark(generatorfunction);
function generatorfunction(a) {
return regeneratorRuntime.wrap(function generatorfunction$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return a;
case 2:
_context.next = 4;
return a + 1;
case 4:
case "end":
return _context.stop();
}
}
}, _marked, this);
}
var g = generatorfunction(8);
console.log(g.next());
console.log(g.next());
Yineleyiciler
JavaScript'teki yineleyici, değeri olan bir JavaScript nesnesini geri verir. Nesnede ayrıca, doğru / yanlış değerine sahip tamamlandı adlı bir bayrak vardır. Yineleyicinin sonu değilse yanlış verir. Bir örnek düşünelim ve yineleyicinin bir dizi üzerinde çalışmasını görelim.
Misal
let numbers = [4, 7, 3, 10];
let a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
Yukarıdaki örnekte, bir sayı dizisi kullandık ve dizide bir işlevi kullanarak Symbol.iterator dizin olarak.
Dizide next () kullanarak elde ettiğimiz çıktı aşağıdaki gibidir -
{value: 4, done: false}
{value: 7, done: false}
{value: 3, done: false}
{value: 10, done: false}
{value: undefined, done: true}
Çıktı, değerli bir nesne verir ve özellik olarak yapılır. Hernext()yöntem çağrısı, diziden sonraki değeri verir ve yanlış olarak yapılır. Done değeri yalnızca dizideki öğeler tamamlandığında doğru olacaktır. Bunu diziler üzerinde yinelemek için kullanabiliriz. Gibi daha fazla seçenek varfor-of aşağıdaki gibi kullanılan döngü -
Misal
let numbers = [4, 7, 3, 10];
for (let n of numbers) {
console.log(n);
}
Çıktı
4
7
3
10
Ne zaman for-of loopanahtarı kullanır, yukarıda gösterildiği gibi dizi değerlerinin ayrıntılarını verir. Her iki kombinasyonu da kontrol edeceğiz ve babeljs'in bunları nasıl es5'e aktardığını göreceğiz.
Misal
let numbers = [4, 7, 3, 10];
let a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
let _array = [4, 7, 3, 10];
for (let n of _array) {
console.log(n);
}
komut
npx babel iterator.js --out-file iterator_es5.js
Çıktı
"use strict";
var numbers = [4, 7, 3, 10];
var a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
var _array = [4, 7, 3, 10];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = _array[Symbol.iterator](),
_step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
_iteratorNormalCompletion = true) {
var n = _step.value;
console.log(n);
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
Eklenen değişiklikler var for-ofes5 içinde döngü. Ancak iterator.next olduğu gibi bırakılır. Kullanmalıyızbabel-polyfilleski tarayıcılarda çalışmasını sağlamak için. Babel-polyfill, babel ile birlikte kurulur ve aynısı aşağıda gösterildiği gibi node_modules'den de kullanılabilir -
Misal
<html>
<head>
<script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
<script type="text/javascript" src="iterator_es5.js"></script>
</head>
<body>
<h1>Iterators</h1>
</body>
</html>
Çıktı

Şeklini bozma
Destructuring özelliği, dizilerden, nesnelerden değerleri ayıran bir JavaScript ifadesi gibi davranır.
Aşağıdaki örnek, yok etme sözdiziminin işleyişini açıklayacaktır.
Misal
let x, y, rem;
[x, y] = [10, 20];
console.log(x);
console.log(y);
[x, y, ...rem] = [10, 20, 30, 40, 50];
console.log(rem);
let z = 0;
({ x, y } = (z) ? { x: 10, y: 20 } : { x: 1, y: 2 });
console.log(x);
console.log(y);
Çıktı
10
20
[30, 40, 50]
1
2
Yukarıdaki kod satırı, değerlerin dizinin sağ tarafından sol taraftaki değişkenlere nasıl atandığını gösterir. Değişken...rem diziden kalan tüm değerleri alır.
Ayrıca, aşağıda gösterildiği gibi koşullu operatörü kullanarak sol taraftaki nesneden değerleri atayabiliriz -
({ x, y } = (z) ? { x: 10, y: 20 } : { x: 1, y: 2 });
console.log(x); // 1
console.log(y); // 2
Babeljs kullanarak aynısını ES5'e çevirelim -
komut
npx babel destructm.js --out-file destruct_es5.js
destroyt_es5.js
"use strict";
var x = void 0,
y = void 0,
rem = void 0;
x = 10;
y = 20;
console.log(x);
console.log(y);
x = 10;
y = 20;
rem = [30, 40, 50];
console.log(rem);
var z = 0;
var _ref = z ? { x: 10, y: 20 } : { x: 1, y: 2 };
x = _ref.x;
y = _ref.y;
console.log(x);
console.log(y);
Şablon Değişmezleri
Şablon değişmezi, içindeki ifadelere izin veren bir dizedir. Tek veya çift tırnak yerine ters işaret (``) kullanır. Bir dizge içinde ifade dediğimizde, dizge içinde değişkenler kullanabiliriz, bir işlevi çağırabiliriz vb.
Misal
let a = 5;
let b = 10;
console.log(`Using Template literal : Value is ${a + b}.`);
console.log("Using normal way : Value is " + (a + b));
Çıktı
Using Template literal : Value is 15.
Using normal way : Value is 15
ES6 - Şablon Değişmez Değeri
let a = 5;
let b = 10;
console.log(`Using Template literal : Value is ${a + b}.`);
console.log("Using normal way : Value is " + (a + b));
komut
npx babel templateliteral.js --out-file templateliteral_es5.js
BabelJS - ES5
"use strict";
var a = 5;
var b = 10;
console.log("Using Template literal : Value is " + (a + b) + ".");
console.log("Using normal way : Value is " + (a + b));
Gelişmiş Nesne Değişmezleri
Es6'da, nesne değişmezlerine eklenen yeni özellikler çok iyi ve kullanışlıdır. ES5 ve ES6'daki birkaç nesne değişmez örneğini inceleyeceğiz -
Misal
ES5
var red = 1, green = 2, blue = 3;
var rgbes5 = {
red: red,
green: green,
blue: blue
};
console.log(rgbes5); // {red: 1, green: 2, blue: 3}
ES6
let rgbes6 = {
red,
green,
blue
};
console.log(rgbes6); // {red: 1, green: 2, blue: 3}
Yukarıdaki kodu görürseniz, ES5 ve ES6'daki nesne farklıdır. ES6'da, değişken isimleri anahtarla aynıysa anahtar değerini belirtmemize gerek yoktur.
Babel kullanarak ES5'in derlemesini görelim.
ES6-Geliştirilmiş nesne değişmez değeri
const red = 1, green = 2, blue = 3;
let rgbes5 = {
red: red,
green: green,
blue: blue
};
console.log(rgbes5);
let rgbes6 = {
red,
green,
blue
};
console.log(rgbes6);
let brand = "carbrand";
const cars = {
[brand]: "BMW"
}
console.log(cars.carbrand); //"BMW"
komut
npx babel enhancedobjliteral.js --out-file enhancedobjliteral_es5.js
BabelJS - ES5
"use strict";
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value, enumerable: true, configurable: true, writable: true
});
} else { obj[key] = value; } return obj;
}
var red = 1,
green = 2,
blue = 3;
var rgbes5 = {
red: red,
green: green,
blue: blue
};
console.log(rgbes5);
var rgbes6 = {
red: red,
green: green,
blue: blue
};
console.log(rgbes6);
var brand = "carbrand";
var cars = _defineProperty({}, brand, "BMW");
console.log(cars.carbrand); //"BMW"
Varsayılan, Dinlenme ve Yayılma Özellikleri
Bu bölümde, varsayılan, dinlenme ve yayılma özelliklerini tartışacağız.
Varsayılan
ES6 ile, aşağıdaki gibi fonksiyon parametrelerine varsayılan parametreleri kullanabiliriz -
Misal
let add = (a, b = 3) => {
return a + b;
}
console.log(add(10, 20)); // 30
console.log(add(10)); // 13
Babel kullanarak yukarıdaki kodu ES5'e aktaralım.
komut
npx babel default.js --out-file default_es5.js
BabelJS - ES5
"use strict";
var add = function add(a) {
var b = arguments.length > 1 >> arguments[1] !== undefined ? arguments[1] : 3;
return a + b;
};
console.log(add(10, 20));
console.log(add(10));
Dinlenme
Rest parametresi, aşağıdaki örnekte gösterildiği gibi üç noktayla (...) başlar -
Misal
let add = (...args) => {
let sum = 0;
args.forEach(function (n) {
sum += n;
});
return sum;
};
console.log(add(1, 2)); // 3
console.log(add(1, 2, 5, 6, 6, 7)); //27
Yukarıdaki fonksiyonda, add fonksiyonuna n sayıda parametre aktarıyoruz. ES5'te olsaydı tüm bu parametreleri eklemek için, argümanların ayrıntılarını almak için arguments nesnesine güvenmemiz gerekir. ES6 ile,rest it yukarıda gösterildiği gibi argümanları üç noktayla tanımlamaya yardımcı olur ve içinden geçip sayıların toplamını alabiliriz.
Note - Üç nokta, yani rest kullanırken ek argümanlar kullanamayız.
Misal
let add = (...args, value) => { //syntax error
let sum = 0;
args.forEach(function (n) {
sum += n;
});
return sum;
};
Yukarıdaki kod, sözdizimi hatası verecektir.
Es5'in derlemesi aşağıdaki gibidir -
komut
npx babel rest.js --out-file rest_es5.js
Babel -ES5
"use strict";
var add = function add() {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var sum = 0;
args.forEach(function (n) {
sum += n;
});
return sum;
};
console.log(add(1, 2));
console.log(add(1, 2, 5, 6, 6, 7));
Yaymak
Spread özelliği de rest gibi üç noktaya sahiptir. Aşağıda spread özelliğinin nasıl kullanılacağını gösteren çalışan bir örnek verilmiştir.
Misal
let add = (a, b, c) => {
return a + b + c;
}
let arr = [11, 23, 3];
console.log(add(...arr)); //37
Şimdi yukarıdaki kodun babel kullanılarak nasıl aktarıldığını görelim -
komut
npx babel spread.js --out-file spread_es5.js
Babel-ES5
"use strict";
var add = function add(a, b, c) {
return a + b + c;
};
var arr = [11, 23, 3];
console.log(add.apply(undefined, arr));
Vekiller
Proxy, özellik arama, atama, numaralandırma, işlev, çağırma vb. İşlemler için özel davranış tanımlayabileceğiniz bir nesnedir.
Sözdizimi
var a = new Proxy(target, handler);
Hem hedef hem de işleyici nesnelerdir.
hedef bir nesnedir veya başka bir proxy öğesi olabilir.
işleyici , işlev olarak özellikleri ile çağrıldığında davranış verecek bir nesne olacaktır.
Bir örnek yardımıyla bu özellikleri anlamaya çalışalım -
Misal
let handler = {
get: function (target, name) {
return name in target ? target[name] : "invalid key";
}
};
let o = {
name: 'Siya Kapoor',
addr: 'Mumbai'
}
let a = new Proxy(o, handler);
console.log(a.name);
console.log(a.addr);
console.log(a.age);
Yukarıdaki örnekte hedef ve eylemci tanımladık ve bunu proxy ile kullandık. Proxy, nesneyi anahtar / değer çiftleriyle döndürür.
Çıktı
Siya Kapoor
Mumbai
invalid key
Şimdi yukarıdaki kodu babel kullanarak ES5'e nasıl aktaracağımızı görelim -
komut
npx babel proxy.js --out-file proxy_es5.js
Babel-ES5
'use strict';
var handler = {
get: function get(target, name) {
return name in target ? target[name] : "invalid key";
}
};
var o = {
name: 'Siya Kapoor',
addr: 'Mumbai'
};
var a = new Proxy(o, handler);
console.log(a.name);
console.log(a.addr);
console.log(a.age);