BabelJS - Transpile ES6 funkcje do ES5
W tym rozdziale zobaczymy funkcje dodane do ES6. Dowiemy się również, jak skompilować funkcje do ES5 przy użyciu BabelJS.
Poniżej przedstawiono różne funkcje ES6, które omówimy w tym rozdziale:
- Niech + Konst
- Funkcje strzałek
- Classes
- Promises
- Generators
- Destructuring
- Iterators
- Szablon Literalst
- Ulepszony obiekt
- Właściwości domyślne, odpoczynku i spreadu
Niech + Konst
Niech deklaruje zmienną lokalną o zasięgu blokowym w JavaScript. Rozważmy następujący przykład, aby zrozumieć użycie let.
Przykład
let a = 1;
if (a == 1) {
let a = 2;
console.log(a);
}
console.log(a);
Wynik
2
1
Powodem, dla którego pierwsza konsola wyświetla 2, jest to, że a jest zadeklarowany ponownie przy użyciu let i będzie dostępny tylko w ifblok. Każda zmienna zadeklarowana za pomocą let jest dostępna w zadeklarowanym bloku. Zadeklarowaliśmy zmienną a dwukrotnie za pomocą let, ale nie nadpisuje ona wartości a.
Na tym polega różnica między słowami kluczowymi var i let. Kiedy deklarujesz zmienną za pomocą var, zmienna będzie dostępna w zakresie funkcji lub jeśli zadeklarowana będzie zachowywać się jak zmienna globalna.
W przypadku zadeklarowania zmiennej za pomocą let, zmienna jest dostępna w zakresie bloku. Jeśli zostanie zadeklarowany w instrukcji if, będzie dostępny tylko w bloku if. To samo dotyczy przełącznika, pętli for itp.
Zobaczymy teraz konwersję kodu w ES5 przy użyciu babeljs.
Uruchommy następujące polecenie, aby przekonwertować kod -
npx babel let.js --out-file let_es5.js
Dane wyjściowe od es6 do es5 dla słowa kluczowego let są następujące:
Niech używa ES6
let a = 1;
if (a == 1) {
let a = 2;
console.log(a);
}
console.log(a);
Przetransponowano za pomocą babel do ES5
"use strict";
var a = 1;
if (a == 1) {
var _a = 2;
console.log(_a);
}
console.log(a);
Jeśli zobaczysz kod ES5, słowo kluczowe let zostanie zastąpione rozszerzeniem varsłowo kluczowe. Również zmienna wewnątrz bloku if zostaje zmieniona na_a mieć taki sam efekt, jak zadeklarowany za pomocą let słowo kluczowe.
Konst
W tej sekcji dowiemy się o działaniu słowa kluczowego const w ES6 i ES5. W zakresie dostępne jest również słowo kluczowe const; a jeśli na zewnątrz, wyrzuci błąd. Wartość zadeklarowanej zmiennej const nie może zostać zmieniona po przypisaniu. Rozważmy następujący przykład, aby zrozumieć, jak używane jest słowo kluczowe const.
Przykład
let a =1;
if (a == 1) {
const age = 10;
}
console.log(age);
Wynik
Uncaught ReferenceError: age is not defined at
:5:13
Powyższe dane wyjściowe generują błąd, ponieważ const age jest zdefiniowane w bloku if i jest dostępne w bloku if.
Zrozumiemy konwersję do ES5 przy użyciu BabelJS.
ES6
let a =1;
if (a == 1) {
const age = 10;
}
console.log(age);
Komenda
npx babel const.js --out-file const_es5.js
Przetransponowano do ES6 przy użyciu BabelJS
"use strict";
var a = 1;
if (a == 1) {
var _age = 10;
}
console.log(age);
W przypadku ES5, słowo kluczowe const jest zastępowane słowem kluczowym var, jak pokazano powyżej.
Funkcje strzałek
Funkcja Arrow ma krótszą składnię w porównaniu do wyrażenia zmiennej. nazywana jest również funkcją strzałki tłuszczu lub funkcją lambda. Funkcja nie ma własnej tej właściwości. W tej funkcji funkcja słowa kluczowego jest pomijana.
Przykład
var add = (x,y) => {
return x+y;
}
var k = add(3,6);
console.log(k);
Wynik
9
Używając BabelJS, przetransponujemy powyższy kod do ES5.
ES6 - funkcja strzałki
var add = (x,y) => {
return x+y;
}
var k = add(3,6);
console.log(k);
Komenda
npx babel arrowfunction.js --out-file arrowfunction_es5.js
BabelJS - ES5
Za pomocą Babel funkcja strzałki jest konwertowana na funkcję wyrażenia zmiennej, jak pokazano poniżej.
"use strict";
var add = function add(x, y) {
return x + y;
};
var k = add(3, 6);
console.log(k);
Zajęcia
ES6 jest wyposażony w nową funkcję klas. Klasy są podobne do dziedziczenia opartego na prototypach dostępnego w ES5. Słowo kluczowe class służy do definiowania klasy. Klasy są podobne do funkcji specjalnych i mają podobieństwa jak wyrażenie funkcji. Posiada konstruktora, który jest wywoływany wewnątrz klasy.
Przykład
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;
Wynik
Siya-Kapoor
ES6 - Zajęcia
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;
Komenda
npx babel class.js --out-file class_es5.js
BabelJS - ES5
Jest dodatkowy kod dodany za pomocą babeljs, aby uzyskać funkcjonalność działającą dla klas takich samych jak w ES5. BabelJs zapewnia, że funkcjonalność działa tak samo, jak w ES6.
"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;
Obietnice
Obietnice JavaScript służą do zarządzania żądaniami asynchronicznymi w kodzie.
Ułatwia życie i utrzymuje czysty kod podczas zarządzania wieloma wywołaniami zwrotnymi z żądań asynchronicznych, które są zależne. Obietnice zapewniają lepszy sposób pracy z funkcjami zwrotnymi. Obietnice są częścią ES6. Domyślnie, kiedy tworzysz obietnicę, jej stan jest w toku.
Obietnice pojawiają się w trzech stanach -
- w toku (stan początkowy)
- rozwiązany (zakończony pomyślnie)
- rejected(failed)
new Promise()służy do konstruowania obietnicy. Konstruktor Promise ma jeden argument, który jest funkcją zwrotną. Funkcja zwrotna ma dwa argumenty - rozwiąż i odrzuć;
obie są funkcjami wewnętrznymi. Kod asynchroniczny, który piszesz, tj. Wywołanie Ajax, ładowanie obrazu, funkcje czasowe, zostaną umieszczone w funkcji callback.
Jeśli zadanie wykonane w funkcji wywołania zwrotnego zakończy się sukcesem, wywoływana jest funkcja rozwiązywania; w przeciwnym razie wywoływana jest funkcja odrzucania ze szczegółami błędu.
Poniższy wiersz kodu przedstawia wywołanie struktury obietnicy -
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.
});
Przykład obietnicy ES6
let timingpromise = new Promise((resolve, reject) => {
setTimeout(function() {
resolve("Promise is resolved!");
}, 1000);
});
timingpromise.then((msg) => {
console.log(msg);
});
Wynik
Promise is resolved!
ES6 - obietnice
let timingpromise = new Promise((resolve, reject) => {
setTimeout(function() {
resolve("Promise is resolved!");
}, 1000);
});
timingpromise.then((msg) => {
console.log(msg);
});
Komenda
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);
});
W przypadku obietnic kod nie zmienia się po transpozycji. Musimy użyć babel-polyfill, aby działał na starszych przeglądarkach. Szczegóły dotyczące babel-polyfill są wyjaśnione w rozdziale babel - poyfill.
Generatory
Generator działa normalnie function. Funkcja ma specjalną funkcję składniową * z * oznaczającą funkcję i słowem kluczowym yield do użycia wewnątrz funkcji. Ma to na celu wstrzymanie lub uruchomienie funkcji w razie potrzeby. Normalnych funkcji nie można zatrzymać w międzyczasie od rozpoczęcia wykonywania. Wykona pełną funkcję lub zatrzyma się, gdy napotka instrukcję return. Generator działa tutaj inaczej, możesz zatrzymać funkcję za pomocą słowa kluczowego yield i uruchomić ją, wywołując generator ponownie w razie potrzeby.
Przykład
function* generatorfunction(a) {
yield a;
yield a +1 ;
}
let g = generatorfunction(8);
console.log(g.next());
console.log(g.next());
Wynik
{value: 8, done: false}
{value: 9, done: false}
ES6 - Generator
function* generatorfunction(a) {
yield a;
yield a +1 ;
}
let g = generatorfunction(8);
console.log(g.next());
console.log(g.next());
Komenda
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());
Iteratory
Iterator w JavaScript zwraca obiekt JavaScript, który ma wartość. Obiekt ma również flagę o nazwie done, która ma wartość true / false. Daje fałsz, jeśli nie jest to koniec iteratora. Rozważmy przykład i zobaczmy działanie iteratora na tablicy.
Przykład
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());
W powyższym przykładzie użyliśmy tablicy liczb i wywołaliśmy funkcję w tablicy przy użyciu Symbol.iterator jako indeks.
Dane wyjściowe, które otrzymujemy za pomocą metody next () w tablicy, są następujące -
{value: 4, done: false}
{value: 7, done: false}
{value: 3, done: false}
{value: 10, done: false}
{value: undefined, done: true}
Dane wyjściowe dają obiekt z wartością i są wykonywane jako właściwości. Każdynext()wywołanie metody zwraca następną wartość z tablicy i jest wykonywane jako fałsz. Wartość done będzie prawdziwa tylko wtedy, gdy elementy tablicy są gotowe. Możemy tego użyć do iteracji po tablicach. Dostępnych jest więcej opcji, takich jakfor-of pętla, która jest używana w następujący sposób -
Przykład
let numbers = [4, 7, 3, 10];
for (let n of numbers) {
console.log(n);
}
Wynik
4
7
3
10
Kiedy for-of loopużywa klucza, podaje szczegóły wartości tablicy, jak pokazano powyżej. Sprawdzimy obie kombinacje i zobaczymy, jak babeljs transponuje je do es5.
Przykład
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);
}
Komenda
npx babel iterator.js --out-file iterator_es5.js
Wynik
"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;
}
}
}
Dodano zmiany for-ofpętla w es5. Ale iterator.next pozostaje taki, jaki jest. Musimy użyćbabel-polyfillaby działało w starych przeglądarkach. Babel-polyfill jest instalowany wraz z babel i to samo może być używane z node_modules, jak pokazano poniżej -
Przykład
<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>
Wynik
Destrukturyzacja
Właściwość destrukturyzująca zachowuje się jak wyrażenie JavaScript, które wypakowuje wartości z tablic, obiektów.
Poniższy przykład wyjaśni działanie składni destrukturyzującej.
Przykład
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);
Wynik
10
20
[30, 40, 50]
1
2
Powyższy wiersz kodu pokazuje, w jaki sposób wartości są przypisywane z prawej strony tablicy do zmiennych po lewej stronie. Zmienna z...rem pobiera wszystkie pozostałe wartości z tablicy.
Możemy również przypisać wartości z obiektu po lewej stronie za pomocą operatora warunkowego, jak pokazano poniżej -
({ x, y } = (z) ? { x: 10, y: 20 } : { x: 1, y: 2 });
console.log(x); // 1
console.log(y); // 2
Przekonwertujmy to samo na ES5 za pomocą babeljs -
Komenda
npx babel destructm.js --out-file destruct_es5.js
destruct_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);
Literały szablonów
Literał szablonu to literał tekstowy, który dopuszcza wewnątrz niego wyrażenia. Używa backtick (``) zamiast pojedynczych lub podwójnych cudzysłowów. Kiedy mówimy wyrażenie wewnątrz ciągu, oznacza to, że możemy używać zmiennych, wywoływać funkcję itp. Wewnątrz łańcucha.
Przykład
let a = 5;
let b = 10;
console.log(`Using Template literal : Value is ${a + b}.`);
console.log("Using normal way : Value is " + (a + b));
Wynik
Using Template literal : Value is 15.
Using normal way : Value is 15
ES6 - Literał szablonu
let a = 5;
let b = 10;
console.log(`Using Template literal : Value is ${a + b}.`);
console.log("Using normal way : Value is " + (a + b));
Komenda
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));
Udoskonalone literały obiektów
W es6 nowe funkcje dodane do literałów obiektów są bardzo dobre i przydatne. Przejdziemy przez kilka przykładów literału obiektu w ES5 i ES6 -
Przykład
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}
Jeśli widzisz powyższy kod, obiekt w ES5 i ES6 różni się. W ES6 nie musimy określać wartości klucza, jeśli nazwy zmiennych są takie same jak klucz.
Zobaczmy kompilację do ES5 przy użyciu babel.
Rozszerzony literał obiektu ES6
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"
Komenda
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"
Właściwości domyślne, odpoczynku i spreadu
W tej sekcji omówimy właściwości domyślne, pozostałe i rozprzestrzeniające się.
Domyślna
W ES6 możemy użyć parametrów domyślnych do parametrów funkcji w następujący sposób -
Przykład
let add = (a, b = 3) => {
return a + b;
}
console.log(add(10, 20)); // 30
console.log(add(10)); // 13
Prześlijmy powyższy kod do ES5 za pomocą babel.
Komenda
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));
Odpoczynek
Parametr Reszta zaczyna się od trzech kropek (...), jak pokazano na poniższym przykładzie -
Przykład
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
W powyższej funkcji przekazujemy n liczbę parametrów do funkcji add. Aby dodać wszystkie te parametry, jeśli był w ES5, musimy polegać na argumencie obiekt, aby uzyskać szczegółowe informacje o argumentach. Z ES6,rest it pomaga zdefiniować argumenty za pomocą trzech kropek, jak pokazano powyżej, i możemy przez nie przejść i uzyskać sumę liczb.
Note - Nie możemy używać dodatkowych argumentów, gdy używamy trzech kropek, czyli reszta.
Przykład
let add = (...args, value) => { //syntax error
let sum = 0;
args.forEach(function (n) {
sum += n;
});
return sum;
};
Powyższy kod spowoduje błąd składni.
Kompilacja do es5 wygląda następująco -
Komenda
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));
Rozpowszechnianie się
Właściwość Spread również ma trzy kropki, takie jak rest. Poniżej znajduje się działający przykład, który pokazuje, jak używać właściwości spread.
Przykład
let add = (a, b, c) => {
return a + b + c;
}
let arr = [11, 23, 3];
console.log(add(...arr)); //37
Zobaczmy teraz, jak powyższy kod jest transponowany za pomocą babel -
Komenda
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));
Proxy
Proxy to obiekt, w którym można zdefiniować niestandardowe zachowanie dla operacji, takich jak wyszukiwanie właściwości, przypisywanie, wyliczanie, funkcja, wywołanie itp.
Składnia
var a = new Proxy(target, handler);
Zarówno cel i obsługi są obiektami.
cel jest obiektem lub może być innym elementem zastępczym.
handler będzie obiektem ze swoimi właściwościami jako funkcjami, które zapewnią zachowanie po wywołaniu.
Spróbujmy zrozumieć te cechy na przykładzie -
Przykład
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);
W powyższym przykładzie zdefiniowaliśmy target i handler i używaliśmy go z proxy. Proxy zwraca obiekt z parami klucz-wartość.
Wynik
Siya Kapoor
Mumbai
invalid key
Zobaczmy teraz, jak przetransponować powyższy kod do ES5 za pomocą babel -
Komenda
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);