Dieser Artikel wird Ihnen ein tiefgreifendes Verständnis von ES6 vermitteln und mehr über die neuen Funktionen von ES6 erfahren. Ich hoffe, er wird Ihnen hilfreich sein!
Front-End-Einstieg (vue) zum Mastery-Kurs: Einstieg ins Lernen
ECMAScriptist eine脚本语言的标准化规范; ursprünglich hieß sieMocha, wurde später inLiveScriptumbenannt und schließlich inJavaScriptumbenannt
ECMAScript 2015 (ES2015), Version 6, ursprünglich bekannt als ECMAScript 6 (ES6), fügt neue Funktionen hinzu.
ES6-Blockbereich let
Was ist zunächst der Umfang? Geltungsbereich bedeutet einfach die Deklaration einer Variablen. Der gültige Geltungsbereich dieser Variablen liegt vor let . js hat nur全局作用域und函数作用域von var , und ES6 bringt块级作用域zu js.
{
var a = "?";
sei b = "⛳";
}
console.log(a);
console.log(b);? Nicht erfasster Referenzfehler: b ist nicht definiert
Wie Sie sehen, verwenden wir das Schlüsselwort var, um die Variable a im Block zu definieren. Daher var声明的变量是全局的, aber wir möchten, dass die Variable im Block wirksam wird Nach dem Verlassen des Blocks kann darauf zugegriffen werden. Dann können Sie das neue Schlüsselwort „ let “ auf Blockebene in ES6 verwenden, um die Variable a is not defined a“ zu deklarieren.
Definieren Sie, wie unten gezeigt, zunächst eine Funktion, die ein Array zurückgibt, bevor Sie das destrukturierte Array verwenden, und weisen Sie den Rückgabewert temp zu. Definieren Sie dann direkt eine Array-Variable, nachdem Sie解构数组verwendet haben dann Der Rückgabewert der Funktion zeigt automatisch den Wert des ersten Elements der ersten Array-Variablen, des zweiten Elements der zweiten Array-Variablen usw. Schließlich werden die drei Variablen gedruckt und es gibt keinen Problem.
Funktion frühstück() {
zurückkehren ['?', '?', '?'];
}
var temp = frühstück();
console.log(temp[0], temp[1], temp[2]);
sei [a, b, c] = Frühstück();
console.log(a, b, c);? ?
Zuerst gibt解构对象breakfast ein对象zurück. Der Schlüssel im Schlüssel-Wert-Paar stellt den Schlüsselnamen des tatsächlich zugeordneten Objekts dar. Nach Abschluss der Destrukturierung wird die Zuweisung durchgeführt wird automatisch abgeschlossen. Dann wird die Frühstücksfunktion aufgerufen, um das Objekt zurückzugeben. Drucken Sie dann die Variablen a, b, c aus, und Sie können sehen, dass kein Problem vorliegt
Funktion frühstück() {
return { a: '?', b: '?', c: '?'
}
let { a: a, b: b, c: c } = frühstück();
console.log(a, b, c);?
Bevor wir den Vorlagenstring verwenden, verketten wir die Stringvariablen mit +
Verwenden Sie zunächst die von ES6 bereitgestellte Vorlagenzeichenfolge. Wenn Sie Variablen verwenden möchten, verwenden Sie ${变量}
sei a = '?',
b = '?️';
sei c = 'Heute essen' + a + 'Nach dem Essen sehen' + b;
console.log(c);
let d = `Iss heute ${a} und pass auf, nachdem du ${b} gegessen hast`;
console.log(d);Heute essen? Mal sehen, nach dem Essen?️ Heute essen? Mal sehen, nach dem Essen?️
Mit diesen Funktionen können Sie problemlos Vorgänge abschließen, z. B. ob die Zeichenfolge mit etwas beginnt, ob die Zeichenfolge mit etwas endet und ob sie eine Zeichenfolge enthält.
let str = 'Hallo, ich bin Xiao Zhou ❤️';
console.log(str.startsWith('Hallo'));
console.log(str.endsWith('❤️'));
console.log(str.endsWith('Hallo'));
console.log(str.includes(" "));WAHR WAHR FALSCH WAHR
In ES6 können Sie Standardparameter verwenden. Wenn dem Parameter kein Wert zugewiesen ist, wird er mit den festgelegten Standardparametern ausgeführt. Wenn dem Parameter ein Wert zugewiesen wird, wird er mit dem neu zugewiesenen Wert ausgeführt Wert, der den Standardwert überschreibt. Verwenden Sie Folgendes:
Funktion say(str) {
console.log(str);
}
Funktion say1(str = 'Hey') {
console.log(str);
}
sagen();
say1();
say1('❤️');undefiniert Hey hey❤️
Verwenden Sie ... um Elemente für eine einfache Bedienung zu erweitern. Gehen Sie wie folgt vor:
let arr = ['❤️', '?', '?']; console.log(arr); console.log(...arr); let brr = ['Prince', ...arr]; console.log(brr); console.log(...brr);
[ '❤️', '?', '?' ❤️ ? [ 'Prinz', '❤️', '?', '?' Prinz ❤️ ?
Der ... Operator wird für Funktionsparameter verwendet und empfängt ein Array von Parametern. Er wird wie folgt verwendet:
Funktion f1(a, b, ...c) {
console.log(a, b, c);
console.log(a, b, ...c);
}
f1('?','?','☃️','㊙️');? ? [ '☃️', '㊙️' ] ? ? ☃️ ㊙️
Sie können .name verwenden, um den Namen der Funktion abzurufen. Die spezifische Verwendung ist wie folgt:
Funktion f1() { }
console.log(f1.name);
sei f2 = function () { };
console.log(f2.name);
let f3 = function f4() { };
console.log(f3.name);f1 f2 f4
Die Verwendung von Pfeilfunktionen kann den Code prägnanter machen, Sie müssen jedoch auch auf die Einschränkungen von Pfeilfunktionen achten, und die Pfeilfunktion selbst hat dies nicht, sie zeigt auf das übergeordnete Element
sei f1 = a => a;
sei f2 = (a, b) => {
gib a + b zurück;
}
console.log(f1(10));
console.log(f2(10, 10));10 20
Wenn bei Verwendung des Objektausdrucks von es6 das Objektattribut mit dem Wert übereinstimmt, kann der Wert weggelassen werden, und function kann beim Schreiben der Funktion weggelassen werden. Die Verwendung ist wie folgt:
sei a = '㊙️';
sei b = '☃️';
const obj = {
a: a,
b: b,
sagen: Funktion () {
}
}
const es6obj = {
A,
B,
sagen() {
}
}
console.log(obj);
console.log(es6obj); { a: '㊙️', b: '☃️', say: [Funktion: say] }
{ a: '㊙️', b: '☃️', say: [Funktion: say] } Verwenden Sie das Schlüsselwort const , um die Messung zu definieren, const den Wert in der Messung nicht einzuschränken. Verwenden Sie Folgendes:
const app = ['☃️', '?'];
console.log(...app);
app.push('?');
console.log(...app);
App = 10;Sie können sehen, dass beim erneuten Zuweisen eines Werts zur Messung ein Fehler gemeldet wird.
☃️ ? ☃️ ? App = 10; ^ TypeError: Zuweisung zu konstanter Variable.
Wenn bei der Verwendung von Punkten zum Definieren von Objektattributen der Attributname Leerzeichen enthält, ist dies unzulässig und die Syntax kann nicht übergeben werden. Die Verwendung von [属性名] kann das Problem perfekt lösen, und der Attributname kann nicht nur direkt geschrieben werden, sondern auch kann mithilfe von Variablen angegeben werden. Die spezifische Verwendung ist wie folgt:
sei obj = {};
let a = 'kleiner Name';
obj.name = 'Prinz';
// Es ist illegal, Punkte zum Definieren von Attributen mit Leerzeichen in der Mitte zu verwenden // obj.little name = 'Little Prince';
obj[a] = 'Kleiner Prinz';
console.log(obj); { Name: 'Prinz', 'kleiner Name': 'Kleiner Prinz' } Die Ergebnisse des Vergleichs einiger spezieller Werte mit === oder == entsprechen möglicherweise nicht Ihren Anforderungen. Sie können Object.is(第一个值，第二个值) zur Beurteilung verwenden, und Sie werden möglicherweise zufrieden sein
console.log(NaN == NaN); console.log(+0 == -0); console.log(Object.is(NaN, NaN)); console.log(Object.is(+0, -0));
FALSCH WAHR WAHR FALSCH
Verwenden Sie Object.assign() , um ein Objekt wie folgt in ein anderes Objekt zu kopieren:
sei obj = {};
Object.assign(
// Quellobjekt,
//Zielobjekt kopieren { a: '☃️' }
);
console.log(obj); { a: '☃️' }Mit es6 können Sie den Prototyp eines Objekts wie folgt festlegen:
sei obj1 = {
erhalten() {
Rückgabe 1;
}
}
sei obj2 = {
a: 10,
erhalten() {
Rückkehr 2;
}
}
let test = Object.create(obj1);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
Object.setPrototypeOf(test, obj2);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);1 WAHR 2 WAHR
sei obj1 = {
erhalten() {
Rückgabe 1;
}
}
sei obj2 = {
a: 10,
erhalten() {
Rückkehr 2;
}
}
let test = {
__proto__:obj1
}
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
test.__proto__ = obj2;
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);1 WAHR 2 WAHR
sei obj1 = {
erhalten() {
Rückgabe 1;
}
}
let test = {
__proto__: obj1,
erhalten() {
return super.get() + ' ☃️';
}
}
console.log(test.get());1 ☃️
Schreiben Sie vor dem Lernen zunächst einen Iterator
Funktion die(arr) {
sei i = 0;
zurückkehren {
nächste() {
let done = (i >= arr.length);
let value = !done ? arr[i++] : undefiniert;
zurückkehren {
Wert: Wert,
erledigt: erledigt
}
}
}
}
let arr = ['☃️', '?', '?'];
let dieArr = die(arr);
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next()); {Wert: '☃️', erledigt: falsch}
{ value: '?', done: false }
{ value: '?', done: false }
{ Wert: undefiniert, erledigt: wahr }OK, schauen wir uns den vereinfachten Generator an
Funktion* die(arr) {
for (let i = 0; i < arr.length; i++) {
yield arr[i];
}
}
let test = die(['?','☃️']);
console.log(test.next());
console.log(test.next());
console.log(test.next()); { value: '?', done: false }
{Wert: '☃️', erledigt: falsch}
{ Wert: undefiniert, erledigt: wahr }Verwenden Sie es6, um Klassen schnell und bequem zu erstellen, großartig
Klasse stu {
Konstruktor(Name) {
this.name = Name;
}
sagen() {
return this.name + 'Say Ori';
}
}
let xiaoming = new stu("小明");
console.log(xiaoming.say());Xiao Ming sagte, Ori habe gegeben
Definieren Sie Get/Set-Methoden, um Klassenattribute abzurufen oder zu ändern
Klasse stu {
Konstruktor(Name) {
this.name = Name;
}
erhalten() {
return this.name;
}
set(newStr) {
this.name = newStr;
}
}
let xiaoming = new stu("小明");
console.log(xiaoming.get());
xiaoming.set("Daming")
console.log(xiaoming.get());Xiao Ming und Da Ming
Mit dem Schlüsselwort static geänderte Methoden können direkt verwendet werden, ohne das Objekt zu instanziieren.
Klasse stu {
statisch say(str) {
console.log(str);
}
}
stu.say("Ursprüngliche statische Methode");Statische Origi-Methode
Durch die Verwendung von Vererbung kann die Coderedundanz reduziert werden, z. B.:
Klasse Person {
Konstruktor(Name, Bir) {
this.name = Name;
this.bir = bir;
}
showInfo() {
return 'Name:' + this.name + 'Geburtstag:' + this.bir;
}
}
Klasse A erweitert Person {
Konstruktor(Name, bir) {
super(name, bir);
}
}
let zhouql = new A("Zhou Qiluo", "2002-06-01");
// Zhou Qiluo selbst hat keine showInfo-Methode, sie wird von der console.log(zhouql.showInfo()) von Person geerbt;Name: Zhou Qiluo Geburtstag: 01.06.2002
Die Set-Sammlung lässt im Gegensatz zu Arrays keine doppelten Elemente in der Set-Sammlung zu
//Eine Set-Sammlung erstellen let food = new Set('??');
// Wiederholt hinzufügen, nur einer kann hineingehen food.add('?');
food.add('?');
console.log(food);
//Aktuelle Sammlungsgröße console.log(food.size);
// Bestimmen, ob ein Element in der Sammlung vorhanden ist console.log(food.has('?'));
// Ein Element in der Sammlung löschen food.delete('?');
console.log(food);
// Schleife durch die Sammlung food.forEach(f => {
console.log(f);
});
// Sammlung löschen food.clear();
console.log(food); Set(3) { '?', '?', '?'
3
WAHR
Set(2) { '?', '?'
?
?
Set(0) {}Map wird kombiniert, um Schlüssel-Wert-Paare zu speichern
let food = new Map();
let a = {}, b = function () { }, c = "name";
food.set(a, '?');
food.set(b, '?');
food.set(b, '?');
food.set(c, 'Reis');
console.log(food);
console.log(food.size);
console.log(food.get(a));
food.delete(c);
console.log(food);
console.log(food.has(a));
food.forEach((v, k) => {
console.log(`${k} + ${v}`);
});
food.clear();
console.log(food); Map(3) { {} => '?', [Funktion: b] => '?', 'name' => 'rice' }
3
?
Map(2) { {} => '?', [Funktion: b] => '?'
WAHR
[Objekt Objekt] + ?
Funktion () { } + ?
Karte(0) {}Durch die modulare Entwicklung kann es6 problemlos einige Inhalte importieren und exportieren sowie Standardexporte und andere Details durchführen.
sei a = '?';
let f1 = function (str = 'Ihre Parameter') {
console.log(str);
}
export { a, f1 }; importiere {a, f1} aus './27moduletest.js';
console.log(a);
f1();
f1('verstanden');