Top 10 ES6-Funktionen Jeder Javascript-Entwickler muss wissen

Standardparameter in ES6

In ES6 können wir die Standardwerte direkt in die Signatur der Funktionen einfügen.

var calculateArea = function(height = 50, width = 80) { 
// write logic
...
}

In ES5 verwendeten wir Logik ODER Operator.

var calculateArea = function(height, width) { 
height = height || 50;
width = width || 80;
// write logic
...
}

Vorlagenliterale in ES6

In ES6 können wir eine neue Syntax verwenden ${PARAMETER} innerhalb der zurück angekreuzten Zeichenfolge.

var name = `Your name is ${firstName} ${lastName}.`

In ES5 müssen wir die Zeichenfolge wie folgt unterbrechen.

var name = 'Your name is ' + firstName + ' ' + lastName + '.'

Mehrzeilige Zeichenfolgen in ES6

In ES6 ist es sehr einfach., Verwenden Sie einfach Back-Ticks.

let poemData = `Johny Johny Yes Papa, 
Eating sugar? No, papa!
Telling lies? No, papa!
Open your mouth Ah, ah, ah!`

In ES5, mussten wir die Verwendung der nachstehend Ansatz.

var poemData = 'Johny Johny Yes Papa,\n' 
+ 'Eating sugar? No, papa!\n'
+ 'Telling lies? No, papa!\n'
+ 'Open your mouth Ah, ah, ah!'

Destrukturierungszuweisung in ES6

Die Destrukturierungszuweisungssyntax ist ein JavaScript-Ausdruck, der es ermöglicht, Werte aus Arrays oder Eigenschaften von Objekten in verschiedene Variablen zu entpacken.

In ES5 mussten wir den folgenden Ansatz verwenden.

var o = {p: 42, q: true};
var p = o.p;
var q = o.q;
console.log(p); // 42
console.log(q); // true

Erweiterte Objektliterale in ES6

Objektliterale erleichtern das schnelle Erstellen von Objekten mit Eigenschaften in geschweiften Klammern.,

function getLaptop(make, model, year) {
return {
make,
model,
year
}
}
getLaptop("Apple", "MacBook", "2015");

In ES5 mussten wir der folgenden Syntax folgen.

function getLaptop(make, model, year) {
return {
make: make,
model: model,
year: year
}
}
getLaptop("Apple", "MacBook", "2015");

Weitere Informationen: https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d

Pfeilfunktionen in ES6

Die fetten Pfeile sind erstaunlich, weil sie Ihre this richtig verhalten würden, dh this hat den gleichen Wert wie im Kontext der Funktion— es wird nicht mutieren.

$('.btn').click((event) => { 
this.doSomething() 
});

In ES5, mussten wir nutzen _diese = das oder .binden(dies).,

var _this = this; 
$('.btn').click(function(event){ 
_this.doSomething();
});

weitere Informationen: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Verspricht in ES6

Versprechen sind für die asynchrone Ausführung. In ES6 können wir promise mit der unten gezeigten Pfeilfunktion verwenden.

var asyncCall = new Promise((resolve, reject) => {
// do something async 
resolve();
}).then(()=> { 
console.log('Yay!');
})

In ES5, müssen wir mit setTimeout().

setTimeout(function(){ 
console.log('Yay!');
}, 1000);

Für weitere Informationen: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Block-Scoped Konstrukte Let und Const

let ist eine neue var die erlaubt, die Variable zu den Blöcken.,Der Hauptunterschied zwischen let und var besteht also darin, dass var auf den nächsten Funktionsblock und let auf den nächsten umschließenden Block, der kleiner als ein Funktionsblock sein kann.

In ES6,

In ES5,

Wenn es um const, ist es nur eine unveränderliche und es ist auch Block-scoped wie let.

Klassen in ES6

Wir können eine Klasse in ES6 mit dem Schlüsselwort „class“ erstellen. Die Erstellung und Verwendung von Klassen in ES5 war ein Schmerz im Hintergrund, da es keine Keyword-Klasse gab.,

Ich werde Ihnen kein Beispiel für die Erstellung von ES5-Klassen zeigen, da es viele Geschmacksrichtungen gibt.

Module in ES6

In ES6 gibt es Module mitimport undexport Operanden.

export var userID = 10; 
export function getName(name) { 
... 
};

Wir können userId Variable und getName Methode import-Anweisung importieren.

import {userID, getName} from 'module';
console.log(userID); // 10