Zusammenfassung allgemeiner Wissenspunkte in es6

Häufig verwendete Wissenspunkte von es6

Wenn es um es6 geht, sprechen wir über Javascript. Es6 ist auch ES2015

1. 1995: JavaScript wurde ursprünglich geboren namens LiveScript.

2. 1997: Einführung des ECMAScript-Standards.

3. 1999: ES3 erschien, gleichzeitig wurde IE5 der letzte Schrei.

4. 2000–2005: XMLHttpRequest, auch bekannt als AJAX, wird häufig in Outlook Web Access (2000), Oddpost (2002), Gmail (2004) und Google Maps (2005) verwendet.

5. 2009: ES5 kommt heraus (was die meisten von uns jetzt verwenden) Standards wie foreach, Object.keys, Object.create und JSON.

6. 2015: ES6/ECMAScript2015 erscheint. Im Jahr 2015 beschloss TC39, das für die Entwicklung des ECMAScript-Spezifikationsentwurfs zuständige Komitee, das System zur Definition neuer Standards auf einmal im Jahr zu ändern

7. 2016: ES7/ECMAScript2016 erschien.

8. 2017: ES8/ECMAScript2017 erscheint.

Wenn es um es6 geht, empfehle ich Ihnen zwei Links zum Ausprobieren.

https:/ / kangax.github.io/compat-table/es6/

http://kangax.github.io/compat-table/es2016plus/

So verwenden Sie es6

Sie können Babel-Code in ES5-Code konvertieren. Sie können sie ausprobieren.

Babel ist ein weit verbreiteter ES6-Transcoder, der ES6-Code konvertieren kann dass es in der bestehenden Umgebung ausgeführt werden kann. Sie können die Tools auswählen, die Sie von Babel gewohnt sind

Der Unterschied zwischen var, let und const in js

var! ! ! !

Durch var definierte Variablen können geändert werden, wenn sie nicht initialisiert werden, und es wird kein Fehler gemeldet.

Var ist in zwei Typen unterteilt: lokaler Bereich und Funktionsbereich

lass! ! ! !

let ist ein Bereich auf Blockebene. Nachdem das let innerhalb der Funktion definiert wurde, hat es keine Auswirkungen auf die Außenseite der Funktion.

let ist ein Bereich auf Blockebene, let hat keine Vorfunktion und kann

const nicht wiederholt deklarieren! ! ! !

Durch const definierte Variablen können nicht geändert werden und müssen initialisiert werden.

const ist eine Konstante, kann nicht geändert werden, wird im Allgemeinen in Großbuchstaben geschrieben und ist auch ein Bereich auf Blockebene. . .

es6-Vorlagenzeichenfolge, erweitertes Objektliteral, destrukturierende Zuweisung

es6-Vorlagenzeichenfolge

Vorlagenzeichenfolge ist ein Zeichenfolgenliteral, das eingebettete Ausdrücke ermöglicht. Sie können mehrzeilige Zeichenfolgen und Zeichenfolgeninterpolationsfunktionen verwenden. In früheren Versionen der ES2015-Spezifikation wurden sie „Vorlagenzeichenfolgen“ genannt

String unterstützt mehrere Zeilen
...Expand-Operator
3. Erweitertes Objekt Es gibt zwei Möglichkeiten zur Ausgabe Literale
   Objektliterale: traditionell „.“ und Array-Modus. Bei der Ausgabe im Array-Modus müssen die eckigen Klammern jedoch problemlos in Anführungszeichen gesetzt werden Bewältigen Sie die Situation, in der eine große Anzahl von Parametern der Funktion in einer Eins-zu-Eins-Entsprechung ausgegeben werden muss. Seine Lösung besteht darin, ein Objekt an die Funktion zu übergeben und dieses Objekt wörtlich zu definieren, und die entsprechenden Attribute Werte können auf den ersten Blick verwendet werden, da eine Funktion nur ein Teil des Codes ist, der zur Ausführung aufgerufen werden muss

4. Literale Objekteigenschaften können abgekürzt werden

Literale Objektmethoden können Das Funktionsschlüsselwort wird in der Abkürzung weggelassen

Objekteigenschaften können als automatisch berechnete Eigenschaften geschrieben werden

