Résumé des points de connaissances communs dans es6

Points de connaissance fréquemment utilisés d'es6

Quand il s'agit d'es6, parlons de javascript, es6 est aussi ES2015

1. 1995 : JavaScript est né, c'est initialement. nommé LiveScript.

2. 1997 : établissement du standard ECMAScript.

3. 1999 : ES3 apparaît, en même temps IE5 fait fureur.

4. 2000-2005 : XMLHttpRequest, également connu sous le nom d'AJAX, est largement utilisé dans Outlook Web Access (2000), Oddpost (2002), Gmail (2004) et Google Maps (2005).

5. 2009 : ES5 sort (ce que la plupart d'entre nous utilisent actuellement) des standards comme foreach, Object.keys, Object.create et JSON.

6. 2015 : ES6/ECMAScript2015 apparaît. En 2015, TC39, le comité chargé d'élaborer le projet de spécification ECMAScript, a décidé de changer le système de définition des nouvelles normes à une fois par an

7. 2016 : ES7/ECMAScript2016 est apparu.

8. 2017 : ES8/ECMAScript2017 apparaît.

Quand il s'agit d'es6, la compatibilité me vient à l'esprit. Je vous recommande deux liens à consulter. Ils sont toujours très bons

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

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

Comment utiliser es6

Vous pouvez convertir le code es6 en code es5. Babel Google traceur est deux transcodeurs Vous pouvez les essayer

Babel est un transcodeur ES6 largement utilisé qui peut convertir ES6. Le code est donc converti en code ES5. qu'il peut être exécuté dans l'environnement existant. Vous pouvez choisir les outils auxquels vous êtes habitué en utilisant Babel

La différence entre var, let et const en js

var ! ! ! !

Les variables définies par var peuvent être modifiées. Si elles ne sont pas initialisées, undéfini sera affiché et aucune erreur ne sera signalée

Var est divisé en deux types : portée locale et portée de fonction

laissons ! ! ! !

let est une portée au niveau du bloc. Une fois la fonction définie à l'aide de let, elle n'a aucun impact sur l'extérieur de la fonction.

let est une portée au niveau du bloc. Contrairement à var, let n'a pas de pré-fonction et ne peut pas déclarer

const à plusieurs reprises ! ! ! !

Les variables définies par const ne peuvent pas être modifiées et doivent être initialisées.

const est une constante, ne peut pas être modifiée, est généralement en majuscules et est également une portée au niveau du bloc. . .

Chaîne de modèle es6, littéral d'objet amélioré, affectation de déstructuration

Chaîne de modèle es6

La chaîne de modèle est une chaîne littérale qui permet des expressions intégrées. Vous pouvez utiliser des chaînes multilignes et des fonctions d'interpolation de chaînes. Elles étaient appelées « chaînes de modèles » dans les versions précédentes de la spécification ES2015

1. `` Apostrophe

2. Variables de liaison

.

3. La chaîne prend en charge plusieurs lignes

4. ...Opérateur de développement

Objet amélioré Il existe deux façons d'afficher littéral

objet littéral : traditionnel '. ' et mode tableau. Cependant, lors de la sortie en mode tableau, les crochets doivent être placés entre guillemets

objet. gérer facilement la situation où un grand nombre de paramètres de la fonction doivent être générés en correspondance biunivoque. Sa solution est de passer un objet dans la fonction, et cet objet est défini de manière littérale, ainsi que les attributs correspondants. et les valeurs peuvent être utilisées. Leur relation est claire en un coup d'œil, car une fonction n'est qu'un morceau de code qui doit être appelé pour être exécuté

1. Les propriétés littérales de l'objet peuvent être abrégées<.>

2. Les méthodes d'objet littérales peuvent L'abréviation omet le mot-clé de fonction

3. Les propriétés d'objet peuvent être écrites sous forme de propriétés calculées automatiquement

4. Héritage——port——

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

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

1. Agrandir array

2. Copie de tableau

3. Fusion de tableaux

4. Appel de fonction d'extension

//箭头函数 =>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);

1. Paramètres par défaut

2. Paramètres étendus

3. Paramètres restants

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

Les structures de données Set et WeakSet sont nouvelles dans ES6.

C'est très similaire à un tableau, mais les membres de la structure de données Set sont uniques.

类似于 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内容到文档中时，传统的写法非常麻烦，所以之前我们通常会引用一些模板工具库

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!