Einführung in sehr praktische neue Funktionen in ES6_Javascript-Kenntnissen

ECMAScript 6 rückt uns immer näher. Auch Javascript steht vor großen grammatikalischen Änderungen und hat speziell eine Kolumne „ES6 in einfachen Worten“ eröffnet, um einen Blick darauf zu werfen, was ES6 bringen wird zu uns. Neue Inhalte.

steht vor

ES6 wurde der Ecma-Konferenz zur Überprüfung vorgelegt, was bedeutet, dass wir eine große Welle der neuesten Standards für Javascript sowie etwas syntaktischen Zuckers einläuten werden. In ES6 gibt es viele Dinge, die unsere Aufmerksamkeit verdienen. Hier sind einige der neuen Funktionen, die ich am häufigsten verwende, um sie aufzuzeichnen.

1. for-of-Schleife

Dieses Ding eignet sich hervorragend zum Schleifen von Arrays, da es derzeit alle Mängel des Schleifens von Arrays in es5 ausgleicht.

For-in durchläuft beispielsweise die zusätzlichen Eigenschaften des Array-Objekts, nicht nur den Array-Wert. Ein weiterer Punkt ist, dass der Index in for-in vom Typ string ist, was besonders wichtig ist.

var arrObj=['alexchen',1,{}];
arrObj._name='attr-AlexChen';
for(var i in arrObj){
console.log(arrObj[i]) // 会把_name属性也遍历出来 
console.log(typeof(i)) // 全部输出 string
}

Natürlich haben wir auch die Funktion forEach(), die ebenfalls Probleme hat, z. B. dass man darin die Rückgabe nicht unterbrechen kann:

var arrObj = ['alexchen','boy','great'];
arrObj.forEach(function (v) {
if (v == 'boy') {
return 'can not return';
}
console.log(v) //会输出alexchen great
})

Das scheint viel einfacher zu sein als for-in. Aber wie oben erwähnt, hat es seine Mängel. Versuchen wir es also mit:

var arrObj = ['alexchen',1,{}];
arrObj._name = 'attr-alexchen';
for (var i of arrObj) {
console.log(i);//这里只会输出,alexchen,1,object{},不会输出attr-alexchen
console.log(typeof(i))//这里会输出 string,number,object
if (i == 1) {
break;
}
console.log(i)//只会输出 alexchen，满足条件之后就不在继续循环，提高了效率并且可以自由控制跳出循环或继续循环
}

Sie können sehen:

Bei Verwendung von for-of werden die Elemente innerhalb des Arrays in einer Schleife durchlaufen und zusätzliche Attribute werden in for-in nicht durchlaufen. Zweitens stimmt der Typ der Schleifenvariablen mit ihrem Typ im Array überein, anstatt dass es sich bei allen um Strings handelt .

Allein diese beiden Punkte machen es für uns lohnenswert, for-of statt forEach() oder for-in zu wählen. Natürlich gibt es immer noch einige Browser, die dies nicht unterstützen. Der obige Code kann jedoch erfolgreich ausgeführt werden und die erwarteten Ergebnisse in der neuesten Version von FireFox erzielen. Natürlich wird for-of nicht nur für Arrays verwendet, Sie können es auch für jedes arrayähnliche Objekt wie DOM-NodeList, String usw. verwenden.

2. Vorlagenzeichenfolge

Dieses Ding macht auch sehr viel Spaß und kann zum Spleißen von Saiten verwendet werden. Aus dem Namen wissen wir, was es tut. Im Prozess der Front-End-Entwicklung ist es unvermeidlich, auf Situationen zu stoßen, in denen Zeichenfolgen dynamisch gespleißt werden müssen (dynamische DOM-Generierung, Datenformatierung) usw.:

(function sayHello(name, words) { 
console.log(`hello: ${name},welcome es6,your words is: ${words}`); //
})('alexchen','im admin')//运行之后将会输出：hello: alexchen,welcome es6,your words is: im admin

Beachten Sie, dass die als Vorlage verwendete Zeichenfolge mit ` umschlossen ist. Unter diesen ist $(paramenter) ein Platzhalter und unterstützt Objekte wie:$(obj.name). Im Vergleich zu gewöhnlichen Zeichenfolgen können Vorlagenzeichenfolgen in mehreren Zeilen geschrieben werden, ohne die +-Verkettung zu verwenden:

hello:$(name),
welcome es6,
your words is $(words)

Es ist zu beachten, dass Vorlagenzeichenfolgen keine Sonderzeichen maskieren, Sie müssen sich also selbst mit den Sicherheitsrisiken auseinandersetzen. Vorlagenzeichenfolgen können das Vorlagenframework nicht ersetzen, da Vorlagenzeichenfolgen keine integrierte Schleifensyntax und bedingte Anweisungen haben. Für die normale Verkettung gewöhnlicher Zeichenfolgen können wir es also verwenden und Ihren Code etwas cooler aussehen lassen. PS(Ansonsten glaube ich nicht, dass es nützlich ist. ψ(╰_╯))

Hier ist eine detailliertere Einführung zur Lösung des oben erwähnten Problems, dass keine integrierten Schleifen und Beurteilungszweige vorhanden sind:

es6-template string-mozilla

3. Standardparameter

Das ist etwas interessant. Wir alle wissen, dass js-Funktionen keine Standardwerte für Funktionsparameter festlegen müssen. Der folgende Code meldet beispielsweise einen Fehler

(function(a=0,b=0){return a+b;})(1,2)//不支持es6的浏览器下会报错的SyntaxError: Unexpected token =

Dies bedeutet auch, dass unseren Parametern keine Standardwerte zugewiesen werden können. Wenn wir Parametern Standardwerte zuweisen müssen, müssen wir feststellen, ob sie innerhalb der Funktion undefiniert sind. In ES6 können wir jedoch Standardwerte für Parameter festlegen, anstatt Standardwerte nach der Beurteilung innerhalb der Funktion zuzuweisen. Wir können nicht nur Standardwerte zuweisen, sondern auch Betriebsausdrücke wie folgt verwenden:

(function testDefaultsParams(pars1 = "alexchen",
pars2 = (pars1 == "alexchen") ? "admin" : "not admin") {
console.log(`welcome ${pars1} ,u r ${pars2}!!`)//用到了上面说的模版字符串
})();
/**参数为空时输出，welcome alexchen ,u r admin!!,
如果第一个参数不是alexchen则输出，welcome alexchen ,u r not admin!!**/

Diese Methode ist beim Schreiben von Code sehr einfach, genau wie in dynamischen Sprachen wie c#. Das ist sowohl intuitiv als auch bequem. Es ist also immer noch sehr gut zu verwenden. Es gibt auch einen Rest-Parameter (Rest-Parameter). Ich habe keine spezielle Verwendung gefunden, daher werde ich ihn nicht aufschreiben. Wenn Sie interessiert sind, können Sie ihn sich ansehen

Standardparameter und verbleibende Parameter -mozilla

Es gibt viele neue Funktionen und Syntax in ES6. Wenn Sie interessiert sind, können Sie einen Blick auf den Blog des Mozilla-Teams werfen, der eine sehr detaillierte Einführung und eine Reihe von Artikeln enthält.

Einführung in die Mozilla-ES6-Serie

Okay, die oben genannten drei praktischen neuen Dinge, die ich in ES6 gefunden habe, sollten in der täglichen Entwicklung am häufigsten verwendet werden.

Hier geht es um die sehr praktischen neuen Funktionen in ES6. Ich hoffe, es wird Ihnen hilfreich sein!