1. Vererbung——Port——

2. Destrukturierende Zuweisung
3. Destrukturierende Zuweisung kann die Elemente des Arrays oder die Eigenschaften des Objekts zuweisen Eine andere Variable. Die Definitionssyntax der Variablen ist der eines Array-Literals oder eines Objektliterals sehr ähnlich. Diese Syntax ist sehr prägnant und intuitiver und klarer als die herkömmliche Eigenschaftszugriffsmethode
   Tatsächlich ist sie es Es ist nicht angebracht, Variablen zur Beschreibung zu verwenden, da Sie verschachtelte Arrays beliebiger Tiefe destrukturieren können:
Sie können die entsprechenden Bits leer lassen, um bestimmte Elemente im destrukturierten Array zu überspringen:

var [foo, [[bar], baz]] = [1, [[2], 3]];console.log(foo);// 1console.log(bar);// 2console.log(baz);// 3

Array erweitern

var [,,third] = ["foo", "bar", "baz"];console.log(third);// "baz"

Arrays zusammenführen

1. Aufruf der Erweiterungsfunktion

2. Pfeilfunktion
4. Funktionsparameter
   Funktionsparameter sind in drei Typen unterteilt

Standardparameter

//箭头函数 =>let jian = () => {console.log("Hello")}jian();//没有参数()=>{console.log("你好")};//有参数(name)=>{console.log(name);};//可以省略()let d = name=>{console.log(name);}d('jiang');//两个参数(name,age)=>{console.log(name,age);};//省略后的let c (a,b)=>a+b;(a,b)=>{console.log(a+b);console.log(c);

Verbleibende Parameter

1. Symbol
2. Symbol ist neu in ES6. Daten vom Typ „Mehrwert“, die einen nie wiederkehrenden Wert darstellen.

3. Beachten Sie, dass der neue Operator nicht verwendet werden kann vor Symbol hier, falls erforderlich, müssen Sie Object.getOwnPropertySymbols(o) verwenden.

Set und Map 🎜>

let m = 1;let l = 1;console.log(m==l);//打印出truelet mm = Symbol();let ll = Symbol();console.log(mm==ll);//打印出flase

类似于 WeakMap，WeakSet 对象可以让你在一个集合中保存对象的弱引用，在 WeakSet 中的对象只允许出现一次：

var ws = new WeakSet();var obj = {};var foo = {};ws.add(window);ws.add(obj);ws.has(window); // truews.has(foo);    // false, foo 没有添加成功ws.delete(window); // 从结合中删除 window 对象ws.has(window);    // false, window 对象已经被删除

Map和WeakMap

Map和WeakMap是ES6新增的数据结构 事实上每个对象都可以看作是一个 Map。 它们本质与对象一样，都是键值对的集合，但是他们与Object对象主要的不同是，键可以是各种类型的数值，而Object对象的键只能是字符串类型或者Symbol类型值 。Map和WeakMap是更为完善的Hash结构。

// Mapsvar m = new Map();m.set("hello", 42);m.set(s, 34);m.get(s) == 34;// Weak Mapsvar wm = new WeakMap();wm.set(s, { extra: 42 });wm.size === undefined

WeakMap数据结构 WeakMap结构与Map结构基本类似。 区别是它只接受对象作为键名，不接受其他类型的值作为键名。键名是对象的弱引用，当对象被回收后，WeakMap自动移除对应的键值对，WeakMap结构有助于防止内存泄漏。

var wm = new WeakMap(); var obj = new Object(); wm.set(obj,'对象1'); obj=null; wm.get(obj);    //undefined wm.has(obj);    //false

由于WeakMap对象不可遍历，所以没有size属性。

关键点：ES2015=ES6
最常用的ES6特性
ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。
块级作用域与函数声明问题：
函数能不能在块级作用域之中声明，是一个相当令人混淆的问题。
ES6引入了块级作用域，明确允许在块级作用域之中声明函数。

注意：ES6规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this
5.ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。
6.template string
我们要插入大段的html内容到文档中时，传统的写法非常麻烦，所以之前我们通常会引用一些模板工具库

Das obige ist der detaillierte Inhalt vonZusammenfassung allgemeiner Wissenspunkte in es6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!