Zu den neuen Funktionen von ES6 gehören: 1. let und const; 3. Template-String; 5. Objektaspekte, wie z. B. Map und Set; und Pfeile Funktion; 7. Klassenschlüsselwort; 8. Versprechen und Proxy 9. Modularisierung;
Die Betriebsumgebung dieses Tutorials: Windows 10-System, ECMAScript Version 6, Dell G3-Computer.
Symbol ist ein neuer grundlegender Datentyp, der in ES6 eingeführt wurde. Er wird zur Darstellung eines eindeutigen Werts verwendet und kann nicht mit anderen Datentypen verwendet werden. Es ist neben undefiniert, null, Zahl, Zeichenfolge, Boolean und Objekt der siebte Datentyp in JavaScript.
Sie können einen Symbolwert wie folgt erstellen:
const a = Symbol();
console.log(a); //Symbol()
//因为Symbol是基本数据类型，而不是对象，不能 new 。
const a = new Symbol();//报错，Symbol is not a constructor
Nach dem Login kopieren
Nachdem Sie Symbol() verwendet haben, um einen Wert vom Typ Symbol zu erstellen und ihn einer Variablen zuzuweisen, erhalten Sie einen eindeutigen Wert im Speicher. Außer durch die Variable a kann niemand diesen Wert in irgendeinem Bereich neu erstellen Build-Vorlagen
Für ES6: Verwenden Sie ${} zum Definieren; Backticks (``), um es direkt zu tun;
const a = Symbol();const b = Symbol();
Nach dem Login kopieren
Sehr einfach zu verwenden
3.1 Neue String-Methode (ergänzend)
includes() Bestimmt, ob der String den Parameter string enthält und gibt einen booleschen Wert zurück.
startsWith() / endWith(), bestimmen Sie, ob die Zeichenfolge mit der Parameterzeichenfolge beginnt oder endet. Gibt einen booleschen Wert zurück. Diese beiden Methoden können einen zweiten Parameter haben, eine Zahl, die die Position angibt, an der die Suche gestartet werden soll.
<script>
url="xxxxxx"
// es6之前
let html="<div>"+
" <a>"+url+"</a>"+
"</div>";
//es6
let eshtml=`<div>
<a>${url}</a>
</div>`</script>
Nach dem Login kopieren
${}来界定； 反引号(``)直接搞定；
let str = 'blue,red,orange,white';str.includes('blue');
//truestr.startsWith('blue');
//true
str.endsWith('blue');
//false
let arr = 'hell';console.log(arr.padEnd(5,'o'));
//'hello'console.log(arr.padEnd(6,'o'));
//'helloo'console.log(arr.padEnd(6));
//'hell ',如果没有指定将用空格代替
console.log(arr.padStart(5,'o'));
//'ohell'
Nach dem Login kopieren
padStart()/padEnd()
Die Methode repeat() gibt so oft eine neue Zeichenfolge zurück, wie angegeben.
let [a,b,c] = [1,2,3];console.log(a,b,c); //1,2,3
let [a,b,c] = [1,,3];console.log(a,b,c); //1,undefined,3
let [a,,b] = [1,2,3];console.log(a,b);//1,3
let [a,..b] = [1,2,3];
//...是剩余运算符，表示赋值运算符右边除第一个值外剩余的都赋值给b
console.log(a,b);
//1,[2,3]
Nach dem Login kopieren
padStart()/padEnd(), verwenden Sie den Parameter string, um die Zeichenfolge entsprechend der angegebenen Länge von vorne oder hinten zu vervollständigen und eine neue Zeichenfolge zurückzugeben.
rrree 4. Destrukturierender Ausdruck Destrukturierende Zuweisung ist eine Erweiterung des Zuweisungsoperators. Es handelt sich um einen Mustervergleich für ein Array oder ein Objekt und weist dann den darin enthaltenen Variablen Werte zu. String
von ES6 können alle Destrukturierungsausdrücke verwenden. 4.1 Array-Destrukturierung ähnlich wie bei Arrays , aber der Variablenname auf der linken Seite muss den Attributnamen des Objekts verwenden und geschweifte Klammern {} anstelle von eckigen Klammern []
Karte und Set wurden neu in es6 hinzugefügt. Objekt
5.1.1 MapMap-Objekt wird zum Speichern von Schlüssel-Wert-Paaren verwendet. Jeder von JavaScript unterstützte Wert kann als Schlüssel (Schlüssel) oder Wert (Wert) verwendet werden.
Anders als bei Objekten können die Schlüssel von
Objekt nur Strings
oder die
Symbolwerte von ES6 sein, während Map ein beliebiger Wert sein kann.
Map-Objekt hat ein Größenattribut, das die Anzahl der Schlüssel-Wert-Paare speichert, während Objektobjekt kein ähnliches Attribut hat.
let myMap = new Map([['name','ren'],['age',12]]);console.log(myMap);
//{'name'=>'ren','age'=>12}myMap.set('sex','male');console.log(myMap);
//{'name'=>'ren','age'=>12,'sex'=>'male'}console.log(myMap.size);
//3myMap.get('name'); //'ren'myMap.has('age');
//truemyMap.delete('age');
//truemyMap.has('age');
//falsemyMap.get('age');
//undefined
Nach dem Login kopieren
5.1.2 Set
kann als Set-Sammlungsobjekt des Backends verstanden werden
Das Set-Objekt ähnelt dem Map-Objekt, speichert jedoch keine Schlüssel-Wert-Paare. Ähnlich einem Array, aber jedes Element ist einzigartig.
let mySet = new Set([1,2,3]);
//里面要传一个数组，否则会报错console.log(mySet);
//{1,2,3}mySet.add(4);console.log(mySet);
//{1,2,3,4}mySet.delete(1);
//truemySet.has(1);
//falseconsole.log(mySet);
//{2,3,4}
<script>
let name ='admin'
let age = 20
//es6之前
// let person={
// name:name,
// age:age
// }
//es6 声明对象时的属性名与引用的变量名相同就可以省略
let person={
name,
age }</script>
Nach dem Login kopieren
5.6 …(对象扩展符)
拷贝
<script>
let person={
name: "admin",
age: 12,
wife:"迪丽热巴"
}
let person2={...person}
console.log(person2===person);//false
console.log(person2);
//{name: 'admin', age: 12, wife: "迪丽热巴"}
</script>
let add = (a,b) => {
return a+b;}let print = () => {
console.log('hi');}let fn = a => a * a;
//当只有一个参数时，括号可以省略，函数体只有单行return语句时，大括号也可以省略。
Nach dem Login kopieren
6.3 箭头函数和普通函数最大的区别在于其内部this永远指向其父级对象的this。(重点)
var age = 123;
let obj = {
age:456,
say:() => {
console.log(this.age); //this指向window
}
};obj.say(); //123
Nach dem Login kopieren
7、class（类）
class 作为对象的模板被引入ES6，你可以通过 class 关键字定义类。class 的本质依然是一个函数。
创建类
<script>
class person {
//关键字声明方式
constructor(name) {
this.name=name }
say() {
console.log("hello");
}
}
var p = new person('p');
p.say(); //'hello'
console.log(p.name);</script>
Das obige ist der detaillierte Inhalt vonWas sind die neuen Funktionen von es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Backticks 
